Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML <picture> Tag

  • Last Updated : 20 May, 2021

The <picture> tag in HTML is used to give flexibility to the web-developers to specify image resources. The <picture> tag contains <source> and <img> tags. The attribute value is set to load more appropriate image. 
The <img> element is used for the last child element of the picture declaration block. The <img> element is used to provide backward compatibility for browsers that do not support the element, or if none of the source tags matched. 

The <picture> tag is similar to <video> and <audio>. We add different sources, and the first source that fits the preferences is the one that will be used.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax: 

<picture>
    Image and source tag
<picture>

Below example illustrates the <picture> tag in HTML:



Example: 

html




<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h2>HTML <picture> Tag</h2>
  
    <picture>
        <source media="(min-width: 700px)" 
                srcset=
  
        <source media="(min-width: 450px)" 
                srcset=
  
        <img src=
             alt="GFG" style="width:auto;">
    </picture>
</body>
  
</html>

Output: 
 

Supported Browsers: 

  • Google Chrome 38.0
  • Internet Explorer 13.0
  • Firefox 38.0
  • Safari 9.1
  • Opera 25.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :