<img src="hero-960.jpg" srcset="hero-480.jpg 480w, hero-960.jpg 960w, hero-1440.jpg 1440w" sizes="(max-width: 640px) 100vw, 50vw" alt="Echipă la lucru">On narrow screens the image occupies the viewport, while in the wide layout it uses about half.
LESSON 78 OF 100
Describe responsive image candidate widths
Offer three real widths and tell the browser how much space the image will occupy.
STEP 1 · LEARN
How it works
The w descriptors state each candidate’s intrinsic width. When they are used, sizes describes the display size so the browser can choose a resource before downloading it.
<img srcset="hero-480.jpg 480w, hero-960.jpg 960w" alt="Echipă">With w descriptors, omitting sizes makes the browser assume 100vw, which can select a resource larger than needed.
STEP 2 · APPLY
Your exercise
Add three candidates at 480w, 960w and 1440w and a sizes value with a maximum 640px condition plus the final 50vw value.
index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK
What needs to pass
0%not checked
- ○srcset contains valid, unique 480w, 960w and 1440w widths.
- ○sizes contains a media condition and a valid final size.
- ○The image has alternative text.
- ○The target element is present in the page.
Explain the solution logic
Unique descriptors describe the files, while the sizes list describes expected space in two layout situations.