<picture> Element

  • <picture> elements allow us to set different image sources based on device properties
  • <picture> elements use an <img> element as a fallback.
  • The <img> element will be used as the container to render the picture.
  • Multiple <source> elements are used to load different versions of the picture.
  • Each <source> element gets a mediaattribute which defines the parameters for loading the image.
<picture>
   <source srcset=“hugePic.jpg” media=“(min-width: 1200px)” />
   <source srcset=“normalPic.jpg” media=“(min-width: 800px) and (max-width: 1200px)” />
   <source srcset=“smallPic.jpg” media=“(max-width: 800px)” />
   <img src=“default.jpg” alt=“image description” />
</picture>

This YouTube video was created by Steve Griffith.