Skip to content
This repository has been archived by the owner on Jul 27, 2024. It is now read-only.

Latest commit

 

History

History
79 lines (53 loc) · 3.07 KB

img_width_and_height.md

File metadata and controls

79 lines (53 loc) · 3.07 KB
Raw

Width and height attributes on image tags (ImgWidthAndHeight)

This check exists to prevent cumulative layout shift (CLS) in themes.

The absence of width and height attributes on an img tag prevents the browser from knowing the aspect ratio of the image before it is downloaded. Unless another technique is used to allocate space, the browser will consider the image to be of height 0 until it is loaded.

This has numerous nefarious implications:

  1. This causes layout shift as images start appearing one after the other. Text starts flying down the page as the image pushes it down.
  2. This breaks lazy loading. When all images have a height of 0px, every image is inside the viewport. And when everything is in the viewport, everything gets loaded. There's nothing lazy about it!

The fix is easy. Make sure the width and height attribute are set on the img tag and that the CSS width of the image is set.

Note: The width and height attributes of an image do not have units.

Check Details

This check is aimed at eliminating content layout shift in themes by enforcing the use of the width and height attributes on img tags.

👎 Examples of incorrect code for this check:

<img alt="cat" src="cat.jpg">
<img alt="cat" src="cat.jpg" width="100px" height="100px">
<img alt="{{ image.alt }}" src="{{ image.src }}">

👍 Examples of correct code for this check:

<img alt="cat" src="cat.jpg" width="100" height="200">
<img
  alt="{{ image.alt }}"
  src="{{ image.src }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
>

NOTE: The CSS width of the img should also be set for the image to be responsive.

Check Options

The default configuration for this check is the following:

ImgWidthAndHeight:
  enabled: true

When Not To Use It

There are some cases where you can avoid content-layout shift without needing the width and height attributes:

  • When the aspect-ratio of the displayed image should be independent of the uploaded image. In those cases, the solution is still the padding-top hack with an overflow: hidden container.
  • When you are happy with the padding-top hack.

In those cases, it is fine to disable this check with the comment.

It is otherwise unwise to disable this check, since it would negatively impact the mobile search ranking of the merchants using your theme.

Version

This check has been introduced in Theme Check 0.6.0.

Resources