HTML · The document layer
How do srcset, sizes and picture work?
Short answer
Use srcset and sizes to let the browser choose an appropriate image width, and picture with source elements for art direction or modern formats. Always include width and height to prevent layout shift.
Responsive images are about giving the browser options. You provide several candidates and information about how much space the image will occupy, and the browser picks based on viewport, pixel density and network conditions.
<img
src="/photo-800.jpg"
srcset="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Team planning on a whiteboard"
width="1600"
height="900"
/>When to use picture
<picture>
<source srcset="/photo.avif" type="image/avif" />
<source srcset="/photo.webp" type="image/webp" />
<img src="/photo.jpg" alt="Team planning on a whiteboard" width="1600" height="900" />
</picture>- srcset with w descriptors describes candidate widths
- sizes tells the browser the intended display width at different breakpoints
- Use x descriptors for fixed-size images with different pixel densities
- picture with media sources allows different crops for different layouts
- Always keep a fallback img with src and alt
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between srcset and picture?
- 2What do the w and x descriptors mean?
- 3Why does sizes matter?
- 4How do width and height prevent layout shift?
Say it in the interview
srcset gives the browser a set of image candidates, and sizes describes how wide the image will be at different viewports, so the browser can choose the smallest suitable file. I use picture when I need art direction or to offer modern formats like AVIF and WebP with a fallback. I always keep a fallback img, and I set width and height so the layout reserves space. If sizes is wrong, the browser may download the wrong candidate, so I verify it in the network panel.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.