Articles → HTML → Picture Tag In Html

Picture Tag In Html

This article will describe the "picture" tag in HTML.

Purpose

Picture tag displays different images based on the viewport size. This tag helps to create responsive designs.

Syntax

<picture><source media="(min-width:)" srcset=""><img src="” alt=" " /></picture>

In the "source" tag, we can specify the image based on the viewport size. There could be more than one "source" tag inside the picture tag.

Example

<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <picture>
            <source media="(min-width:650px)" srcset="http://gyansangrah.com/ArticleImages/basic_silverlight_example_one.jpg">
            <source media="(min-width:465px)" srcset="http://gyansangrah.com/ArticleImages/svg_polygon_html5_one.jpg">
            <img src="http://gyansangrah.com/ArticleImages/basic_silverlight_example_one.jpg" alt="" style="width:auto;">
        </picture>
    </body>
</html>

Try It

Output

Click to Enlarge

Browser Support

Internet Explorer	Firefox	Chrome	Safari	Opera	Edge
13.0	38.0	38.0	9.1	25.0	Yes

Posted By -	Karan Gupta

Posted On -	Monday, September 21, 2020

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**