7+ years experience in the SEO industry. Love to keep on top of the latest in search engine optimization and digital marketing.
They say a picture is worth a thousand words. And there is no field where that is more true than e-commerce. Today, I will share 6 tips to optimize images on your e-commerce website.
It is not uncommon for an e-commerce website to reference hundreds of images. These images are everything from full-sized product images, smaller product thumbnails, category images, banners, and button icons. Given their abundance, how can you make sure that they are fast and efficient?
Tip #1 - Eliminate image Cumulative Layout Shift
Cumulative Layout Shift or CLS for short — is where the contents of a page visibly move around on the screen. You know those sites, where you start reading or you try and click on a link, and suddenly the page content moves. It’s really annoying. Images can contribute to this problem if used incorrectly.
CLS is so impactful to a user’s experience. Google has defined CLS as one of the three Core Web Vitals. These are factors Google considers important for user experience on all web pages. So why can images cause CLS?
To load a page, your web browser starts to download the HTML markup of the page. Most browsers will start displaying the top of the page before the whole page has been downloaded.
The problem is when the browser does not know the image dimensions before rendering the page content. Layout shift occurs if the browser discovers it did not leave the right amount of space for an image.
CLS is often easy to spot on a page manually watching it to load. But there are also automated tools that can measure it like Google Page Speed Insights and Google Lighthouse Audit etc.
Fixing image CLS issues can be as simple as including image dimensions in the HTML markup. That way the browser immediately knows exactly how much space to reserve for the image.
Tip #2 — Correctly size your images
Pick the right width and height for your images. Larger files take longer to download, particularly on mobile phones with slower network connections. Larger files also require more time to process, especially on mobile phones with less powerful CPUs.
Sizing images properly can be complicated by the range of device sizes and resolutions that access your site. If the browser shrinks or crops the image, the download file is larger than needed, which is wasteful.
One easy way to detect incorrectly sized images is using the properly sized images section under opportunities in the Page Speed Insights report. Page Speed Insights identifies images on a page that have larger dimensions than needed, listing the URLs.
To fix this problem you need to ensure your images are responsive. Responsive images refer to techniques to make images behave well on different-sized devices. For example, in HTML there is a “srcset” attribute that allows you to list URLs for different sizes and formats of images so that the browser can pick the best one to download.
This requires you to resize the images in advance or perform image resizing on demand. If resizing images is too much work for your own site, consider using a content delivery network or CDN. Many such services can resize images and convert them to more efficient formats on your behalf.
Tip #3 — Use the best image file format
Think about the file format of your images, whether to use PNG, JPEG, or WebP files. The file format affects the file size. Care should be taken, however, as file formats such as JPEG and WebP can reduce files using lossy compression algorithms.
Lossy means image quality may be reduced as a trade-off for reducing the file size. While lower-quality images may sound like a bad idea, remember that the degradation in quality may not be noticeable to shoppers. And the speed benefit can be substantial. Shoppers may abandon your page if it takes too long to load.
To detect if your site can benefit from using a different image format, look at the Serve Images in the Next Gen Format section of the Google Page Speed Insights report. This report lists images on a page that are candidates to be converted to a more efficient file format.
So is there a single best image format to use? One complication is that not all image formats will work on all browsers. The caniuse.com website can be used to check which browsers support what image file formats. For example, WebP is now supported by almost all browsers in use. So it offers a good combination of efficiency and adoption.
Alternatively, rather than picking a single format, you can have your website return the most efficient format that the browser says it supports. Again this is a service offered by CDNs.
Tip #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 in the Google Page Speed Insights report can be used to identify candidates for image compression optimization. The report also shows potential file size savings. Be aware, however, that the report does NOT perform a visual compression check on your compressed images.
To find a quality factor you are happy with, use your favorite image conversion tool on several images using different quality values. A common default value for WebP is 75. Remember, there are times that you want higher resolution images, such as when you want to allow shoppers to zoom in on a product image.
Tip #5 — Cache images in the browser
Tell the browser how long it can safely cache images. When you return an image from your site you can include an HTTP response header with caching guidance, such as how long it is recommended for a browser to cache an image.
One approach to detect if the HTTP response cache headers have been set up appropriately on your website is again to use the Google Page Speed Insights report. The Serve Static Assets with an Efficient Cache Policy report identifies images that may benefit from caching improvements.
Another approach is using the networking tab in developer tools inside chrome to examine the HTTP cache response headers.
To fix issues on your site, check to see if you have platform or web server settings you can change to adjust the cache lifetime for images on your site. If you do not change images frequently, or if you always give images a new URL then you can set a very long cache lifetime.
In addition to a cache duration, using a CDN frequently makes downloads faster by caching copies of your images in multiple locations around the world, closer to where users connect from.
Tip #6 — Correctly sequence your image downloads
This is an advanced tip. Correctly sequencing the order in which resources, including images, are downloaded can significantly improve page performance.
Because downloading the images one by one can be slow, browsers using HTTP1 typically download several images in parallel over independent network connections to the website.
If the website supports HTTP2, most browsers now multiplex downloads over a single network connection. This is generally faster and avoids problems such as large files blocking the downloads of smaller files.
Whichever approach is used there is still a network download bottleneck. In general, you want images to be downloaded in the following order:
- Download large hero images at the top of the page, as they can affect the largest contentful paint (LCP) score for the page. LCP is the time it takes to show the user the main content of the screen. LCP like CLS is a core web vital metric.
- Next images that are visible on a page without having to scroll a page should be downloaded. These are other above-the-fold images (if any).
- Finally, download images that need to be reached by scrolling a page. In other words, these are below-the-fold images. These images should be configured to load lazily. They should be loaded only if users scroll down a page else it would be a waste of resources.
To detect if your site is loading images efficiently, again the Page Speed Insights reports can help. For example, the Defer Offscreen Images section of the report identifies images that can be loaded after other images.
Care should be taken, as performance degradation can occur if lazy loading is used for images above the fold. Recent versions of Lighthouse will highlight if an image is lazily loaded that will impact LCP.
To wrap up, I have shown common problems that can occur on e-commerce websites with static images. Some have easy fixes such as ensuring that image tags in HTML always specify height and width attributes, or using loading equals lazy image attribute. There are more advanced techniques that you can implement directly on your website, but it may be easiest to use a third-party CDN with suitable support.
Such services can serve images in the best format supported by the browser. Convert images from a single source image to more efficient formats as needed. Pre-scale images to multiple sizes for efficient download and display across a range of devices and compress images to reduce download sizes.