missing-img-dimensions¶

Added in 0.2.10 · Related issues · View source

What it does¶

Checks for <img> tags that omit the height or width attribute.

Why is this bad?¶

Explicit height and width on <img> let the browser reserve space for the image before it loads, preventing cumulative layout shift (CLS) as surrounding content jumps when the image arrives. Both attributes are required, since the browser uses them together to derive the intrinsic aspect ratio.

Example¶

<img src="photo.jpg" alt="photo">

Use instead:

<img src="photo.jpg" alt="photo" height="100" width="200">

References¶

• MDN: <img> — Setting width and height
• web.dev: Optimize Cumulative Layout Shift