They say a picture is worth a thousand words. Especially for ecommerce website images, it’s important to optimize these images for them to be successful. It’s not uncommon for ecommerce website pages to have a variety of images, for this reason it’s important for each and every one of them to be optimized on your website.
The types of images you’ll see on an ecommerce site can be full-size product images, thumbnails, category images, banners, icons, etc. With the large amount of images on an ecommerce website, how can you keep them from loading quickly and have the best quality? Developer Advocate Alan Kent from Google goes over 6 ways on how to optimize images for your ecommerce website. Let’s get started!
6 Ways to Optimize Ecommerce Website Images
1) Eliminate Image Cumulative Layout Shift (CLS)
CLS stands for Cumulative Layout Shift which refers to instances where content on the page visually moves, or shifts, from one place to another as it’s loading. CLS is so important to user experience that it’s considered one of Google’s Core Web Vitals.
Why can images cause CLS? When you click on a page, it starts to download and process the HTML of a page. There are multiple elements when downloading a page such as the content, images, links, ads, etc. When an image’s size dimensions are not specified, it can contribute to this problem (when they are not used correctly) and take the page longer than it should to download properly.
In most cases, CLS is easy to spot by looking for movement on a page during loading, but there are several tools to help measure it. While these tools can be effective and beneficial, they can also come with limitations such as missing some shifts after a page finishes loading. It’s also important to note to look out for large warnings such as avoiding large layout shifts and images not being sized appropriately. Utilizing PageSpeed Insights tool can help present both lab and field data in one report to help solve this issue. Another way to help solve this issue is by providing the right dimensions of images in the HTML coding.
2) Correctly Size Your Images
Larger images tend to take longer to download and process on websites. With this in mind, it’s important to have the most effective image size to better optimize your website and user experience over time.
Sometimes it can be difficult to choose what image size is the best based on mobile and desktop screen sizes and resolution. Having awkward image dimensions can do things such as cut off the image from a certain view and have less of a purpose on the website. When you’re not able to see images with this problem, you can detect them by using the properly sized images section under “Opportunities” in the PageSpeed Insights report. Once you’ve identified images that are larger than necessary, you can then fix the problem with solutions such as responsive images. Responsive images work to make images behave well on different sized devices. If you’re not able to figure out yourself, you might need additional help in formatting the images to the right sizing.
3) Use the Best Image File Format
Some areas of your website need a specific type of image file format to succeed. These image formats are known as .jpgs, .pngs, or even webP files. The image’s size and type of format have to work together to create the clearest and most effective image for where it’s needed on your website. There are pros and cons to weigh out for each format. For example, JPEG and webP tend to have lower file sizes. However, the smaller size is achieved at the expense of image quality.
Sometimes hearing that your website has smaller and less quality images isn’t the best thing you typically want to hear. However, there are areas of your ecommerce website where having smaller, less-quality images is beneficial to your image optimization strategy. Smaller images means less time loading the image which means better user experience over time. Sometimes, your customers might not even notice the quality of your smaller images as well. If they notice it takes too long to load, they will typically find another place to shop.
To detect if your site can benefit from using a different image format, look into the serve images in next-gen formats section of the PageSpeed Insights report. This report lists images that can be converted to a more efficient file format. There’s never one image file that’s best to use over the others, due to some image formats not being able to load on certain browsers. It’s important to know which image files are best supported on your most typical browsers.
4) Compress Images Appropriately
Use the right quality factor for your images to encode them efficiently while retaining the desired image quality. The Encode Images Efficiently section of the PageSpeed Insights report can be used to identify images that are good candidates for compression optimization. The report also shows potential file size savings, but does not perform a visual check on your compressed images.
To find a quality factor that you’re pleased with, use your choice of an image conversion tool on several images using different quality values. From there, compare the before and after. Google recommends the site Squoosh.app as an easy way of comparing images with and without compression. Sometimes for ecommerce websites, having higher quality images is better for products when they want to zoom in on the details. Be mindful of the image sizes based on the user experience and customer needs.
5) Cache Images in the Browser
This is where you are telling the browser how long it can take to cache images. When you return an image, you can return an HTTP response header with caching guidance. Such as letting them know how long it is recommended for a browser to cache an image for. Again, you can use the PageSpeed Insights report to detect if the HTTP response cache headers have been set properly on your site as a double check. The serve static assets with an efficient cache policy section identifies images that may benefit from caching improvements. To fix issues on your website, see if you have platform or web server settings you can change to adjust the cache lifetime for images on your site. For times where you don’t change images frequently, you can set a long cache lifetime.
6) Correctly Sequence Your Image Downloads
As a more advanced tip, Google recommends correctly sequencing the order that webpage resources are downloaded. Here you can see the following download order as advised by Google:
- Hero images at the top of the page
- Other images just above the fold
- Images just below the fold
- The rest of the images on a webpage can be lazy loaded
To detect if your site is loading images efficiently, you can refer to the PageSpeed Insights report. In the defer offscreen images section of the report you’ll see a list of images that could be loaded after other images.
Not sure where to get started on optimizing your images for ecommerce websites? Try your Google Search Console for recommendations on pages and where you can make optimizations. Or if you want to watch the video for more details, check it out here:
