E-COMMERCE IMAGE OPTIMIZATION TIPS

Product image optimization is often overlooked, even though it has a huge potential of driving sales. Here are some of the most important image optimization tips for your online store.

Choose a proper image size. Larger images are the best, I hear you, but if the website page takes more than three seconds to load, most people will give up, choosing another e-commerce store, so they'll never be able to see your high-resolution images. So, try to keep all the product images on your site under 50 KB, and feel free to give people the option of loading larger versions of them when they click the image thumbnails. Don't ever reduce image size using code; always use lower (thumbnail) and higher resolution versions for each image.

Optimize the site graphics by choosing the proper format and/or compression factor. Some image editing packages, such as Adobe's Photoshop, can export images for the web, allowing you to tweak various parameters until you are happy with the image size vs quality ratio. Fortunately, you can achieve similar results with less expensive graphics editors such as Pixlr.

JPEG files are often used because they can be compressed a lot, helping e-commerce store owners cram several images on a single product page, and thus present it from several angles. It's true that if the compression factor is too big, image quality is degraded. PNG files use the lossless DEFLATE data compression algorithm, so they'll always look great; however, the resulting file sizes are often larger in comparison with JPEG files. Nevertheless, PNG images which include contiguous color zones (a lot of white space, for example) can be compressed much better, leading to smaller file sizes. Sometimes people use GIF files, which don't look that great, but can be animated. They may be a good solution for graphics that require solid colors and exact detail, even though PNG files will often look better than GIFs.

It's time to set the proper "alt" tags; these are image descriptions which can be identified even when the browser is unable to display the images, or when the graphics themselves aren't very relevant. Think search engine bots, visually impaired people who use screen readers, and so on. If you want your product pictures to be displayed in Google's image search results, make sure to use descriptive "alt" tags such as "5dBi wireless antenna". Use a similar rule for the image file name, which should look like this: 5dBi-wireless-antenna.jpg. Always use plain language to describe your images, but don't overdo it; I guarantee that keyword stuffing will lead to trouble.

Use a mobile-friendly website design, and test your images using various phones, tablets and laptops. Your graphics will look good on a desktop computer, but they may look terrible on an old 800x480 pixels screen. Use CSS to scale down images when your visitors' browsers load the mobile version of the online store. In fact, you could even have your website coded in a way that will tell browsers to load lower resolution versions of your images if they are run by older devices, and higher resolution graphics for modern smartphones and tablets, which have a much better screen resolution. That's how we do things here ;)

Content delivery networks (CDNs) reduce image loading times, because they will always load the requested resources from the closest servers. Since the client is closer to the server, all your images can be delivered fast, so any website page will load faster.

Now that your work is done, it's time to submit an image sitemap, telling search engines the exact location and characteristics of each image on your site. The good news is that many CMSs have plugins and modules that can do that for you at the push of a button. You could create your own image sitemap, but why would you do that when you can automate the process?

Very few online store owners invest their time and money into creating high quality graphics for their sites, so apply what you've learned here, and I guarantee that you will put yourself at an advantage.