`<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 media attribute 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.