perf/img-dimensions

Why

An image without dimensions takes no space until it loads, then pushes the content below it down. That shift counts against Cumulative Layout Shift, one of the Core Web Vitals, and makes people click the wrong thing.

Fix

Write the image's intrinsic size: <img src="hero.jpg" width="1200" height="600" alt="…">, and let CSS scale it with max-width: 100%; height: auto;. The browser derives the aspect ratio from the two attributes. Framework image components (next/image, @nuxt/image, astro:assets) do this when you pass the size.

Examples

<!-- bad -->
<img src="hero.jpg" alt="Our team">
<!-- good -->
<img src="hero.jpg" width="1200" height="600" alt="Our team">

Sources

• web.dev, Optimize Cumulative Layout Shift (images without dimensions)
• MDN, the img element (width and height)

Read it in the terminal

npx github:dawidolko/frontend-skills explain perf/img-dimensions