ImgWidthAndHeight

Version 0.6.0+

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:

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

Examples

Below are examples of code that fails and passes this check.

✗ Fail

✓ Pass

Disabling this check

In the following cases, you can avoid content-layout shift without setting the width and height attributes:

  • When the aspect ratio of the displayed image should be independent of the uploaded image. In this case, you should use a CSS padding-top workaround with an overflow: hidden container.
  • When you prefer to use the padding-top workaround.

In these cases, you can disable the ImgWidthAndHeight check.

Otherwise, disabling this check isn't recommended.