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

Discover More
HTML - Image (Img tag)

img is an fetch element that represents an image. An image in HTML can also be represented with a picture element that defines logically the same image but may have different physical image (different...
HTML - Source

source is an element that specifies the characteristic of an instance: of an image in a picture element of a audio element in a video element With width and height Standard...
How to create responsive images in HTML ? (from A to Z)

This article regroups all information about responsive image
How to represent an image in HTML ?

An image in HTML can be represented by: the img element (from raster to svg image) the svg element the picture element imgpictureresponsive image

Share this page:
Follow us:
Task Runner