When we talk about image optimization, we usually mean either filling meta tags for SEO or compressing images to reduce page weight. In one of the previous articles, we already talked about the fact that SEO-optimized images will help attract traffic and will have a good effect on the online store ranking in a search engine. Today we will discover why it is necessary to optimize the images size in the online store, what optimization methods exist and whether this process can be automated.
Why it is necessary to optimize the images size?
The product image is one of the main elements that a online store visitor pays attention to. To motivate him to make a purchase, the product’s photo must be detailed and high-quality, which, unfortunately, means a large image weight and, as a result, the online store page.
The “heavy” page slows down the work of the online store. When the download time is more than three seconds, users most often leave without waiting for it to finish. Such a users means a lost profit. For example, Amazon found out that if their pages start loading for a second longer, they will lose $ 1.6 billion a year. Failures worsen behavioral metrics and painfully hit the positions of online store ranking. Also it is true that speed up page loading has a positive effect on conversion. You can attract more potential customers and increase profits.
So, you should use optimization to speed up the loading of the online store pages.
Image optimization is the processing of a file in order to reduce its “weight”, while preserving the quality as much as possible.
Advantages of image optimization:
- Speed up page loading.
- Conversion increase.
- Results of Google Pagespeed Insights increase.
- Reducing failures, improving behavioral factors on the site.
- As a result of the first four points — improved site ranking.
- The file size is significantly reduced, which means saving space on the hosting.
How can you optimize images?
There are several methods for technical image optimization.
1. Reduce file size
Optimization is the complex of algorithms. Their essence is approximately the same — all service data is deleted from the file and similar colors are smoothed in a special way. After compression, in fact, we have the same image. It is not even visible to the naked eye that something has changed, but the size of such an optimized image will be several times smaller than the original.
For an online store, the optimal image size should not exceed 70 kb. This can be difficult to achieve, but this is the only way to ensure fast page loading.
Do not forget about product images thumbnails on the categories page, in the “Usually bought with this product” section, etc. Despite their small size, such images can weigh a lot and also require optimization.
You can compress images using special online services and programs: TinyPNG / TinyJPEG, Compressor.io, Kraken, JPEGmini, Optimizilla, Shortpixel, Resize Photo. Resize Photo is especially good, as it allows you to work with 5 formats: JPG, PNG, GIF, BMP and PSD. If you prefer Adobe Photoshop, you can optimize images batch with the Save For Web command.
If your online store works on CS-Cart, then the “Image Optimization” add-on will help save time. It adds the opportunity to reduce the size of images using external services: Resmush.it and Shortpixel.com. Moreover, you can configure CRON, and optimization will occur itself on a schedule.
2. Crop details
If you overdo with compression, the weight of the picture will decrease, but the product detailing, which may be important for the customer, will disappear. There is a great solution for an online store. Important items can be cropped from the main image and added as detailed product images.
3. Keep proportions
Speaking about cropping images in an online store, it is important to remember about the proportions. Not every aspect ratio is pleasing to the eye. There are proportions that best present the product and are suitable for an online store.
Here are these proportions:
The image proportions determine the appearance of the online storefront. To make it looks like neat and professional, it is important to choose a single style and observe it on all product cards.
We recommend using the Smart Image Cropper add-on for CS-Cart. Thanks to it, you can automatically or manually crop images for all CS-Cart objects and improves image thumbnail display. If you upload a big product photo, the add-on automatically finds main part of image and crops it, according to ratio settings. You will not only save time, but also give your storefront a finished look that will positively affect the conversion.
4. Choose the right format
Strong compression degrades image quality: noise appears, details are lost or the color transition becomes sharp. Choosing the right image format helps to avoid these problems. The picture is compressed by optimizing the color data.
GIF images are good because they weight a little, but the color rendering quality is worse than in other formats. GIF can store data in a format of no more than 256 colors without loss of quality. It is an ideal format for animations or icons that play the role of auxiliary elements and do not require being detailed.
PNG is an unlimited number of colors and compression without loss of quality. The
disadvantage of this format: the image weight is large enough, which adversely affects the page loading speed. But if the PNG file uses few colors (for example, with a transparent background), then its weight will be smaller. This format is also good for icons and logos.
The JPEG algorithm can compress a file both lossy and lossless. The advantage is that you can control the compression parameters and choose the optimal ratio of image quality and weight. JPEG is used in 90% of online stores.
Here is an example of how the file size changes when choosing different formats:
WebP is quite young format compared to formats above. It was developed by Google in 2010. Presenting this format Google noted that even lossy-compressed images in WebP format weigh 30% less than similar ones in JPEG format, and losslessly compressed images are 25% less than in PNG format.
Having the same image quality, WebP differs from its competitor formats in a much smaller file size. It combines all other formats advantages: compression with or without loss (as in JPEG), translucency (as in PNG) and animation (as in GIF). The widespread use of WebP is hampered by the fact that not all browsers support it yet. There are problems with Safari, Edge, Internet Explorer, and Firefox.
If you decide to use the WebP format for your online store, here are a few programs for manual conversion: online-convert.com, convertio.co, webp-converter.com. You can easily find more converters in Google. However, when you manually upload WebP images to the online store, there is a risk that not all users will see these images because of an inappropriate browser. It’s better to use custom modifications for your CMS that get around this problem.
For CS-Cart, we offer WebP Images add-on. The add-on automatically converts store graphics (product photos, banners, logos, etc.), and if the browser does not support WebP, the source images are shown. Thus, the problem with browser support, which was described above, is resolved. With WebP Images client won’t notice any difference in quality, but your site pages will load faster.
When choosing a file format, please remember:
- For product images JPEG or WEBP formats are best suited. They have optimal quality with a small size.
- For large product photos do not use GIF. This format optimization is inefficient. Use GIF only for icons and animated showcase elements.
- You can choose PNG for small images and images with a transparent background.
- Do not use the TIFF format in your online store. This format has good color depth and is indispensable for printing scanned images. However, the file sizes are large and not compressible.
- It is easy to find good image converter: most image editors can save the image in any of the formats above.
Manual or automatic optimization
There are three ways to optimize images.
The first way is to manually change the image (compress, crop, convert) using editors, for example, Adobe Photoshop or other online services. This method is not suitable for an online store, because the product range involves hundreds, or even thousands of images. Each image will have to be downloaded to the editor, converted manually, saved to a computer and re-imported into the online store. This is a waste of time, money and resources.
The second way is to process images in batches. Download the folder with images from your CMS, load it into a special desktop application (for example, ImageOptim, Riot-optimizer, Optimizilla), optimize it and upload it back to the CMS. Applications are both paid and free, and differ in the number of files that can be optimized at a time. This again requires a lot of time and process knowledge. It is much easier for online store administrators to use the third way.
The third way is automatic image optimization. Popular CMS have modifications that allow you to connect external services via API (for example, Resmush.it and Shortpixel.com) and optimize all the online store images in a couple of clicks: resize, crop and convert. For CS-Cart, the add-ons Image Optimization, Smart image cropper, and WebP Images will do these tasks perfectly.