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.
The following examples contain code snippets that either fail or pass this check.
The following example contains the default configuration for this check:
| Parameter | Description |
|---|---|
enabled |
Whether the check is enabled. |
severity |
The severity of the check. |
Disabling this check
Anchor link to section titled "Disabling 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.