picture: the first matching source wins
The first source is skipped because no browser knows the type image/x-future. Then a narrow preview shows the close-up and a wide one shows the wide crop. Drag the preview wider or narrower and press Run.
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?
Why can't sizes use percentages?
Preview
Console
Nothing logged yet.