HTML - <picture> Tag

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. The browser takes each of the child <source> elements and loads the most appropriate image. The browser shows the image given by the <img> tag if no matches are found.

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. It can be applied for the following purposes −

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

Syntax

Following is the syntax of the <picture> tag −

<picture>
   Image and source tag
</picture>

Specific Attributes

The HTML <picture> tag also supports the following additional attributes −

S.No. Attribute & Description
1

media

Accepts any valid media query that would normally be defined in a CSS.
2

sizes

Defines a single width descriptor, a single media query with width descriptor, or a comma-delimited list of media queries with a width descriptor.
3

src

Specifies the URL of the image.
4

Srcset

(required)Specifies the URL of the image to use in different situations.
5

type

Defines the MIME type.

Example

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>

When we execute the above code, the output window will pop up, consisting of the three image sources used in the code, but it will display only one image on the webpage according to the viewport.

Example

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>

On running the above code, it will generate an output consisting of the image of the CK Nayudu displayed on the webpage. In this case, we have chosen two image sources: one is the India flag and another is the CK Nayudu image, and the browser displays the CK Nayudu image on the webpage.

Example

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>

When we execute the above code, the output window will pop up and display the image according to the viewport based on the three image sources we used in the above code.

html_tags_reference.htm
Advertisements