What is <picture>
the HTML <picture> tag allowed developers to have the flexibility to specify dedicated image resources in different scenarios, it provides a solution for responsive images in web design. It allows developers to specify different sources for an image, depending on the screen size and other factors, such as screen density and viewport size.
| HTML property | <picture> |
| Child element | <source srcset> , <img src> |
<picture>
<source type="image/avif" srcset="img/banner.avif">
<source type="image/webp" srcset="img/banner.webp">
<img src="img/banner.jpg">
</picture>
Basic Rules
The <picture> tag is working similar as the HTML <audio> and <video> tags, the first <source> that fits the preference will be selected and rendered.
As a fallback option, if none of the sources are matched, or when the browser does not support <picture>, <img src> will be rendered.
Every <picture><img src> descendant, without the declaration, <picture>
What can <picture> do
1. media rule
Example 1.1: Customize Image Sources
Use media and scrset
<picture>
<source srcset="img/banner3x.jpg" media="(min-width: 1920px)">
<source srcset="img/banner2x.jpg" media="(min-width: 1024px)">
<img src="img/banner.jpg" />
</picture>
In this example
- When the browser width is <= 1920px,
banner3x.jpg - When the browser width is <= 1024px,
banner2x.jpg - Otherwise,
banner.jpg
Example 1.2: Customize Image Size
Similar to example 1.1, but other than specifying image sources themselves, you can also specify how big you want your images to be displayed.
<picture>
<source srcset="img/banner.jpg" media="(orientation: portrait)" width=100% />
<img src="img/banner.jpg" width=50% />
</picture>
In this example
- When the viewport orientation is a
portrait,banner.jpg - Otherwise,
banner.jpg
2. Pixel Density Descriptor in srcset
srcsetThis will allow developer to have option to define a different image sources to serve in different DPI screen, for example, you can use a high-res image in high-DPI screen.
<picture>
<source srcset="pic-lg.png 1x" media="(min-width: 2560px)">
<source srcset="pic-md.png 1x, pic-lg.png 2x" media="(min-width: 1920px)">
<img src="pic-sm.png" />
</picture>
In this example
- If your viewport width is
>= 2560px& screen’s pixel density is1xpic-lg.pngwill be rendered - If your viewport width is
>=& screen’s pixel density is1920px1x,pic-md.png - If your viewport width is
>= 1920px& screen’s pixel density is2xpic-lg.png - Otherwise, the rules declared in
<img src>will be used (pic-sm.png
Note: The display density descriptor will choose the image base on the screen’s pixel density (for eg: 1x, 1.5x, 2x,…), not the image’s actual size.
3. Image type
type
<picture>
<source type="image/avif" srcset="img/banner.avif">
<source type="image/webp" srcset="img/banner.webp">
<img src="img/banner.jpg">
</picture>
In this example
- If your browser supports AVIF format, the 1st source (banner.avif) will be selected and rendered. Otherwise, it will move to the second source.
- If your browser supports WebP format but not AVIF, the 2nd source (banner.webp) will be selected and rendered.
- If your browser does not support both AVIF and WebP format, it will move to the final fallback option, which is defined in
<img src>
If you are interested to explore more about AVIF and WebP:
Browser compatibility
| Desktop | Mobile |
|---|---|
 Chrome 38 Edge 13 Safari 9.1 Firefox 38 Opera 25 Internet Explorer | Chrome Android 38 WebView Android 38 iOS Safari 9.3 Firefox Android 38 Opera Android 25 Samsung Internet 3.0 |
Source: 
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture#browser_compatibility
Summary
The HTML <picture> tag provides a powerful and flexible solution for responsive images, allowing you to deliver the best possible image for each device and screen size. With this element, you can ensure that your images look great on all devices, regardless of screen size or screen density.
When to use <picture>
When you want to specify preferences, for example:
Use a portrait design banner when the device orientation is in portrait view, or vice versa
Use a high-res image on a high-DPI screen, or vice versa
Use a large-size banner on a big screen, or vice versa
When you want to use a modern image type like AVIF or WebP without worrying about compatibility issues
By specifying which image to use in , you can ensure only the preference image sources will be downloaded
ui pencil 
Leave a Reply