HTML Picture Element
The picture element offers a browser several versions of one image. The browser picks the first version that fits the screen.
Two sizes of one image
Each source element offers one version. Its media value names a screen condition, and its srcset value names the picture for that condition.
<picture>
<source media="(max-width: 600px)" srcset="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2740%27 height=%2740%27%3E%3Ccircle cx=%2720%27 cy=%2720%27 r=%2718%27 fill=%27red%27/%3E%3C/svg%3E">
<source media="(max-width: 1000px)" srcset="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2780%27 height=%2780%27%3E%3Ccircle cx=%2740%27 cy=%2740%27 r=%2738%27 fill=%27blue%27/%3E%3C/svg%3E">
<img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27120%27 height=%27120%27%3E%3Ccircle cx=%2760%27 cy=%2760%27 r=%2758%27 fill=%27green%27/%3E%3C/svg%3E" alt="A coloured circle">
</picture>
<p>One circle, in the size that fits.</p>The img element is the backup
The img element inside a picture element is required. The browser shows it when no source condition fits the screen.
<picture>
<source media="(max-width: 500px)" srcset="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2740%27 height=%2740%27%3E%3Ccircle cx=%2720%27 cy=%2720%27 r=%2718%27 fill=%27red%27/%3E%3C/svg%3E">
<img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2780%27 height=%2780%27%3E%3Ccircle cx=%2740%27 cy=%2740%27 r=%2738%27 fill=%27green%27/%3E%3C/svg%3E" alt="A coloured circle">
</picture>
<p>Wide screens see the backup circle.</p>A different picture for wide screens
A source can offer a different picture, not just a different size. This source fits screens at least 800 pixels wide.
<picture>
<source media="(min-width: 800px)" srcset="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27120%27 height=%2760%27%3E%3Ccircle cx=%2760%27 cy=%2730%27 r=%2728%27 fill=%27blue%27/%3E%3C/svg%3E">
<img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2760%27 height=%2760%27%3E%3Ccircle cx=%2730%27 cy=%2730%27 r=%2728%27 fill=%27red%27/%3E%3C/svg%3E" alt="A coloured circle">
</picture>
<p>Wide screens get the blue circle.</p>Example
<!DOCTYPE html>
<html>
<head>
<title>One Image, Two Sizes</title>
</head>
<body>
<h1>One Image, Two Sizes</h1>
<picture>
<source media="(max-width: 600px)" srcset="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2740%27 height=%2740%27%3E%3Ccircle cx=%2720%27 cy=%2720%27 r=%2718%27 fill=%27red%27/%3E%3C/svg%3E">
<img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%27 height=%27100%27%3E%3Ccircle cx=%2750%27 cy=%2750%27 r=%2748%27 fill=%27green%27/%3E%3C/svg%3E" alt="A coloured circle">
</picture>
<p>The circle changes with the screen width.</p>
</body>
</html>Key points
- picture element: a container that offers several versions of one image
- source element: one offered version inside a picture element
- srcset attribute: names the picture for one source element
- media attribute: the screen condition for one source element
- The img element inside a picture element is the backup version.
In this example, the picture element holds one source and one img element. The source fits screens up to 600 pixels wide. It offers a small red circle for those screens. Wider screens skip the source and show the img picture. The img picture is a larger green circle.
Note
A picture element holds exactly one img element.
Try it Yourself
Edit the code, then press Run.
Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.
Exercise
What does the browser do with a picture element?