During a Google video session, Googler Alan Kent talked about optimizing images for your e-commerce website.
He offers several tips for SEO professionals to help optimize images for their e-commerce website:
- Eliminating cumulative layout shift,
- Correctly sizing your images,
- Utilizing the best image file format,
- Compressing images appropriately,
- Caching images in the browser,
- Correctly sequencing your image downloads
Eliminate Cumulative Layout Shift
Alan explained cumulative layout shift, or CLS, in detail. In short, CLS is where the contents of your page visibly move around on the screen.
You know those sites: you start reading or you’re trying to click on a link, and suddenly the page content moves.
Images can contribute to this problem if used incorrectly, he says. CLS is so impactful to a user’s experience, that Google defined it as one of three Core Web Vitals metrics.
Why can images cause CLS? To load a page, Alan explains, 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.
These files are then downloaded in parallel to the main page, a few at a time.
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 by manually watching it to load. But there are also automated tools that can measure it.
But let’s first take a slight detour and talk about lab versus field data. Lab data is collected by testing tools that you point at your webpage, such as Google’s Lighthouse. You can perform a lab test at any time and have complete control over the process.
Chrome makes data for popular sites available in the Chrome user experience report, or CrUX for short. Lab data can be easier for developers to collect and analyze, but it has some limitations.
For example, CLS lab data can miss shifts that occur after a page finishes loading. Ultimately, it is field data that demonstrates whether you’ve really solved a problem for your users.
PageSpeed Insights is a useful tool as it presents both lab and field data in the one report. For CLS, look for warnings such as: avoid large layout shifts and images that do not have explicit width and height.
That way, the browser immediately knows exactly how much space to reserve for the image. There are other CSS tricks that can be used as well if the CSS is loaded properly.
Choose the Right Width and Height for Your Images
The second tip is to 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 mobile phones with less powerful CPUs.
Sizing images correctly 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 PageSpeed Insights report.
PageSpeed insight identifies images on a page that have larger dimensions than needed, listing their URLs. Once you have detected there is a problem, how to fix it? Responsive images refers to techniques to make images behave well on different sized devices.
For example, in HTML, there is a source set attribute. It allows you to list URLs for different sizes and formats of images, so the browser can pick the best one to download. This requires you 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.
Utilize Next-Generation Image Formats
The next tip is to think about the file format of your images, such as whether to use PNG, JPG, or webP files. The file format affects the file size. Care should be taken, however, 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.
If pixel perfect images are required, such as for button icons, less efficient, but pixel perfect formats should be used. While lower quality images may sound like a bad idea, remember that the degradation in quality may not be noticeable by 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 in the Serve Images in Next Gen Format section of the PageSpeed 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 not all image formats will work on all browsers. The caniuse.com site can be used to check which browsers support which image file formats. For example, webP is now supported by almost all browsers in use.
This 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.
Encode Your Images Efficiently
Tip number four is to 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 candidate images for compression optimization.
The report also shows potential file size savings. Be aware however that the report does not perform a visual check on your compressed images. The report is based on commonly used compression factors.
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.
The squished up app site can be useful for this purpose, as it makes it easy to compare the before and after version of images.
Remember also, there are times when you want higher resolution images, such as when you want to allow the shopper to zoom in on a product image. Want to go deeper?
Jake and Surma have a great session on image compression they gave on Web.dev Live.
Cache Images Using the Browser
Tip number five is to 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 for.
One approach to detect if the HTTP response cache headers have been set appropriately on your site is, again, to use the PageSpeed Insights report. The Serve Static Assets with an Efficient Cache Policy section of the PageSpeed Insights report identifies images that may benefit from caching improvements.
Another approach is using the Networking tab in developer tools inside Chrome to examine the HTP 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 to 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 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.
Correctly Sequence the Order in Which Resources Are Downloaded
The final tip is a more 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 HTTP/1 typically download several images in parallel over independent network connections to the website.
If the website supports HTTP/2, most browsers now multiplex downloads over a single network connection. This is generally faster, and avoids problems such as large files blocking the downloads or smaller files. Whichever approach is used, there is still a network bandwidth bottleneck. In general, you want images to be downloaded in the following order.
First, you want to download large hero images at the top of the page, as they can affect the Largest Contentful Paint score for the page. Largest Contentful Paint or LCP for short, is the time it takes to show the user the main content of the screen. Largest Contentful Paint, like Cumulative Layout Shift, is a core web vitals metric.
Next, you want other images that will be visible without scrolling to be downloaded. Images that are visible without the use of scrolling are referred to as above the fold. The rest are referred to as below the fold.
As a web page may be viewed on devices with different screen sizes, it is common to estimate which images are above and below the fold by checking your site on multiple devices. Finally, you want images to be downloaded that are just off the screen so that they can be ready for display when a user starts scrolling.
Other images that are not likely to be displayed soon are often best to load lazily. If the user does not scroll the page, fetching them would be a waste of resources. To detect if your site is loading images efficiently, again the PageSpeed Insights report can help.
For example, the Differ Offscreen Images section of the report identifies images that can be loaded after other images. There are other sections that can be useful, such as Avoid Chaining Critical Resources.