About
The picture element is a container that is used to group different source versions of the same image.
The browser can then choose the right image depending on :
- its capability ( may not yet support the format)
- and device capabilities (like pixel density and screen size)
Articles Related
Example
Basic
<picture>
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="pyramid.png" alt="large PNG image...">
</picture>
An img element with a src attribute should always be specified as fallback
With width and height
<picture>
<source media="(max-width: 799px)" srcset="480w.jpg" width="600" height="279">
<source media="(min-width: 800px)" srcset="800w.jpg" width="1500" height="300">
<img src="800w.jpg" alt="Default if the media condition are not met" width="1500" height="300">
</picture>