Menu
The picture
tag is used to display one or more image sources with more flexibility to adjust to various screen sizes.
The <picture>
tag contains one or more <source>
tags and one <img>
tag. The browser renders the first <source>
tag that matches the current viewport width. If none of the <source>
tags match, then the browser will use the <img>
tag as the fallback. The required <img>
tag must be the last child within the <picture>
tag.
<picture>
<source media="(min-width:1040px)" srcset="img_for_larger_screens.jpg">
<source media="(min-width:768px)" srcset="img_for_tablets.jpg">
<img src="img_fallback.jpg" alt="Fallback image">
</picture>
Have a code example of <picture>
? Submit a codepen.io demo and we'll showcase it here ↴