perf/srcset-sizes

Dlaczego

With width descriptors the browser picks a file from the width the image will be shown at, and sizes is how it knows that width before the CSS is ready. Without sizes it assumes the full viewport width, so a card shown at a third of the screen downloads the largest file on every device. Mixing w and x descriptors in one srcset is invalid.

Poprawka

Add sizes describing the rendered width at each layout: sizes="(width >= 60rem) 33vw, 100vw". Use x descriptors only for fixed-size images such as logos and icons. Framework image components take sizes as a prop (next/image, NuxtImg, NgOptimizedImage).

Przykłady

<!-- bad -->
<img src="card-800.jpg" srcset="card-400.jpg 400w, card-800.jpg 800w" alt="Product" width="800" height="600">
<!-- good -->
<img src="card-800.jpg" srcset="card-400.jpg 400w, card-800.jpg 800w" sizes="(width >= 60rem) 33vw, 100vw" alt="Product" width="800" height="600">

Źródła

• HTML Standard, srcset and sizes attributes
• MDN, Responsive images
• web.dev, Learn Responsive Design, Responsive images

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain perf/srcset-sizes