HTML - <picture> Tag

HTML <picture> is used to display images for different size of display and devices. This is an alternative tag of <img> tag. It contains <source> and <img> elements.

One or more <source> elements and one <img> element, which acts as the block's last child element, are contained within the <picture> element. Versions of a images for various display device scenarios are included in the <source> element. The size and other attributes of the images’s are described in the <img> element.

Instead of having one image scaled according to the viewport width, the <picture> element permits the specification of multiple images that are intended to more accurately fill the browser viewport.

To adjust and crop pictures for various media situations
To provide substitute image formats when a certain format isn't supported.

Syntax

<picture>
   ...
</picture>

Attribute

HTML picture tag supports Global and Event attributes of HTML.

Examples of HTML picture Tag

Bellow examples will illustrate the usage of picture tag. Where, when and how to use picture tag and how we can manupulate picture element using CSS.

Creating Picture Element

Let’s look at the following example, where we are going to use the basic <picture> tag.

<!DOCTYPE html>
<html>
   <style>
      body {
         text-align: center;
      }
   </style>
<body style="background-color:#EAFAF1">
   <picture>
      <source media="(min-width: 600px)" 
              srcset=
"https://www.tutorialspoint.com/artificial_intelligence/images/artificial-intelligence-mini-logo.jpg">
      <source media="(min-width: 450px)" 
              srcset=
"https://www.tutorialspoint.com/cg/images/logo.png">
      <img src=
"https://www.tutorialspoint.com/html/images/html-mini-logo.jpg"
           alt="LOGO" style="width:auto;">
   </picture>
</body>
</html>

Enhancing Images with the Media Attribute

Considering the other scenario where we are going to use the media attribute along with the <picture> tag, in this case we are going to take two image sources and check which one the browser displays.

<!DOCTYPE html>
<html>
<body style="background-color:#E8DAEF">
   <picture>
      <source media="(max-width: 60px)" 
              srcset=
"https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/300px-Flag_of_India.svg.png" />
      <img src=
"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/CK_Nayudu_1930s.jpg/225px-CK_Nayudu_1930s.jpg" alt="ck nayudu" />
   </picture>
</body>
</html>

Implementing responsive images with srcset

Following the example where we are going to use the srcset attribute along with the <picture> tag.

<!DOCTYPE html>
<html>
<body style="background-color:#EBF5FB">
   <picture>
      <source media="(min-width:650px)" 
              srcset=
"https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/The_forest_near_Blatets%2C_Vinitsa.JPG/330px-The_forest_near_Blatets%2C_Vinitsa.JPG" />
      <source media="(min-width:465px)" 
              srcset=
"https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Cat_yawn_with_exposed_teeth_and_claws.jpg/330px-Cat_yawn_with_exposed_teeth_and_claws.jpg" width="1000px" height="200px" />
      <img src=
"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/330px-S%C3%A4ugende_H%C3%BCndin.JPG" alt="dog" style="width:auto;" />
   </picture>
</body>
</html>

Supported Browsers

Tag
svg	Yes 38.0	Yes 13.0	Yes 38.0	Yes 9.1	Yes 25.0

html_tags_reference.htm