---
title: Prevent image layout shift with width and height
description: >-
  Always include `width` and `height` attributes on `<img>` tags so the browser
  can reserve space before the image downloads and avoid layout shift. For
  Shopify themes, use the `image_tag` Liquid filter, which automatically adds
  these attributes.
source_url:
  html: >-
    https://shopify.dev/docs/storefronts/themes/best-practices/performance/prevent-image-layout-shift
  md: >-
    https://shopify.dev/docs/storefronts/themes/best-practices/performance/prevent-image-layout-shift.md
api_name: liquid
---

# Prevent image layout shift with width and height

Always include `width` and `height` attributes on `<img>` tags. For Shopify themes, use the [`image_tag`](https://shopify.dev/docs/api/liquid/filters/image_tag) Liquid filter, which automatically adds these attributes.

Missing `width` and `height` attributes on images is one of the most common causes of [Cumulative Layout Shift (CLS)](https://web.dev/cls/) on the web. When the browser doesn't know an image's dimensions, it reserves no space for it. When the image finally loads, the browser must shift surrounding content to make room, creating a poor user experience.

***

## Why

Without dimensions, the browser's loading process results in layout shift. The process proceeds as follows:

1. Parse the HTML and encounter an `<img>` tag.
2. Assume the image has a height of `0` because dimensions are unknown.
3. Render the page with no space reserved for the image.
4. Download the image file.
5. Discover the image's actual dimensions.
6. Force a layout shift by pushing content down to make room for the image.

This causes high [CLS](https://web.dev/cls/) scores and user frustration.

***

## How

Always include `width` and `height` attributes on `<img>` tags. Combined with CSS that sets `max-width: 100%` and `height: auto`, the browser can calculate the aspect ratio and reserve the correct amount of space before the image downloads.

For Shopify themes, use the [`image_tag`](https://shopify.dev/docs/api/liquid/filters/image_tag) Liquid filter, which automatically adds the correct `width` and `height` attributes based on the original image's aspect ratio.

***

## Examples

Basic HTML with dimensions and CSS:

```html
<img src="image.jpg" width="800" height="600" alt="Product" />
```

Combined with CSS:

```css
img {
  max-width: 100%;
  height: auto;
}
```

The browser can calculate the aspect ratio and reserve the correct amount of space before the image downloads.

Shopify Liquid approach:

```liquid
{{ product.featured_image
  | image_url: width: 800
  | image_tag: alt: product.title
}}
```

Generates:

```html
<img
  src="...image-800.jpg"
  width="800"
  height="600"
  srcset="..."
  sizes="..."
  alt="Product Title"
/>
```

CSS `aspect-ratio` approach (modern browsers):

```css
.image-container {
  aspect-ratio: 16 / 9;
}


.image-container img {
  width: 100%;
  height: auto;
}
```

For CSS background-style layouts:

```css
.image-container {
  width: 100%;
  height: 400px;
  overflow: hidden;
}


.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
```

This sets the container dimensions and crops the image to fit.

***

## Testing

* The [Chrome DevTools Performance panel](https://developer.chrome.com/docs/devtools/performance) shows all layout shifts with screenshots. Look for **Layout Shift** entries.
* Use [Live metrics](https://developer.chrome.com/docs/devtools/performance/reference#live-metrics) in the **Performance** panel to see the CLS breakdown.
* Visually observe with network throttling enabled.
* Use the **Rendering** tab and **Layout Shift Regions** to visually highlight shifting elements.

***

## References

* [`image_tag`](https://shopify.dev/docs/api/liquid/filters/image_tag) filter
* [`image_url`](https://shopify.dev/docs/api/liquid/filters/image_url) filter
* [`product.featured_image`](https://shopify.dev/docs/api/liquid/objects/product#product-featured_image)
* [How to optimize Cumulative Layout Shift (CLS) on Shopify sites](https://performance.shopify.com/blogs/blog/how-to-optimize-cumulative-layout-shift-cls-on-shopify-sites)
* [Optimizing images for performance on Shopify](https://performance.shopify.com/blogs/blog/optimizing-images-for-performance-on-shopify)
* [Use responsive images](https://shopify.dev/docs/storefronts/themes/best-practices/performance/use-responsive-images)
* [Never lazy-load the LCP image](https://shopify.dev/docs/storefronts/themes/best-practices/performance/never-lazy-load-lcp-image)

***