Detailed explanation
The <picture> element lets you offer alternative image sources while displaying a single image. Its main uses are art direction and image-format selection. Art direction means changing the actual composition, such as showing a tightly cropped product photo on mobile and a wider scene on desktop. Format selection lets you offer formats such as AVIF or WebP while retaining a JPEG fallback. This matters because a useful image is not always the same crop or format at every screen size, and suitable alternatives can reduce unnecessary downloads.
A <picture> contains zero or more <source> elements followed by one <img> element. Each <source> supplies image candidates through srcset and can include media and type attributes. The browser checks sources in document order, looking for the first eligible source whose media condition matches and whose declared image type it supports. It then selects an image candidate from that source’s srcset. If no source qualifies, the browser uses the <img> element’s own srcset or src. The <img> is required: it provides the rendered image, alternative text, and fallback behaviour.
In the given example, a viewport at least 800 CSS pixels wide selects large.jpg. Between 400 and 799 CSS pixels, the first source does not match, so medium.jpg is selected. Below 400 CSS pixels, neither source matches, so small.jpg is used. Source order therefore matters: putting the 400px condition first would make it match wider viewports too, preventing the later 800px source from being chosen. The browser can re-evaluate this selection when relevant conditions change, such as after resizing the viewport.
For ordinary resolution switching, where the composition stays unchanged, <img srcset="..." sizes="..."> is often sufficient. Within <picture>, a selected source can also use srcset and sizes to offer multiple resolutions; with width descriptors, sizes describes the intended display width so the browser can account for pixel density. Interviewers expect this distinction: <picture> controls which source is eligible, while srcset provides candidates within that source. CSS still controls layout, meaningful alt text belongs on <img>, and a selected image failing to download does not automatically trigger a retry using later sources.
Key points to remember
- Use <picture> for art direction, format alternatives, or both.
- Place <source> elements before the required <img> element.
- The browser considers sources in order using media conditions and declared type support.
- Use srcset and sizes for resolution selection; use CSS for displayed dimensions.
- Keep alternative text on <img>, which also supplies the default image source.
Common mistakes candidates make
- Putting a broad media condition before a more specific one, making the later source unreachable.
- Treating <picture> as a replacement for <img> or placing alt text on <source>.
- Assuming a failed image download automatically makes the browser try the next <source>.
Likely follow-up questions
When should you use <img srcset> instead of <picture>?
Use <img srcset> when you need different resolutions of the same image composition. Add sizes when using width descriptors so the browser can estimate the image’s display width.
How do you offer AVIF with a JPEG fallback?
Place <source type="image/avif" srcset="photo.avif"> inside <picture>, followed by <img src="photo.jpg" alt="Product photo">. Browsers that do not support the declared AVIF type skip that source and use the JPEG.
Does <picture> automatically make an image fit its container?
No; source selection and visual sizing are separate concerns. Apply CSS such as max-width: 100% and height: auto to the <img> to let it shrink within its container while preserving its aspect ratio.
Interview tip: Explain art direction first, walk through the example’s breakpoints, and finish by distinguishing <picture> from <img srcset>.