In a new video from Google, Developer Advocate Alan Kent shares six tips for optimizing images for ecommerce websites.
While the video is specifically aimed at ecommerce sites, the advice is applicable to any website that serves a large number of images.
Clocking in at over 14-minutes, Google’s video is a lot to digest if you’re busy working on websites.
Here’s a more palatable recap you can consume in under five minutes.
These are Google’s tips for making images load faster and more efficiently.
1. Eliminate Image Cumulative Layout Shift (CLS)
CLS refers to instances where content on the page visually moves, or shifts, from one place to another as it’s loading.
While this problem isn’t exclusively caused by images, they can contribute to the problem if used incorrectly.
In most cases, CLS is easy to spot by looking for movement on a page during loading, but there are several tools to measure it.
For more on CLS, how to measure it, and how to fix it, see our comprehensive guide:
2. Correctly Size Your Images
Pick the right width and height for your images, as larger files take longer to download.
Sizing images correctly can be complicated due to the ranges of screen sizes and resolutions that visit your site.
If the browser crops the image on its own, the download size ends up being longer than needed, which only drags things down.
One easy way to detect incorrectly sized images is 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 fix the problem with solutions such as responsive images.
3. Use The Best Image File Format
Think about the file format of your images, such as whether to use PNG, JPEG, or webP files.
The file format affects the file size, so choosing right one requires careful consideration.
There are pros and cons to weigh out for each format. For example, JPEG and webP tend to have lower file sizes, though the smaller size is achieved at the expense of image quality.
However, a degradation of image quality may not be noticeable by shoppers, and the speed benefit could be substantial.
To detect if your site can benefit from using a different image format, look in 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.
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.
To find a quality factor you’re satisfied with, use your choice of image conversion tool on several images using different quality values and compare the before and after.
Google recommends the site Squoosh.app as an easy way of comparing images with and without compression.
5. Cache Images In The Browser
Tell the browser how long it can safely cache images.
When you return an image you can return an HTTP response header with caching guidance, such as 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.
The serve static assets with an efficient cache policy section identifies images that may benefit from caching improvements.
To fix issues on your site, see if you have platform or web server settings you can change to adjust the cache lifetime for images on your site.
If you don’t change images frequently, then you can set a long cache lifetime.
6. Correctly Sequence Your Image Downloads
As a more advanced tip, Google recommends correctly sequencing the order webpage resources are downloaded.
The following download order is advised:
- Hero images at the top of the page
- Other images 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.
For more detail on any of the above tips, see the full video from Google below:
Featured Image: Tada Images/Shutterstock
