HTML - Picture element

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>

With width and height

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>

Documentation / Reference

• en-US/docs/Web/HTML/Element/picture
• https://developers.google.com/search/docs/advanced/guidelines/google-images#responsive-images