Images are one of the most important elements included in a Magento store. Because your shoppers cannot touch or try on your products, they rely heavily on images to decide whether or not they will buy your product. Images are also important for SEO purposes. With the introduction of retina screens, sizing and saving images for web has become complicated. While you want to upload the best images for your customers, you don’t want to slow down your website or use images that aren’t retina-display ready. I put together a simple guide for saving and uploading images for a Magento store.
1. Name your image after the product or the term you think shoppers would probably use to search for the image.
The name of your image file will be read by search engines and will control where your images appear in search results. You should name your images with search terms in mind, so product images should probably be named after the product itself. Remember to separate words in the image with a hyphen (-). If you’re selling a blue Lazyboy leather couch, your image should be named lazyboy-leather-couch-blue.jpg.
2. Fill out the Image Label.
The image label will act as the alt tag for the image. The alt tag appears if the image file doesn’t load, is blocked, or needs to be read by shoppers who are visually impaired.
3. Add the smallest possible file size to minimize load times
Load time of your website will affect its search engine rankings. While images may not be the most cumbersome item that’s slowing you down, it’s important to optimize your images for the web. While you want to show off big, flashy images of your products, there are a few techniques you should know to keep them as small as possible while retaining quality.
4. Separate thumbnails vs. large images
If you want to offer a thumbnail version and a large version, don’t use the source code to shrink down the large version into a thumbnail. Generate a smaller image to use as a thumbnail (which is something Magento does for you).
5. Consider retina display
Saving out web-friendly jpeg images means they are relatively low in resolution and file size (generally under 100KB for larger images and under 60KB for smaller images). Photoshop has a great “save for web and devices” option that comes in handy when cropping and saving out images for your website. If you don’t have Photoshop, other websites like https://www.picmonkey.com/ offer a similar service. Use higher quality PNG files only when text is involved, but avoid adding text to images and opt for HTML and CSS where possible.
For retina screens, image saving starts to get complicated. One option is to upload and re-size larger images so that they have the double pixel density of retina screens. If you’d rather not load larger images right away, another option is to replace some images with an @2x version when higher resolution is detected. This can be done automatically with some simple Javascript or manually with CSS. You can read more about this technique here
In Conclusion
Creating and uploading the best images for your website is complicated since the introduction of responsive design and retina screens. It’s important to use high quality images that don’t slow your website down.
To learn more about using the best images for your Magento store, see my previous article, Getting the most out of your images in Magento
Customer Success Manager
