ImgWidthAndHeight

Last edit: Apr 01, 2026

ImgWidthAndHeight

Severity: error | Type: LiquidHtml

This check aims to prevent cumulative layout shift (CLS) in your platformOS application by enforcing the use of width and height attributes on img tags.

When width and height attributes are missing on an img tag, the browser does not know the image's aspect ratio until it is fully loaded. Without this information, the browser treats the image as having a height of 0 until it loads.

This leads to two problems:

Layout shift — text and other content get pushed down the page as images load one after another.
Lazy loading fails — when all images appear to have a height of 0px, the browser assumes they are all in the viewport and loads them immediately, defeating the purpose of lazy loading.

Note: The width and height attributes should not include units (no px, %, etc.).

Examples

✗ Incorrect Code Example (Avoid using this):


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

✓ Correct Code Example (Use this instead):


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

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

Configuration

The default configuration for this check:

ImgWidthAndHeight:
  enabled: true
  severity: error

Disabling This Check

You can avoid content layout shift without width and height attributes by using the padding-top hack with an overflow: hidden container when the aspect ratio of the displayed image should be independent of the uploaded image. Otherwise, disabling this check is not recommended as it can negatively impact Core Web Vitals scores.

ImgWidthAndHeight