perf/srcset-sizes

Why

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.

Fix

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).

Examples

<!-- 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">

Sources

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

Read it in the terminal

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