srcset and sizes: which file did the browser pick?

The pictures are small SVG images written into the code (data URIs) so this works offline. Which one you get depends on your screen, so your console may differ from someone else's.

With srcset, sizes and <picture> you list several versions of an image and let the browser download only the one that fits the screen, instead of sending a huge photo to every phone.

Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.

Ready for more? This phase has 6 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

Write an <img> for a hero banner that fills the full width on every screen, with files hero-640.jpg, hero-1280.jpg and hero-1920.jpg.

Write a <picture> that offers photo.avif and photo.webp before a photo.jpg fallback.

A product image is 100% wide below 600px, 50% wide up to 1000px, and a fixed 400px above that. Write its sizes.

Explain it without notes

What problem do srcset and sizes solve, and how does the browser use them to choose a file?

When would you use x descriptors and when w descriptors?

What is the difference between srcset resolution switching and <picture> art direction?