Picture Element in HTML with Examples

In this article, I am going to discuss Picture Element in HTML with Examples. Please read our previous article where we discussed Background Images in HTML with Examples. At the end of this article, you will learn everything about HTML Picture Element with Examples.

HTML <Picture> Element

The HTML <picture> element allows web developers to specify image resources with more flexibility. We can use the HTML <picture> element to display different images depending on the device or screen size.

The HTML <picture> tag is used in responsive web design to load different images depending on the viewport, height, width, orientation, and pixel density.

The HTML <Picture> Element

One or more <source> elements and one <img> element are included in the <picture> tag. The matching picture will be loaded from a different <source> tag based on the viewport, and if no source contains the matching image, the default image from the <img> tag will be displayed on the browser.

The <picture> element includes one or more <source> elements, each of which refers to a different image through the srcset attribute. This allows the browser to select the image that is best suited to the current view and device. Each <source> element has a media attribute that specifies when the image is most relevant.

Example <Picture> Element

The browser will display the first image format it recognizes:

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="robot.png">
      <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Images</title>
    <style>
        body {
            display: grid;
            place-items: center;
            height: 100vh;
        }
    </style>
</head>

<body>
    <picture>
        <source media="(min-width: 650px)" srcset="https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_960_720.jpg">
        <source media="(min-width: 465px)" srcset="https://cdn.pixabay.com/photo/2014/05/05/14/14/meadow-338211_960_720.jpg">
        <img src="https://cdn.pixabay.com/photo/2015/05/27/13/05/plant-786689_960_720.jpg">
      </picture>
    <div>
    </div>
</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

As you can see in the below example when we change the width of the screen the image on the screen gets changed because we have specified different images for different viewports as shown in the below image.

Note: The picture element isn’t supported in any browsers yet, it’s still only a proposal. It’s going to hit that fallback whenever a browser doesn’t support <picture>, so the only time it might not is if you have a Chromium build that supports it or something.

When to use HTML Picture Element?

There are two main purposes for the <picture> element:

Bandwidth: If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first <source> element with matching attribute values, and ignore any of the following elements.
Format Support: Some browsers or devices may not support all image formats. By using the <picture> element, you can add images of all formats, and the browser will use the first format it recognizes, and ignore any of the following elements.

In the next article, I am going to discuss Image Maps in HTML with Examples. Here, in this article, I try to explain Picture Element in HTML with Examples and I hope you enjoy this HTML Picture Element with Examples article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.