ImgWidthAndHeight

Enforces setting the width and height attributes on img tags, avoiding cumulative layout shift (CLS).

When width and height attributes aren't set, then the browser doesn't know aspect ratio of the image before it is downloaded. Unless another technique is used to allocate space, the browser considers the image's height to be 0px until the image is loaded.

This causes the following issues:

Layout shift as images start appearing one after the other. Images push text down the page.
Lazy loading breaks. If all images have a height of 0, then every image is inside the viewport and is loaded.

Both of these issues negatively affect the mobile search ranking of stores that are using your theme.

Anchor to ExamplesExamples

The following examples contain code snippets that either fail or pass this check.

Anchor to ✗ Fail✗ Fail

Anchor to ✓ Pass✓ Pass

Note

You also need to set the CSS width of the img for the image to be responsive.

<img

alt="{{ image.alt }}"

src="{{ image.src }}"

width="{{ image.width }}"

height="{{ image.height }}"

Anchor to OptionsOptions

The following example contains the default configuration for this check:

ImgWidthAndHeight:

enabled: true

severity: error

Parameter	Description
`enabled`	Whether the check is enabled.
`severity`	The severity of the check.

Anchor to Disabling this checkDisabling this check

It's not recommended to disable this check. However, you can disable the check if you use alternative methods, such as aspect ratio boxes, to avoid content-layout shift without setting the width and height attributes.

Was this page helpful?