The picture Element

By the end of this lesson, you will be able to use the HTML <picture> element to serve different image sources based on screen size or format support, enabling both art direction and modern format fallbacks.

What it is

The <picture> element is a container for zero or more <source> elements and one <img> element. It allows developers to specify multiple image resources so that the browser can choose the most appropriate one based on media queries (like screen width) or supported file formats (like WebP vs JPEG).

Mental Model: Think of <picture> as a smart switchboard. The browser checks each <source> from top to bottom. If a source matches the current conditions (media query or type), it loads that image. If none match, it falls back to the final <img> tag.

Related terms: Art Direction, Responsive Images, Media Queries, MIME Types.

Why it matters

• Art Direction: You can show a wide landscape crop on desktop and a tight portrait crop on mobile without stretching or cropping poorly via CSS alone.
• Format Fallback: Serve high-efficiency formats like WebP or AVIF to browsers that support them, while automatically falling back to JPEG/PNG for older browsers.
• Performance: Reduces bandwidth usage by delivering smaller files when possible, improving page load times.
• Simplicity: Handles complex logic in HTML, reducing the need for JavaScript-based image swapping.

Syntax or steps

1. Create a <picture> wrapper.
2. Add <source> tags inside. Use the srcset attribute for the image URL and type for the MIME type (e.g., image/webp). Optionally use media for screen size constraints.
3. Order sources from most specific/modern to least specific/legacy.
4. End with an <img> tag. This acts as the ultimate fallback if no <source> matches. It must include alt text for accessibility.

Example

<picture>
  <!-- Modern format for large screens -->
  <source srcset="hero-large.webp" type="image/webp" media="(min-width: 800px)">
  
  <!-- Modern format for small screens -->
  <source srcset="hero-small.webp" type="image/webp">
  
  <!-- Legacy fallback (JPEG) -->
  <img src="hero-fallback.jpg" alt="A scenic mountain view">
</picture>

Explanation: 1. The first <source> tells the browser: "If the screen is at least 800px wide AND supports WebP, load hero-large.webp." 2. The second <source> says: "If the screen is smaller than 800px BUT still supports WebP, load hero-small.webp." 3. The <img> tag ensures that if the browser does not support WebP (or doesn't understand <picture>), it loads hero-fallback.jpg.

Common mistakes

• Missing the <img> tag: Without a final <img>, users on very old browsers or those with images disabled see nothing. Always include it.
• Incorrect Source Order: Browsers pick the *first* matching source. Place your most optimized/specific sources first. If you put the generic JPEG source first, the browser might ignore the better WebP options.
• Forgetting alt Text: The <img> tag inside <picture> must have an alt attribute for accessibility. Screen readers rely on this.
• Using srcset incorrectly in <source>: Do not confuse <source>'s srcset (which takes a single URL here) with <img>'s srcset (which handles resolution switching). For art direction, keep it simple with one URL per source unless combining techniques.

When to use it

Practice

Guided Exercise: Create a <picture> element that serves banner.avif to all browsers supporting AVIF, and banner.png as a fallback. Ensure the image has the alt text "Company Banner".

Challenge: Modify the example above to also serve a different crop (banner-mobile.avif) only when the screen width is less than 600px, while keeping the desktop version for wider screens.

Hint: Use the media="(max-width: 599px)" attribute on the mobile source, placed before the general desktop source.

Quick check

Q: What happens if a browser supports WebP but fails to load the specified WebP file due to a network error?

A: The browser typically does not automatically fall back to the next source or the <img> tag upon load failure. It displays the broken image icon. Therefore, ensure your URLs are correct and reliable.

Summary

The <picture> element provides powerful control over which image assets are delivered, optimizing for both visual quality (art direction) and performance (format efficiency). By structuring sources from most specific to least specific and always including a robust <img> fallback, you ensure a consistent experience across all devices and browsers.