6 Image Optimization Tips From Google

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

While video is specifically targeted at e-commerce sites, the advice applies to any website that features a large number of images.

At more than 14 minutes, Google’s video is a lot to digest if you’re busy working on websites.

Here’s a more delicious recap that you can eat in less than five minutes.

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

1. Remove Image Cumulative Layout Shift (CLS)

CLS refers to instances where content on the page is visually moving or moved from one location to another when it is loaded.

While this problem is not exclusively caused by images, they can contribute to the problem if used incorrectly.

In most cases, it is easy to detect CLS by looking for speed on a page during loading, but there are many tools to measure it.

To learn more about CLS, how to measure it, and how to fix it, check out our comprehensive guide:

2. Resize your images correctly

Choose the right width and height for your images, as larger files take longer to download.

Correctly sizing images can be complicated because of the ranges of screen sizes and resolutions your site occupies.

If the browser automatically crops the image, the download size becomes longer than necessary, which only drags things down.

An easy way to detect wrong sized images is to use properly sized images In the section under Opportunities PageSpeed ​​Insights Report,

Once you’ve identified images that are larger than necessary, you can fix the problem with solutions like reactive images.

3. Use the Best Image File Format

Think about the file format of your images, such as whether to use PNG, JPEG, or webP files.

The file format affects the file size, so selecting the right one requires careful consideration.

There are pros and cons to weighing in for each format. For example, JPEG and webP have smaller file sizes, although smaller sizes are achieved at the expense of image quality.

However, the drop in image quality may not be noticeable by buyers, and the speed gain may be substantial.

To find out if your site could benefit from using a different image format, look into Serve images in next generation formats section of the PageSpeed ​​Insights report. This report lists images that can be converted to a more efficient file format.

4. Compress Images Properly

Use the right quality factor to efficiently encode your images while maintaining the desired image quality.

Encode images efficiently The PageSpeed ​​Insights section of the 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 satisfied with, use your choice of image conversion tool and compare before and after on multiple images using different quality values.

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

5. Cache Images in Browser

Tell the browser how long it can safely cache the images.

When you return an image you can return an HTTP response header with caching guidance, such as how long it is recommended for the browser to cache an image.

Again, you can use the PageSpeed ​​Insights report to find out whether the HTTP response cache headers are set up properly on your site.

Serve fixed assets with an efficient cache policy The section identifies images that could benefit from caching improvements.

To fix problems on your site, see if you have platform or web server settings that you can change to adjust the cache lifetime for images on your site.

If you don’t change the images frequently, you can set a longer cache lifetime.

6. Index Your Image Downloads Correctly

As a more advanced tip, Google recommends that webpage resources be correctly indexed in the order in which they are downloaded.

The following download command is advised:

  • Hero images at top of page
  • Other images above the fold
  • images just below the fold

The rest of the images on the webpage can be lazy loaded.

You can check out the PageSpeed ​​Insights report to find out if your site is loading images efficiently. in suspend offscreen images In the section of the report you will see a list of images that can be loaded after other images.

For more information on any of the suggestions above, watch Google’s full video below:

Featured image: Tada Images/Shutterstock

Source link

Leave a Comment