How to optimize the images on your website – 6 tips

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.

Page Metrics Example
the page experience metrics of one of our clients

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.

Web Caching Diagram
Caching Diagram

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



Free SEO Audit!

Want to understand how your website is performing, and if your images are properly optimized? Do you feel your website loads slow? We can help! Contact us for a free first consult. Or request your FREE SEO Audit today.

———————-
Image credits:
https://kinsta.com/../How-Web-Cache-Works.png

    SEO and Digital Marketing Blog

    Digital Marketing and SEO Tips, Tricks, How-To Guides, industry news and rants. Written by professionals, curated by industry finest. 

    Get Your FREE Audit

    Let us review your website’s SEO performance. We will provide you our valuable insights to help you increase traffic, leads and revenue.

    MORE FROM OUR BLOG

    VIEW FULL BLOG

    3 Free tools to find keyword and topic ideas for your content plan

    Suffering from a writer's block? We reviewed 3 free keyword research tools to help you find new content ideas. 5min read, hours…

    Google 2021 November Core Update – Main Take-Aways

    November 2021 Core Update - Main take-aways. Read how this update impacted rankings, and how it is different from the July 2021…

    BrightEdge Research Results: Understanding the State of SEO

    BrightEdge asked more than 750 attendees for their perspective on SEO in 2022, and how they experienced 2021. Read what they said.

    Google Maps Announcement: 4 New Local Shopping Features

    The Google Maps team introduced four new features to aid users with their Local Shopping experience. Learn more.