The HTML <picture> element is a powerful tool for handling responsive images in web development. It allows developers to define multiple image sources and let the browser choose the most appropriate one based on screen resolution, viewport size, and image format support.
The <picture> element works by using one or more <source> elements, each specifying different image versions and a fallback <img> element to ensure compatibility with older browsers. To start your journey as a full-stack developer, have a look at our full stack web development classes.
Importance of Responsive Images in Modern Web Development
In today’s multi-device world, users access websites from desktops, tablets, smartphones, and even smart TVs, each with different screen sizes and resolutions. Responsive images ensure that users receive the most suitable image for their device, leading to:
- Improved Performance – Loading only the necessary image size reduces bandwidth consumption and improves page load times.
- Better User Experience – Clearer and optimized images enhance visual appeal and readability.
- SEO Benefits – Faster websites contribute to better search rankings, as page speed is a key ranking factor.
- Efficient Data Usage – Mobile users benefit from smaller image sizes, saving data while maintaining quality.
How the <picture> Element Improves Performance and Accessibility
- Efficient Image Loading – The <picture> element allows web developers to serve next-generation image formats like WebP and AVIF to support browsers while providing fallback formats for older browsers.
- Optimized for Different Viewports – The <picture> element ensures that users get the best balance between quality and performance by specifying different image sizes for different screen resolutions.
- Art Direction Support – Developers can serve entirely different images based on the device or screen orientation, improving the visual layout and UX.
- Accessibility Improvements – Combined with alt attributes, the <picture> element ensures visually impaired users receive meaningful content through screen readers.
What is the HTML <picture> Element?
Definition and Purpose
The HTML <picture> element provides multiple image sources for different screen sizes, resolutions, or formats. It gives developers more control over how images are displayed, ensuring users receive the most appropriate version based on their device and browser capabilities.
The <picture> element contains one or more <source> elements, each specifying a different image file. A fallback <img> element is included to ensure that browsers that do not support <picture> still display an image.
Example: Basic Usage of the <picture> Element
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="A beautiful landscape">
</picture>How it works:
- The browser first checks if it supports AVIF. If it does, it loads image.avif.
- If AVIF is not supported, it checks for WebP and loads image.webp if possible.
- If neither AVIF nor WebP is supported, the browser falls back to image.jpg.
Comparison with the <img> Element
| Feature | <picture> Element | <img> Element |
| Supports multiple image sources | ✅ Yes | ❌ No |
| Supports different formats (AVIF, WebP, JPEG) | ✅ Yes | ❌ No |
| Provides art direction (different images for different screens) | ✅ Yes | ❌ No |
| Fallback support for older browsers | ✅ Yes (with <img>) | ✅ Yes |
Example: Using <img> Instead of <picture>
<img src="image.jpg" alt="A beautiful landscape">Limitation:
- Regardless of screen size or format support, the <img> element always loads the same image file.
- It doesn’t provide flexibility for modern web performance optimizations.
When to Use <picture> Over <img>
| Use Case | Use <picture> | Use <img> |
| You need to serve different image formats (e.g., WebP, AVIF) | ✅ Yes | ❌ No |
| You need art direction (different images for different devices) | ✅ Yes | ❌ No |
| You are displaying a simple image with no format variations | ❌ No | ✅ Yes |
| You want to optimize performance for high-DPI screens | ✅ Yes | ❌ No |
Example: Art Direction with the <picture> Element
This example serves a different image based on screen width.
<picture>
<source media="(max-width: 600px)" srcset="small-image.jpg">
<source media="(max-width: 1200px)" srcset="medium-image.jpg">
<img src="large-image.jpg" alt="A city skyline at sunset">
</picture>How it works:
- On screens 600px or smaller, the browser loads small-image.jpg.
- On screens between 601px and 1200px, it loads medium-image.jpg.
- On larger screens, it defaults to large-image.jpg.
How the <picture> Element Works
The <picture> element allows developers to define multiple image sources within <source> elements. In particular, the browser evaluates these sources and selects the most suitable one based on format support, screen resolution, and viewport size.
If no specified sources are supported, the fallback <img> element ensures that an image is still displayed.
Syntax and Structure of the <picture> Element
A basic structure of the <picture> element looks like this:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="A beautiful landscape">
</picture>Breakdown:
- The <source> elements define different image formats (AVIF and WebP).
- The browser selects the first supported format and ignores the others.
- If none of the <source> formats are supported, the <img> element acts as a fallback.
Explanation of the <source> and <img> Elements Inside <picture>
1. <source> Element
Each <source> element provides an alternative image file. It can include:
- srcset: Defines the image source.
- type: Specifies the image format (e.g., image/webp).
- media (optional): Defines conditions for when this image should be used.
Example:
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">How it works: The browser loads image.webp if supported; otherwise, it falls back to image.jpg.
2. <img> Element (Fallback Image)
The <img> element acts as a fallback in case none of the <source> formats work.
Example:
<img src="default-image.jpg" alt="A fallback image">Why it’s important: Ensures compatibility with older browsers that don’t support <picture>.
Role of the srcset and media Attributes in Responsive Design
The srcset and media attributes help serve the right image for different screen sizes and resolutions.
1. srcset (Set of Image Sources for Different Resolutions)
The srcset attribute allows the browser to select an image based on screen resolution and density.
Example:
<picture>
<source srcset="image-small.jpg 600w, image-medium.jpg 1200w, image-large.jpg 1800w">
<img src="image-default.jpg" alt="A responsive image">
</picture>How it works:
- The browser picks an image based on the device’s screen width.
- 600w, 1200w, and 1800w indicate the width of each image version.
2. media (Conditional Image Loading Based on Viewport Size)
The media attribute allows you to define when a particular image should be used.
Example:
<picture>
<source media="(max-width: 600px)" srcset="image-mobile.jpg">
<source media="(max-width: 1200px)" srcset="image-tablet.jpg">
<img src="image-desktop.jpg" alt="A multi-device image">
</picture>How it works:
- If the viewport width is 600px or smaller, image-mobile.jpg is loaded.
- If the viewport width is between 601px and 1200px, image-tablet.jpg is used.
- If the viewport width is larger than 1200px, image-desktop.jpg is displayed.
Examples of using the <picture> Element
The <picture> element allows for better performance, responsiveness, and art direction by serving different images based on browser support, screen size, or device type. Here are three practical examples:
1. Basic Example: Serving Different Image Formats (JPEG, WebP, AVIF)
This example loads the most optimized image format supported by the user’s browser:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="A scenic mountain view">
</picture>How it works:
- If the browser supports AVIF, it loads image.avif.
- If AVIF is not supported, it checks for WebP and loads image.webp.
- If neither AVIF nor WebP is available, it defaults to image.jpg.
Benefit: This reduces bandwidth usage and improves page speed by serving modern, compressed formats where possible.
2. Responsive Example: Adjusting Images Based on Screen Width
This example loads different image sizes depending on the device’s screen width:
<picture>
<source media="(max-width: 600px)" srcset="small-image.jpg">
<source media="(max-width: 1200px)" srcset="medium-image.jpg">
<img src="large-image.jpg" alt="A responsive image">
</picture>How it works:
- On screens 600px or smaller, the browser loads small-image.jpg.
- On screens between 601px and 1200px, it loads medium-image.jpg.
- On screens larger than 1200px, it loads large-image.jpg.
Benefit: This approach ensures faster loading times and optimized image delivery for different screen sizes.
Handling Unsupported Browsers with Fallbacks
A. Using the <img> Element as a Fallback
Browsers that don’t recognize <picture> will ignore it but still render the <img> inside it.
Example:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="A fallback image">
</picture>Fallback solution: If a browser doesn’t support <picture>, it will load the <img> tag’s src attribute (image.jpg).
B. Using JavaScript for Enhanced Fallback Support
JavaScript-based polyfills like Picturefill can provide support for older browsers like Internet Explorer.
Example using Picturefill:
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js" async></script><picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Fallback image">
</picture>How it works:
- If the browser doesn’t support <picture>, the JavaScript script forces the <img> fallback to load properly.
C. Using noscript for Users with JavaScript Disabled
If users disable JavaScript, a noscript tag ensures an image is still displayed.
Example:
<noscript>
<img src="fallback.jpg" alt="A static fallback image">
</noscript>Why it helps:
- Ensures images are displayed even when JavaScript is turned off.
Common Mistakes to Avoid When Using the <picture> Element
While the <picture> element is a powerful tool for responsive images, improper use can lead to performance issues, unnecessary complexity, or broken images.
Below are some common mistakes and how to avoid them.
1. Overusing the <picture> Element When <img> Suffices
Best Practice: Use <picture> only when necessary. If a single image works across all devices, stick to <img>.
Mistake: Using <picture> unnecessarily.
<picture>
<img src="image.jpg" alt="A simple image">
</picture>Why it’s wrong: The <picture> element does nothing here—just use <img> directly:
<img src="image.jpg" alt="A simple image">When to use <picture>:
- For responsive images change based on screen size.
- For format switching (e.g., WebP/AVIF fallback to JPEG).
- For art direction (different image compositions for different devices).
2. Incorrect Use of media and srcset Attributes
Best Practice: Ensure that media queries in <source> elements match the expected breakpoints and srcset provides the right resolutions.
Mistake: Using srcset in <source> without specifying breakpoints properly.
<picture>
<source srcset="small.jpg, medium.jpg, large.jpg">
<img src="fallback.jpg" alt="Incorrect srcset usage">
</picture>Why it’s wrong:
- srcset needs to define image sizes or pixel densities, not just a list of images.
Correct Usage:
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(max-width: 1200px)" srcset="medium.jpg">
<img src="large.jpg" alt="Correct usage of media and srcset">
</picture>Key Takeaways:
- Use media to target screen widths properly.
- Use srcset for density variations (e.g., image@1x.jpg 1x, image@2x.jpg 2x).
3. Failing to Provide a Fallback <img> Element
Best Practice: Always include an <img> tag as a fallback for unsupported browsers.
Mistake: Forgetting the <img> inside <picture>.
<picture>
<source srcset="image.webp" type="image/webp">
</picture>Why it’s wrong: No image will be displayed if the browser doesn’t support WebP!
Correct Usage:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Fallback image">
</picture>Why it matters:
- If WebP isn’t supported, the browser falls back to image.jpg.
- Ensures 100% compatibility across all browsers.
