HTML Picture Element

The HTML <picture> element gives developers more flexibility in specifying image resources. It is especially useful for responsive images and serving modern formats (like WebP or AVIF) with fallbacks.

Why Use <picture>?

The <picture> element solves two main problems:

Art Direction: Show a different cropped/sized image depending on screen size
Format Switching: Serve modern formats (WebP, AVIF) to browsers that support them, with a fallback for older browsers

Basic Syntax

The <picture> element contains one or more <source> tags and one <img> tag as the fallback:

<picture>
    <source media="(min-width: 768px)"
            srcset="large.jpg">
    <source media="(min-width: 480px)"
            srcset="medium.jpg">
    <img src="small.jpg" alt="A landscape photo">
</picture>

Note: The browser checks <source> tags from top to bottom and uses the first one that matches. If none match, the <img> fallback is used.

The <source> Attributes

Attribute	Description
`srcset`	Path to the image file(s) to use for this source
`media`	Media condition (like a CSS media query)
`type`	MIME type (e.g. `image/webp`, `image/avif`)
`sizes`	Describes the image sizes for different viewports

Art Direction — Different Images per Screen

Show a wide banner on desktop and a portrait crop on mobile:

<picture>
    <!-- Wide landscape for large screens -->
    <source media="(min-width: 900px)"
            srcset="banner-wide.jpg">

    <!-- Square crop for tablets -->
    <source media="(min-width: 480px)"
            srcset="banner-square.jpg">

    <!-- Portrait for mobile (fallback) -->
    <img src="banner-portrait.jpg"
         alt="Promotional banner">
</picture>

Format Switching — WebP with JPEG fallback

Serve WebP to browsers that support it, fall back to JPEG for older browsers:

<picture>
    <!-- AVIF for browsers that support it -->
    <source type="image/avif"
            srcset="photo.avif">

    <!-- WebP for browsers that support it -->
    <source type="image/webp"
            srcset="photo.webp">

    <!-- JPEG fallback for all other browsers -->
    <img src="photo.jpg" alt="A scenic photo">
</picture>

Tip: Always include an <img> as the last child inside <picture>. It is the required fallback — without it, nothing displays if no <source> matches.

Combining media and type

You can combine both media and type attributes on the same source:

<picture>
    <source media="(min-width: 768px)"
            type="image/webp"
            srcset="large.webp">
    <source media="(min-width: 768px)"
            srcset="large.jpg">
    <source type="image/webp"
            srcset="small.webp">
    <img src="small.jpg" alt="Photo">
</picture>

<picture> vs <img> — When to Use Each

Situation	Use
Simple image display	`<img>`
Different crop/framing per screen size	`<picture>` with `media`
Serve WebP/AVIF with JPEG fallback	`<picture>` with `type`
Responsive image (same crop, different sizes)	`<img srcset>`

« Previous Lesson Next Lesson »