<picture> offers alternative image sources for art direction, format support, or responsive delivery. It contains zero or more source elements followed by one img.
Switch artwork by viewport width
The wider view gets a green landscape and the narrower view a blue one. Both images are embedded data URLs, so the copied document needs no files.
HTML and CSS
HTML
<picture><source media="(min-width: 500px)" srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22120%22%20viewBox%3D%220%200%20240%20120%22%3E%3Crect%20width%3D%22240%22%20height%3D%22120%22%20fill%3D%22%23dcfce7%22%2F%3E%3Cpath%20d%3D%22M0%20120L75%2035L140%20100L190%2050L240%20120Z%22%20fill%3D%22%23166534%22%2F%3E%3C%2Fsvg%3E"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22120%22%20viewBox%3D%220%200%20240%20120%22%3E%3Crect%20width%3D%22240%22%20height%3D%22120%22%20fill%3D%22%23dbeafe%22%2F%3E%3Cpath%20d%3D%22M0%20120L75%2035L140%20100L190%2050L240%20120Z%22%20fill%3D%22%232563eb%22%2F%3E%3C%2Fsvg%3E" alt="Two mountain peaks, with the taller peak on the left" width="240" height="120"></source></picture>CSS
img {
max-width: 100%;
height: auto;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Selection and naming
The browser considers sources in order, checking applicable media conditions and supported type, then selects a candidate from srcset. If no source applies, img supplies its fallback. Picture itself does not display a separate image or provide a separate alt; img remains the image element.
Use width descriptors such as 480w with appropriate sizes, or density descriptors such as 2x; do not mix descriptor types in one candidate list. Source alternatives should match the purpose described by img’s alt, even when crops differ.
Inspect a change
Open the copied document and resize across 500 CSS pixels, or inspect img.currentSrc in developer tools. The preview width is the example frame’s width, which may differ from the host window. Set object-fit or object-position on img, not picture.
Use only img with srcset when selecting resolutions of the same image is enough; picture is useful when source conditions add something distinct.
Sources and browser support
MDN: picture describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.