Skip to content
Related Articles

Related Articles

Improve Article

HTML <picture> Tag

  • Last Updated : 20 May, 2021
Geek Week

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.

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

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :