Google’s Image Optimization is mostly geared toward e-commerce websites, but the advice is relevant to any site that delivers a high number of photos.
Here is a digestible summary that can be read in less than five minutes.
These are Google’s recommendations for helping photos load more quickly and efficiently.
From easy to difficult, the first step is to resize your photos correctly:
1.Size Your Images Properly
Larger files take longer to download, so be sure your photographs are the proper width and height.
The huge range of screen sizes and resolutions used by visitors may make it challenging to ensure that your photos are sized appropriately.
If the browser automatically crops the image, the download will take longer than necessary, thus slowing down the process.
PageSpeed Insights’ properly sized photos area under Opportunities can be used to quickly identify images that aren’t the suitable size.
Using responsive pictures, you can reduce the size of photos that are too large for your site.
2.Use the Best Format for Your Image Files.
Consider the image file format, such as whether to utilize PNG, JPEG, or webP files, before creating your photos.
The file format has a direct impact on the file size, so choosing the proper one is essential.
Each format has advantages and disadvantages to consider. For example, JPEG and webP files are smaller, but the image quality suffers.
Even if the visual quality suffers, customers may not notice, and the time saved could be significant overall.
PageSpeed Insights’ providing photos in next-gen formats can help you decide. You can use this report to identify and convert photos. For sure, it will help you with Google’s Image Optimization.
3.Properly compressed images.
Choosing the right quality factor for your photos ensures fast encoding while maintaining image quality.
Images that can benefit from compression can be identified by using the Encode Images Efficiently portion of the PageSpeed Insights report. In addition, the report reveals how much space might be saved.
Experiment with multiple quality options in your picture converting program and compare the results. Squoosh.app is recommended by Google as the easiest way to work on that.
4.In the browser, save images for later use.
For how long may images be safely cached by the browser?
For example, it is possible to return an HTTP response header with caching information.
Using the PageSpeed Insights report, you can check to see if your site’s HTTP response cache headers are configured correctly.
These photos are highlighted in the provide static assets with an optimal cache policy section.
If your site is having issues, see if you can adjust the photo cache lifespan in your site or web server settings.
It is possible to set a large cache lifetime if you don’t alter your images frequently.
5.Your Image Downloads Need to Be Sequenced Correctly.
Google suggests downloading webpage resources in the correct order as a more complex suggestion.
It is recommended that you download the files in the following order:
-At the top of the page, there are hero photos.
-Below are a few more photos to peruse.
-Below the fold, you’ll find a few images.
-Lazy loading is an option for the remaining images on a page.
The PageSpeed Insights report can help you determine how quickly your site’s images are loading. The report’s delayed offscreen images part contains a list of photos that can be loaded after others.
6.Image Cumulative Layout Shift Elimination (CLS)
CLS describes cases where a page’s content appears to move or shift during loading. If you want to learn more about Cumulative Layout Shift, click here.
Despite the fact that images aren’t solely responsible for this issue, they can play a role if employed incorrectly.
Many applications exist to quantify CLS, but it is normally discovered by watching page movement while loading.
So if all the above is done, CLS must be all right.
