By 
Image optimization is an integral part of your natural referencing. Beautiful images strengthen your page and therefore the engagement of visitors on this page. By completing the best practices: format, title, alternative title… you will be able to see your images appear naturally in Google images and you will increase your site SEO. In this article, I will show you 6 tips to to speed up the loading of images on a site.
1- Monitor your website’s Cumulative Layout Shift (CLS)
The Cumulative Layout Shift (CLS) is the metric that measures the instability of content within a website. That is to say the elements that can move in a web page, affecting the reading of an article for example. This indicator is one of the Core Web Vitals determined by Google, having a real impact on the user experience. While images aren’t the primary factor affecting this metric, they may be contributing. This is particularly the case when a web browser does not know the dimensions of the image before loading the content of a web page and does not leave enough space for this image, as explained by Alan Kent, Developer Advocate at Google.
Advice: it is essential to evaluate the loading of a website and to make changes to improve it. Note that there are also many tools that can measure the performance of your website.
2- Properly size your images
For faster and more efficient loading of images, it is essential to choose the right width and height of these. “Larger files take longer to download, especially on smartphones where the network connection can be slower, but also due to their less powerful processors,” says Alan Kent. If the web browser itself crops the image, the download time ends up being longer than necessary. This makes it possible to detect incorrectly sized images in the Opportunities section, within the report provided by PageSpeed Insights.
The advice: bet on reactive images that will adapt to the medium used to access the website. There is thus an HTML attribute allowing to list different formats and dimensions of images so that the web browser can choose what is the most suitable.
3- Use the best image format
It is worth thinking about the best format to use for your images, especially between PNG, JPEG or WebP formats. “File format affects file size. Care should be taken however as formats such as JPEG and WebP can shrink files using lossy compression algorithms, i.e. a reduction in image quality in exchange for the reduction in file size “, explains Alan Kent. The Google expert points out, however, that the degradation in image quality is not necessarily perceptible to visitors to a site, and that the gain in loading speed can be substantial.
Tip: Check if your website can benefit from using a different image format in the Opportunities > Serving Images in Next-Gen Formats section of a report rendered on PageSpeed Insights.
4- Compress images
Another trick is to use the right quality factor for the images to encode them efficiently, while maintaining the desired image quality. It is possible to identify if optimizations are feasible in the Opportunities > Efficiently encode images section of a PageSpeed Insights report.
Tip: In order to find the quality factor that’s right for you, it’s recommended that you use your image conversion tool of choice and use different quality values on multiple images, then compare the before and the after. Google also recommends the Squoosh.app site as an easy way to compare images with and without compression.
5- Tell the Browser Caching Hints
To ensure images load faster on a website, a web browser can be told how long it can safely cache images. When an image is sent from a website, it is possible to include an HTTP header with caching hints such as the recommended amount of time for a web browser to cache an image. To find out if response headers have been set correctly on a website, Google recommends looking at the Opportunities > Use effective cache rules on static items section in a PageSpeed Insights report. This indicates whether any images are eligible for caching improvements.
Tip: Make sure you have platform or web server settings that you can change to adjust the cache lifetime. If you don’t change images frequently, you can set a long cache lifetime.
6- Be sure to create sequences of image downloads
Google also recommends properly sequencing the order in which assets, including images, are downloaded. This can improve the performance of a web page. It is therefore advisable to opt for the following download order:
- Hero Header, the main banner of your website,
- Images located before the waterline,
- Images located just below the fold line.
In the Opportunities > Defer Offscreen Image Loading section of a PageSpeed Insights report, you have the option to identify images that might load after other images.
Conclusion
Optimizing its site images is just one process of speeding up your site, in case you are on Shopify and are interested in optimizing your store speed, I invite you to hire one of our speed experts.
