perf/img-dimensions

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

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

Przeczytaj w terminalu

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