The <picture> element
The <picture> tag lets the browser choose between several versions of an image. Inside it, <source> elements offer alternatives for different screen sizes (with media) or file formats (with type), and a final <img> is the fallback that actually displays. Use it to show a cropped image on phones or serve modern formats like WebP.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, embedded content, palpable content |
| Content model | Zero or more <source> elements, followed by exactly one <img> |
| Tag omission | Neither the start nor the end tag can be omitted |
| Permitted parents | Any element that accepts embedded content |
| DOM interface | HTMLPictureElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
<picture>
| Attribute | Description |
|---|---|
| — | Only the global attributes apply. |
<source> (inside <picture>)
| Attribute | Description |
|---|---|
| srcset | One or more image URLs, optionally with widths (800w) or densities (2x) |
| media | A media query, e.g. (min-width: 700px); the source is used only when it matches |
| type | The image format, e.g. image/webp; skipped if the browser can’t show it |
| sizes | How wide the image will be displayed, so the browser can pick from srcset widths |
| width / height | The image size for this source, to prevent layout shift |
Common examples
Modern formats with a fallback
The browser picks the first format it supports — AVIF, then WebP, then the JPEG in <img>.
A different crop for phones
Show a tall, close-up crop on small screens and a wide one on desktops (“art direction”).
A logo for dark mode
A media query on the source swaps the image when the visitor uses dark mode.
AVIF vs WebP vs JPEG
The main reason to use <picture> is to serve smaller, modern image formats. AVIF usually gives the smallest files at the same quality, WebP is a little bigger but very widely supported, and JPEG works absolutely everywhere.
List sources from best to most compatible: AVIF first, then WebP, with JPEG (or PNG for graphics with transparency) in the <img> as the fallback. Smaller images make pages load faster, which helps both visitors and search rankings.
| AVIF | WebP | JPEG | |
|---|---|---|---|
| File size | Smallest | Small | Largest |
| Transparency | Yes | Yes | No |
| Support | All modern browsers | All modern browsers | Everywhere |
Common mistakes to avoid
- Forgetting the
<img>. Without it nothing is displayed — the img is required and must come last. - Wrong
typevalues. A typo such asimage/webmakes the browser skip that source. - Sources in the wrong order. The browser uses the first match, so put the most specific or newest format first.
- Styling the
<picture>instead of the img. Width, height and object-fit belong on the<img>.
Accessibility & SEO tips
- Always set
widthandheighton the img to prevent the page jumping as images load (Cumulative Layout Shift). - Add
loading="lazy"to images further down the page, but not to the main image at the top. - Google Images indexes the image in the
<img>tag, so give that file a descriptive name and good alt text.
Browser support
Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds. Browsers that don’t know a format simply skip that source.
Tutorials: How to add a background image, How to add an image, How to make a responsive website