<picture> Tag in HTML

The <picture> tag in HTML is used to define multiple sources for an image, providing responsive image support. It allows the browser to choose the appropriate image based on the device's screen size, resolution, and other factors. The <picture> tag is used with one or more <source> elements, each specifying a different image file and a media query.

Key Points on <picture> Tag:

The <picture> tag provides a container for multiple image sources, allowing for responsive images.
It is used with <source> elements, where each <source> element can specify different images for different scenarios (e.g., different screen widths or resolutions).
The <img> tag inside the <picture> tag acts as a fallback image, in case no <source> elements match the conditions.
This tag is particularly useful for ensuring that images are optimized for different devices (like mobile phones, tablets, and desktops).
The media attribute in the <source> tag allows you to specify the conditions under which a particular image should be displayed.

Syntax of <picture> Tag:

Syntax Example

<picture>
            <source media="(min-width: 800px)" srcset="large-image.jpg">
            <source media="(min-width: 400px)" srcset="medium-image.jpg">
            <img src="small-image.jpg" alt="A responsive image">
        </picture>

Example of <picture> Tag in HTML:

This example demonstrates how to use the <picture> tag for responsive images that adapt to different screen sizes.

Code Example

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>HTML <picture> Tag Example</title>
        </head>
        <body>
        
            <h1>Responsive Image Using <picture> Tag</h1>
        
            <picture>
                <source media="(min-width: 800px)" srcset="large-image.jpg">
                <source media="(min-width: 400px)" srcset="medium-image.jpg">
                <img src="B1.jpg" alt="Responsive Image">
            </picture>
        
        </body>
        </html>

Output

Responsive Image Using picture Tag

The <picture> tag is a powerful tool for creating responsive images in HTML. By using different <source> elements with media queries, it ensures that the most appropriate image is displayed based on the device's characteristics, such as screen size and resolution. This tag is ideal for optimizing the user experience across a range of devices.