6 Google Image Optimization Tips

In a new video from Google, developer advocate Alan Kent shares six tips for optimizing images for e-commerce sites.

Although the video is specifically aimed at e-commerce sites, the tips are applicable to any website that serves a large number of images.

At over 14 minutes long, 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.

These are Google’s tips for making images load faster and more efficiently.

1. Eliminate Cumulative Image Layout Shift (CLS)

CLS refers to cases where the content of the page visually moves, or shifts, 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 not used correctly.

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 CLS, how to measure it, and how to fix 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.

Properly sizing images 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 being longer than necessary, which just drags things down.

An easy way to detect incorrectly sized images is to use the correctly sized images under the Opportunities section 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

Think about the file format of your images, for example if 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 could be substantial.

To detect if your site can benefit from using a different image format, look in the stream images in next-gen formats 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 from the PageSpeed ​​Insights 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 you’re happy with, use your image conversion tool of choice on multiple images using different quality values ​​and compare the before and after.

Google recommends the Squoosh.app site as an easy way to compare images with and without compression.

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 instructions, such as the recommended time for a browser to cache an image.

Again, you can use the PageSpeed ​​Insights report to detect if the HTTP response cache headers have been set correctly on your site.

the serve static resources with an efficient cache strategy identifies images that can 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. Properly sequence your image uploads

As a more advanced tip, Google recommends properly sequencing downloaded order webpage resources.

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 webpage can be loaded lazily.

To detect if your site loads images efficiently, you can refer to PageSpeed ​​Insights report. In L’ defer off-screen images 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, check out Google’s full video below:

Featured Image: Tada Images/Shutterstock

Leave a Comment