Responsive images with srcset and sizes, explained

The problem srcset solves

A photo that fills a 1440-pixel-wide laptop screen is wasted on a phone that shows it 390 pixels wide. With a single file, the phone downloads the large version anyway. With srcset you list several widths of the same image and let the browser pick the smallest one that still looks sharp on that screen.

How srcset and sizes work together

srcset lists the files with their real pixel widths, for example photo-640.webp 640w and photo-1280.webp 1280w. sizes tells the browser how wide the image will be displayed at different viewport widths, for example (min-width: 1024px) 50vw, 100vw. The browser combines the display width with the screen's pixel density and picks the closest file that is large enough.

If you leave out sizes, the browser assumes the image is as wide as the whole viewport, which often makes it download a larger file than it needs.

Which widths to generate

Responsive Images suggests 320, 640, 768, 1024, 1280, 1536 and 1920 pixels by default, and you can add or remove widths such as 480 or 2560. Widths larger than your original are flagged, because enlarging adds bytes without adding detail. Five to eight steps cover most layouts.

Adding AVIF and WebP with picture

The picture element offers modern formats with a fallback. The browser uses the first source whose type it supports, so a typical order is AVIF, then WebP, then a JPG img element that every browser understands. Responsive Images can encode every width in WebP, AVIF and JPG and gives you the picture, srcset and sizes markup to paste.

Do not forget the basics

• Always set width and height attributes so the browser reserves space and the layout does not shift while images load.
• Use loading="lazy" for images below the first screen, but not for the main image at the top of the page.
• Write useful alt text. It applies whichever file the browser picks.
• For a smoother first impression, show a tiny blurred placeholder while the image loads. LQIP & BlurHash generates one.

Limitations

The generator cannot know how wide your CSS makes the image, so adjust the sizes value to match your layout. Encoding many widths in AVIF takes a while on your device, especially for large originals on phones.