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

• Img and Picture video
• Examples of Responsive Images
• MDN Responsive Images Tutorial
• MDN picture element ref