HTML Picture Element - Web4learners

The HTML <picture> element allows developers to display different images depending on the device, screen size, or image format supported by the browser. It is useful for responsive web design because it allows browsers to select the most appropriate image for the available space and viewing conditions.

The <picture> element works with the <source> and <img> elements. While <source> defines alternative image options, the <img> element provides the image displayed when no alternative source matches.

What Is the HTML Picture Element?

The <picture> element is a container for multiple image sources. It allows you to specify different images for different screen sizes or formats without using JavaScript.

For example, a website can display a large landscape image on a desktop and a smaller, cropped image on a mobile device.

HTML Picture Element Syntax

<picture>
    <source media="(max-width: 600px)" srcset="small.jpg">
    <source media="(min-width: 601px)" srcset="large.jpg">
    <img src="large.jpg" alt="Beautiful mountain landscape">
</picture>

In this example, the browser selects small.jpg when the viewport is 600 pixels wide or less. For larger viewports, it can select large.jpg. The <img> element provides the fallback image.

HTML Picture Element Example

The following example demonstrates how to display different images for mobile and desktop screens.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Picture Element</title>
</head>
<body>

    <h1>HTML Picture Element</h1>

    <picture>
        <source
            media="(max-width: 600px)"
            srcset="images/mobile.jpg">

        <source
            media="(min-width: 601px)"
            srcset="images/desktop.jpg">

        <img
            src="images/desktop.jpg"
            alt="A scenic landscape"
            width="800"
            height="450">
    </picture>

</body>
</html>

Save the code as index.html and place the images in the specified images folder. When the viewport changes, the browser can select the image that matches the relevant media condition.

HTML Picture Element Attributes

The <picture> element itself does not have special attributes for choosing images. The selection is controlled primarily by attributes on its child elements.

Element	Attribute	Description
`<source>`	`srcset`	Specifies one or more alternative image sources.
`<source>`	`media`	Defines the media condition for selecting a source.
`<source>`	`type`	Specifies the image format, such as `image/webp`.
`<img>`	`src`	Provides the fallback image source.
`<img>`	`alt`	Provides alternative text for accessibility.
`<img>`	`width` and `height`	Specify the image’s intrinsic dimensions.

Using the Picture Element for Different Image Formats

The <picture> element can offer modern image formats while retaining a fallback for browsers that do not support them.

<picture>
    <source srcset="images/photo.avif" type="image/avif">
    <source srcset="images/photo.webp" type="image/webp">
    <img src="images/photo.jpg" alt="A beautiful natural landscape">
</picture>

The browser checks the available sources in order and selects a suitable supported format. The JPEG image serves as the fallback.

Difference Between Picture and Img Elements

Feature	`<picture>`	`<img>`
Main purpose	Offers multiple image sources	Displays an image
Responsive art direction	Supports different images for media conditions	Does not select different crops using media conditions by itself
Image formats	Can offer multiple formats	Uses the specified image source
Required child	Usually contains an `<img>` element	Displays the image directly