Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

HTML <picture> Tag

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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. 


    Image and source tag

Below example illustrates the <picture> tag in HTML:



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


Supported Browsers: 

  • Google Chrome 38.0 and above
  • Edge 13.0 and above
  • Firefox 38.0 and above
  • Safari 9.1 and above
  • Opera 25.0 and above

My Personal Notes arrow_drop_up
Last Updated : 28 Jul, 2022
Like Article
Save Article
Similar Reads
Related Tutorials