Developer Advocate Alan Kent shares six tips for optimizing images for eCommerce websites in a new video from Google.
While the video is geared toward eCommerce websites, the advice can be applied to any website that serves a large number of images.
If you’re working on a website, Google’s video is a lot to take in at over 14 minutes.
Here’s a more palatable recap that will take you less than five minutes to read.
These are Google’s recommendations for making images load more quickly and efficiently.
1. Remove the cumulative image layout shift (CLS)
CLS refers to situations where the page’s content visually shifts from one location to another as it loads.
While images do not cause the problem, they can contribute to it if they are used incorrectly.
CLS can usually be detected by looking for movement on a page while it is loading, but there are several tools available to measure it.
Read Google Isn’t Concerned With What’s In An Image.
2. Size Your Images Properly
Because larger files take longer to download, choose the right width and height for your images.
Because of the wide range of screen sizes and resolutions that visit your site, correctly sized images can be difficult.
If the browser crops the image on its own, the download size is larger than necessary, slowing things down even more.
The properly sized images section under Opportunities in the PageSpeed Insights report is a simple way to detect incorrectly sized images.
Once you’ve identified images that are larger than they need to be, you can use solutions like responsive images to solve the problem.
3. Select the most appropriate image file format
Consider your image files formats, such as whether to use PNG, JPEG, or web files.
The file format has an impact on the file size, so picking the right one requires thought.
Each format has advantages and disadvantages to consider. JPEG and webP, for example, have smaller file sizes, but the smaller size comes at the expense of image quality.
However, shoppers may not notice a decrease in image quality, and the speed advantage could be significant.
Look in the serve images in the next-gen formats section of the PageSpeed Insights report to see if your site could benefit from using a different image format. Images that can be converted to a more efficient file format are listed in this report.
4. Image Compression Appropriately
To efficiently encode your images while maintaining the desired image quality, use the appropriate quality factor.
The PageSpeed Insights report’s Encode Images Efficiently section can be used to find images that are good candidates for compression optimization. The report also illustrates possible file size reductions.
Use your preferred image conversion tool on several images with different quality values and compare the before and after results to find a quality factor you like.
Google suggests using the site Squoosh.app to compare images with and without compression.
5. Use The Browser To Save Images
Set how long the browser can safely cache images.
When you return an image, you can include caching guidance in the HTTP response header, such as how long a browser should cache an image.
You can use the PageSpeed Insights report to check if your site’s HTTP response cache headers are set correctly.
The section on serving static assets with an efficient cache policy identifies images that could benefit from caching enhancements.
Check your platform or web server settings to see if you can change the cache lifetime for images on your site to fix issues.
You can set a long cache lifetime if you don’t change images frequently.
6. Arrange Your Image Downloads Properly
Google recommends correctly sequencing the order in which webpage resources are downloaded as a more advanced tip.
The following download sequence is recommended:
- Top-of-the-page images of heroes
- Above the fold: more images
- Below the fold are some images.
The remaining images on a webpage can be loaded slowly.
The PageSpeed Insights report can help you figure out if your site is loading images quickly. A list of images that could be loaded after other images can be found in the report’s defer offscreen images section.
See the full Google video below for more information on any of the above tips:
Learn more from SEO and read 10 WordPress Image Optimization Plugins to Improve Page Speed.
