In a new video from Google, developer advocate Alan Kent shares six tips for optimizing images for ecommerce sites.
While this video is specific to e-commerce sites, the advice applies to any site that offers a lot of images.
If you’re busy working on a website, Google’s videos are over 14 minutes long and easy to digest.
Here’s a tastier review that you can do in five minutes.
These are Google’s tricks to make images load faster and more efficiently.
1. Eliminate Image Cumulative Layout Shift (CLS)
CLS refers to instances where content on a page visually moves or shifts from one place to another as it loads.
While the problem isn’t entirely caused by images, they can cause problems if used incorrectly.
In most cases, CLS is easy to spot by looking for movement on the page during loading, but there are several tools to measure it.
For more information on CLS, how to measure it, and how to fix it, see our comprehensive guide:
2. Correctly resize the image
Choose the correct width and height for your images, as larger files will take longer to download.
Due to the range of screen sizes and resolutions on which your website is accessed, sizing images correctly can be complicated.
If the browser crops the image itself, the download size will end up being longer than it needs to be, which will only slow things down.
An easy way to detect images with incorrect dimensions is to use appropriately sized images part under opportunity PageSpeed Insights report.
Once you’ve identified images that are larger than necessary, you can use solutions like responsive images to fix the problem.
3. Use the best image file format
Consider the file format of the image, such as whether to use PNG, JPEG, or webP files.
File format affects file size, so choosing the right format requires careful consideration.
Each format has advantages and disadvantages. For example, JPEG and webP tend to have smaller file sizes, although the smaller size comes at the expense of image quality.
However, shoppers may not notice a drop in image quality, and the speed advantage could be substantial.
To detect if your website could benefit from using a different image format, check out Provide images in next-generation formats Section of the PageSpeed Insights report. This report lists images that can be converted to more efficient file formats.
4. Compress images appropriately
Use the correct quality factor for your images to encode them efficiently while maintaining the desired image quality.
this Efficiently encode images Sections of the PageSpeed Insights report can be used to identify images suitable for compression optimization. The report also shows potential file size savings.
To find the quality factor you are happy with, use the image conversion tool of your choice on multiple images using different quality values and compare the before and after.
Google recommends the website Squoosh.app as an easy way to compare compressed and uncompressed images.
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 a suggestion for how long the browser should cache the image.
Likewise, you can use the PageSpeed Insights report to detect whether HTTP response caching headers are properly set on your site.
this Serving static assets with an effective caching strategy Some logos may benefit from caching improved images.
To troubleshoot issues on your site, see if you have platform or web server settings that you can change to adjust the cache life of images on your site.
If you don’t change the image very often, you can set a longer cache life.
6. Properly sequence your image downloads
As a more advanced tip, Google recommends correctly ordering the download order of web resources.
The recommended download order is as follows:
- Hero image at the top of the page
- Other pictures above the fold
- image below the fold
The rest of the images on the webpage can be lazy loaded.
To detect if your site is loading images efficiently, you can refer to the PageSpeed Insights report.inside Delay off-screen images In the section of the report, you will see a list of images that can be loaded after other images.
For more details on any of the tips above, see Google’s full video below:
Featured Image: Tada Images/Shutterstock
