Skip to content
Related Articles

Related Articles

HTML | <picture> Tag
  • Last Updated : 27 Aug, 2019
GeeksforGeeks - Summer Carnival Banner

The <picture> tag in HTML is used to gives 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.


    Image and source tag

Below example illustrates the <picture> tag in HTML:


<!DOCTYPE html>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
        HTML picture Tag
        body {
        h1 {
    <h2>HTML <picture> Tag</h2>
        <source media="(min-width: 700px)" srcset=
        <source media="(min-width: 450px)" srcset
        <img src=
            alt="GFG" style="width:auto;">


Supported Browsers: The browsers supported by HTML <picture> tag are listed below:

  • 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 :