In May 2021 Google announced that the page experience signals will be included in the Google Search Rankings. This means that the page experience metrics can impact how a page is ranking in the search results.

The page experience signals measure how users perceive the experience of interacting with a web page. And a big part of this experience is determined by how fast the page loads.

During our SEO Audit intake conversations with clients, we often get asked specifically about images, and how images can be optimized. In this article, we outline the best practices we follow. 

How to optimize the images on your website

For many web pages, the images on the page, and how they are loaded, play a big part in how fast the page loads, and what the perceived page experience is for that page. In this new video Google Developer Advocate Alan Kent shares 6 tips on how to optimize images for your pages.

Tip #1: Eliminate image Cumulative Layout Shift

Video chapter here: 0:46, Google web.dev documentation here.

Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.

Tip #2: Correctly size your images

Video chapter here: 3:56, Google web.dev documentation here.

Ideally, your page should never serve images that are larger than the version that’s rendered on the user’s screen. Anything larger than that just results in wasted bytes and slows down page load time.

Tip #3: Use the best image file format 

Video chapter here: 5:28, Mozilla Image file type and format guide here.

When you ask a photographer to provide images for your website, s/he will often ask you in what format you would like to receive the images. So how do you choose the right image file format?

Well.. that depends Each format has its pros & cons. The Mozilla image file type and format guide will tell you the specific use for each format, and what format is recommended for each.

Tip #4: Compress images appropriately 

Video chapter here: 7:17, Google web.dev video about image compression here.

Compressing images can improve the page load time faster by reducing transmission time and bandwidth requirements. 

Tip #5: Cache images in the browser 

Video chapter here: 8:22 Google web.dev about enabling caching here.

Caching works by categorizing certain page resources in terms of how frequently or infrequently they change. Your site’s logo image, for example, might almost never change, but your site’s scripts might change every few days. Maximizing cache usage is critical to speeding up return visits. 

Tip #6: Correctly sequence your image downloads

Video chapter here: 9:37.
The order in which images are loaded can have a big impact on the user experience. Google’s Developer Advocate Alan Kent recommends the following order;

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