Enforces setting the
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.
Disabling this check
In the following cases, you can avoid content-layout shift without setting the
- When the aspect ratio of the displayed image should be independent of the uploaded image. In this case, you should use a CSS
padding-topworkaround with an
- When you prefer to use the
In these cases, you can disable the
Otherwise, disabling this check isn't recommended.