HTML <picture> Tag

The HTML <picture> tag is used to provide multiple sources for an image, allowing the browser to choose the most appropriate one based on factors like screen resolution, viewport size, or device type. This tag is particularly useful for implementing responsive images and optimizing performance for different devices.

The <picture> tag works with the <source> and <img> tags. The <source> tag specifies multiple image files and conditions, while the <img> tag serves as a fallback.

Basic Syntax of HTML <picture> Tag

The basic structure of the <picture> tag is:

</>
Copy
<picture>
    <source srcset="image-large.jpg" media="(min-width: 800px)">
    <source srcset="image-small.jpg" media="(max-width: 799px)">
    <img src="image-default.jpg" alt="Description of the image">
</picture>

The browser evaluates the media attributes and chooses the appropriate <source>. If none of the conditions match, it falls back to the <img> tag.

Example of Responsive Images

Here’s an example of using the <picture> tag to serve different images for various screen sizes:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Responsive Image Example</h2>
        <picture>
            <source srcset="landscape-large.jpg" media="(min-width: 1024px)">
            <source srcset="landscape-medium.jpg" media="(min-width: 768px)">
            <source srcset="landscape-small.jpg" media="(max-width: 767px)">
            <img src="landscape-default.jpg" alt="A beautiful landscape">
        </picture>
    </body>
</html>

Explanation: Different images are served depending on the screen width:

  • 1024px and above: “landscape-large.jpg”
  • 768px to 1023px: “landscape-medium.jpg”
  • Below 768px: “landscape-small.jpg”

If none of the conditions match, the browser loads “landscape-default.jpg”.

Using the <picture> Tag for Art Direction

The <picture> tag can also be used for art direction, where different images are served not just based on size, but also based on layout or focus:

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Art Direction Example</h2>
        <picture>
            <source srcset="portrait.jpg" media="(orientation: portrait)">
            <source srcset="landscape.jpg" media="(orientation: landscape)">
            <img src="default.jpg" alt="A responsive image with art direction">
        </picture>
    </body>
</html>

Explanation: The browser selects “portrait.jpg” if the screen is in portrait orientation and “landscape.jpg” if it is in landscape orientation. If neither condition is met, it falls back to “default.jpg”.

Attributes of HTML <picture> Tag

  • <source>: Used inside the <picture> tag to define different image sources. Attributes include:
    • srcset: Specifies the URL(s) of the image(s) to use.
    • media: Specifies a media query to determine when the source is used.
    • type: Specifies the MIME type of the image file.
  • <img>: Acts as a fallback for browsers that don’t support the <picture> tag. It should always include the alt attribute for accessibility.

Styling Images in <picture> with CSS

You can style the <picture> and <img> elements using CSS to enhance their presentation:

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            picture {
                display: block;
                margin: 20px auto;
                text-align: center;
            }
            img {
                max-width: 100%;
                border: 3px solid #007BFF;
                border-radius: 10px;
            }
        </style>
    </head>
    <body>
        <h2>Styled Picture Example</h2>
        <picture>
            <source srcset="image-large.jpg" media="(min-width: 1024px)">
            <img src="image-default.jpg" alt="A responsive and styled image">
        </picture>
    </body>
</html>

Result: The image will adapt to different screen sizes and display with a border and rounded corners.

Practical Applications of the <picture> Tag

  • Responsive Design: Serve images optimized for different screen sizes and resolutions.
  • Art Direction: Provide alternative layouts or compositions for different orientations or devices.
  • Performance Optimization: Use smaller images for low-resolution screens to reduce bandwidth usage.
  • Accessibility: Provide appropriate fallback images for devices that don’t support specific formats.