Syntax
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>Examples
Format Fallback
Serving a modern format with a JPEG fallback.
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Mountain landscape">
</picture>Responsive Art Direction
Showing a different crop of the same image depending on screen width.
<picture>
<source media="(min-width: 800px)" srcset="banner-wide.jpg">
<source media="(min-width: 400px)" srcset="banner-medium.jpg">
<img src="banner-small.jpg" alt="Homepage banner">
</picture>Resolution Switching
Serving higher-resolution images to high-density screens.
<picture>
<source srcset="icon.png 1x, icon@2x.png 2x">
<img src="icon.png" alt="App icon">
</picture>Attributes
- srcset (string): Used on source; one or more candidate image URLs
- media (string): A media query controlling when that source is used
- type (string): The MIME type of the image resource, letting the browser skip unsupported formats
Best practices
- Always include a fallback <img> as the last child — it is what renders if no source matches, and is required for accessibility
- Put the alt attribute on the fallback <img>, not on picture or source
- List source elements from most to least preferred format, since the browser uses the first one it supports
- Use picture for format/art-direction switching, and the simpler img srcset attribute for pure resolution switching
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
<picture>
Desktop
- Chrome
- Supported
From 38 - Firefox
- Supported
From 38 - Safari
- Supported
From 9.1 - Edge
- Supported
From 13 - Opera
- Supported
From 25
Mobile
- Safari on iOS
- Supported
From 9.3 - Chrome for Android
- Supported
From 38 - Firefox for Android
- Supported
From 38 - Samsung Internet
- Supported
From 3.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 38
Firefox
- From 38
Safari
- From 9.1
Edge
- From 13
Opera
- From 25
Safari on iOS
- From 9.3
Chrome for Android
- From 38
Firefox for Android
- From 38
Samsung Internet
- From 3.0
<source>
Desktop
- Chrome
- Supported
From 3 - Firefox
- Supported
From 3.5 - Safari
- Supported
From 3.1 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 2 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 3
Firefox
- From 3.5 · Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
Safari
- From 3.1
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 2
Chrome for Android
- From 18
Firefox for Android
- From 4 · Until Firefox for Android 15, Firefox for Android picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
Samsung Internet
- From 1.0
<source> srcset
Desktop
- Chrome
- Supported
From 38 - Firefox
- Supported
From 38 - Safari
- Supported
From 9.1 - Edge
- Supported
From 13 - Opera
- Supported
From 25
Mobile
- Safari on iOS
- Supported
From 9.3 - Chrome for Android
- Supported
From 38 - Firefox for Android
- Supported
From 38 - Samsung Internet
- Supported
From 3.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 38
- From 34 · Removed in 38 · Last supported version: 37 · Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
Firefox
- From 38
Safari
- From 9.1
Edge
- From 13
Opera
- From 25
- From 21 · Removed in 25 · Last supported version: 24 · Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
Safari on iOS
- From 9.3
Chrome for Android
- From 38
- From 34 · Removed in 38 · Last supported version: 37 · Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
Firefox for Android
- From 38
Samsung Internet
- From 3.0
- From 2.0 · Removed in 3.0 · Last supported version: 2.1 · Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
<source> media
Desktop
- Chrome
- Supported
From 3 - Firefox
- Supported
From 15 - Safari
- Supported
From 3.1 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 2 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 15 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 3
Firefox
- From 15 · media is supported in <source> within <picture>, <audio>, and <video>. In Firefox 53-119, media is supported only in <source> within <picture>.
Safari
- From 3.1
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 2
Chrome for Android
- From 18
Firefox for Android
- From 15 · media is supported in <source> within <picture>, <audio>, and <video>. In Firefox for Android 53-119, media is supported only in <source> within <picture>.
Samsung Internet
- From 1.0
<source> type
Desktop
- Chrome
- Supported
From 3 - Firefox
- Supported
From 3.5 - Safari
- Supported
From 3.1 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 2 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 3
Firefox
- From 3.5
Safari
- From 3.1
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 2
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
<img> srcset
Desktop
- Chrome
- Supported
From 34 - Firefox
- Supported
From 38 - Safari
- Supported
From 8 - Edge
- Supported
From 12 - Opera
- Supported
From 21
Mobile
- Safari on iOS
- Supported
From 8 - Chrome for Android
- Supported
From 34 - Firefox for Android
- Supported
From 38 - Samsung Internet
- Supported
From 2.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 34
Firefox
- From 38
Safari
- From 8
Edge
- From 12
Opera
- From 21
Safari on iOS
- From 8
Chrome for Android
- From 34
Firefox for Android
- From 38
Samsung Internet
- From 2.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.