In a new video from Google, Developer Advocate Alan Kent shares six tips for optimizing images for e-commerce websites.
Although the video is specifically for e-commerce sites, the advice applies to any website that serves up a large number of images.
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 that you can consume in less than five minutes.
Here are Google’s tips for making images load faster and more efficiently.
1. Eliminate Cumulative Image Layout Shift (CLS)
CLS refers to instances where page content visually moves, or moves, from one place to another while it is loading.
Although this problem is not 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 as it loads, but there are several tools to measure it.
To learn more about the CLS, how to measure it and how to repair it, check out our comprehensive guide:
2. Size your images correctly
Choose the right width and height for your images, as larger files take longer to upload.
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 taking longer than it needs to, which just slows things down.
A simple way to detect incorrectly sized images is to use the correctly sized images under Opportunities in the PageSpeed Insights Report.
Once you identify which images are larger than necessary, you can fix the problem with solutions like responsive images.
3. Use the best image file format
Consider the file format of your images, such as whether you want to use PNG, JPEG, or WebP files.
File format affects file size, so choosing the right one requires careful consideration.
There are pros and cons to weigh for each format. For example, JPEG and WebP tend to have lower file sizes, although the smaller size comes at the expense of image quality.
However, a degradation in image quality may not be noticeable to buyers, and the speed advantage may be substantial.
To detect if your site can benefit from using a different image format, look in the stream 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 correct quality factor for your images to encode them efficiently while maintaining the desired image quality.
the Efficiently encode images The PageSpeed Insights section of the 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 that works for you, use your image conversion tool of choice on several images using different quality values and compare the before and after.
Google recommends Squoosh.app as an easy way to compare images with and without compression.
5. Cached 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 hints, such as how long it’s recommended for a browser to cache an image.
Again, you can use the PageSpeed Insights report to detect if HTTP response cache headers have been set correctly on your site.
the serve static assets with an efficient cache policy identifies images that may benefit from caching improvements.
To troubleshoot issues on your site, check to see if you have any platform or web server settings that you can change to adjust the image cache lifetime on your site.
If you don’t change images frequently, you can set a long cache lifetime.
6. Sequence Your Image Uploads Properly
As a more advanced tip, Google recommends correctly sequencing the command web page resources are downloaded.
The following download order is recommended:
- Top Hero Images
- Other images above the fold
- Images just below the fold
The rest of the images on a web page can be lazy loaded.
To detect if your site loads images efficiently, you can refer to the PageSpeed Insights report. In the defer out-of-frame images section of the report, you will see a list of images that might be loaded after other images.
For more details on any of the tips above, watch the full Google video below:
Featured Image: Tada Images/Shutterstock