Watch Webinar: Figma - Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

Web development

How To Improve Lighthouse Scores by Avoiding <img> Layout Shifts

February 16, 2023

Written By Adam Bradley

One of the most common killers of Lighthouse scores, and also one of the easiest to solve, would have to be setting the correct aspect ratio on your images. Layout shifts can happen for many reasons, but here we’ll focus on how images can have a negative effect.

Basically, it’s annoying to be reading content only to see the layout adjust and that same content moved to another location. This is why Lighthouse and other performance measuring tools have a metric called Cumulative Layout Shift, or CLS.

It’s pretty straightforward: if your page has CLS issues, your Lighthouse scores go down.

screenshot of Lighthouse CLS showing the main image of the document.
screenshot of Lighthouse CLS timeline.

Another challenge is that we’re also designing pages that are responsive. Meaning that the same content should look good on both desktop and mobile, so setting exact dimensions for images is usually not an option.

Luckily, there are two recommended cross-browser approaches to solving image CLS issues:

  • aspect-ratio CSS property on img selector
  • width and height attributes in the img tag, with height: auto CSS

Aspect Ratio CSS

The aspect-ratio CSS property, as you guessed it, sets the aspect ratio of an element. This means it determines the ratio between the width and height, rather than specifying an image’s exact dimensions.

img {
  aspect-ratio: 16/9;
  width: 100%;
}

Here we’re assigning CSS to the img element and using an aspect ratio of 16 units by 9 units.

What’s cool is that even before loading the image, the browser can now reserve space for it. This means that the layout and content of the page will not shift after the image loads.

Depending on your design, it also might be worthwhile to set a background color to the img element so users are given a hint that the image hasn’t loaded yet.

img {
  aspect-ratio: 16/9;
  width: 100%;
  background-color: gray;
}

In the screen recording above, you’ll notice that there’s initially a gray square in place of the image, which acts as an image placeholder so the content stays in the same place even after the image loads.

Another recommendation is to also add the object-fit: cover CSS:

img {
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
  background-color: gray;
}

The object-fit property tells the browser what to do if the aspect ratio is off. So instead of forcing a poorly stretched image because the ratio is wrong, the image can instead keep its own aspect ratio, and still fit nicely within the given area.

Another approach that’s worth trying for your use case is to set the width and height attribute of the img element, and also the height CSS property to auto.

<img width="1200" height="675" src="…" alt="…" />
img {
  height: auto;
}

Similar to the aspect ratio CSS approach, the browser now knows how to calculate how much space the image will take up before it loads.

Which approach you use is up to you, but regardless, if you want an easy way to improve your Lighthouse scores, then ensuring the aspect ratio of your images is a quick win.

Introducing Visual Copilot: convert Figma designs to code using your existing components in a single click.

Try Visual Copilot

Share

Twitter
LinkedIn
Facebook
Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot
Newsletter

Like our content?

Join Our Newsletter

Continue Reading
Web Development12 MIN
Figma to Angular: Convert Designs to Clean Angular Code in a Click
WRITTEN BYVishwas Gopinath
May 16, 2024
Web Development18 MIN
Getting Started with Mitosis: Creating a Cross-Framework Design System
WRITTEN BYVishwas Gopinath
May 7, 2024
Company News3 MIN
Builder.io closes $20 million in funding led by M12, Microsoft’s Venture Fund
WRITTEN BYSteve Sewell
April 24, 2024