Reading the choices from JavaScript
With x descriptors the shown size comes from width (or the 1x file), whatever file is downloaded. A 2x file is drawn at half its pixel size, so it looks sharp, not big.
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.Expected console output
Candidates in srcset: 2
sizes attribute: ""
Has x descriptors: true
Shown width in CSS pixels: 160