Open In App

HTML <picture> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

HTML <picture> tag provides web developers with flexibility in defining image resources, particularly useful for art direction in responsive designs. It comprises <source> tags for different media queries and a <img> tag as a fallback. Attribute values are set to load the most suitable 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. 

Note: The <picture> tag in HTML supports both Global Attributes and Event Attributes, enhancing its functionality and interactivity.

Syntax: 

<picture>
    Image and source tag
<picture>

HTML <picture> tag Examples

Example: In this example we are using the <picture> tag with multiple <source> elements for responsive design, providing different image sources based on viewport width, and includes inline CSS for styling.

html
<!DOCTYPE html>
<html>

<body>

    <picture>
        <source media="(min-width: 700px)" 
                srcset=
"https://media.geeksforgeeks.org/wp-content/uploads/20190825000042/geeks-221.png">

        <source media="(min-width: 450px)" 
                srcset=
"https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png">

        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png" 
             alt="GFG" 
             style="width:auto;">
    </picture>
</body>

</html>

Output: 

HTML-picture-Tag

HTML picture Tag Examples


Supported Browsers: 


Last Updated : 12 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads