Tutorial Manthra

Html <picture> element is a newly introduced element in Html 5. It gives more flexibility while using the <picture> element. Using Html <picture> element we can specify a number of images as source and the browser will choose the most appropriate image according to the device and current screen resolution.

The <picture> element allows us to display different pictures for different devices or screen sizes. The <picture> element contains a number of <source> elements, each referring to different image sources. And each source element will have attributes when the image is most suitable. And the browser choose the right image.

Example

<picture>
  <source media="(min-width: 650px)" srcset="flower-image_650.jpg">
  <source media="(min-width: 465px)" srcset="flower-image_465.jpg">
  <img src="flower-image_full.jpg">
</picture>

Note: Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags matched.

When to use the Picture Element

Bandwidth

When you have a device with small screen there is no need to load large image. The browser will use the first <source> element with matching attribute values, and ignore any of the following elements.

Format Support

When some browsers do not support all image formats we can use the <picture> element and add all image formats so that the browser will display the right image when it finds a match or it will display the first recognized image and ignore the rest.

Example

<picture>
  <source srcset="pngimage.png">
  <source srcset="jpgimage.jpg">
  <img src="gifimage.gif" >
</picture>