HTML - Picture element


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)



 <source type="image/svg+xml" srcset="pyramid.svg">
 <source type="image/webp" srcset="pyramid.webp">
 <img src="pyramid.png" alt="large PNG image...">

An img element with a src attribute should always be specified as fallback

With width and height

With width and height

  <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">

Documentation / Reference

Powered by ComboStrap