Optimagio

Using Picture Element for Art Direction & Format Fallbacks

Learn how to use the HTML picture element to deliver responsive art direction and modern image formats with graceful fallbacks for all browsers.

Optimagio Team 4 min read
Using Picture Element for Art Direction & Format Fallbacks

Beyond Simple Responsive Images: Why Art Direction Matters

Responsive images solved the problem of serving appropriately sized images to different devices, but they don't address a crucial visual design consideration: sometimes an image that works perfectly on desktop becomes unusable on mobile. A wide landscape shot might lose its impact when cropped to a narrow mobile viewport, and a detailed portrait might become too small to appreciate on a large screen. This is where art direction comes in - the practice of serving different image compositions or crops based on the viewing context.

How the Picture Element Works for Art Direction

The HTML picture element acts as a container for multiple source elements, each specifying an image variant with conditions for when it should be used. The browser evaluates these sources in order and selects the first matching variant, then falls back to the img element if no sources match or if the browser doesn't support picture. 

<picture>
  <!-- Mobile crop (narrow) -->
  <source 
    media="(max-width: 768px)" 
    srcset="hero-mobile.webp" 
    type="image/webp">
  
  <!-- Mobile fallback -->
  <source 
    media="(max-width: 768px)" 
    srcset="hero-mobile.jpg">
  
  <!-- Desktop crop (wide) -->
  <source 
    srcset="hero-desktop.webp" 
    type="image/webp">
  
  <!-- Final fallback -->
  <img 
    src="hero-desktop.jpg" 
    alt="Hero image description" 
    loading="lazy">
</picture>

Adding Format Fallbacks for Modern Image Formats

The same picture element structure that enables art direction also provides the perfect mechanism for format fallbacks. By listing modern formats like WebP or AVIF first, followed by traditional formats like JPEG or PNG, you can serve optimized images to supporting browsers while maintaining compatibility with older browsers.

  1. 1Place modern formats firstList WebP or AVIF sources before traditional formats - browsers will use the first supported format they encounter
  2. 2Include type attributesAdd type="image/webp" or type="image/avif" to help browsers quickly identify supported formats
  3. 3Provide comprehensive fallbacksInclude JPEG for photographic content and PNG for graphics with transparency needs
  4. 4Always include final img elementThe img tag serves as the ultimate fallback and must include src, alt, and other standard attributes

Combining Art Direction with Format Fallbacks

The real power of the picture element emerges when you combine art direction with format fallbacks. This approach ensures that each viewport gets both the optimal composition and the optimal format, maximizing both visual impact and performance. 

<picture>
  <!-- Mobile - WebP -->
  <source 
    media="(max-width: 768px)" 
    srcset="hero-mobile.avif" 
    type="image/avif">
  
  <!-- Mobile - WebP fallback -->
  <source 
    media="(max-width: 768px)" 
    srcset="hero-mobile.webp" 
    type="image/webp">
  
  <!-- Mobile - JPEG ultimate fallback -->
  <source 
    media="(max-width: 768px)" 
    srcset="hero-mobile.jpg">
  
  <!-- Desktop - WebP -->
  <source 
    srcset="hero-desktop.avif" 
    type="image/avif">
  
  <!-- Desktop - WebP fallback -->
  <source 
    srcset="hero-desktop.webp" 
    type="image/webp">
  
  <!-- Final fallback -->
  <img 
    src="hero-desktop.jpg" 
    alt="Detailed hero image description" 
    loading="eager" 
    width="1200" 
    height="600">
</picture>

Best Practices and Common Pitfalls

While the picture element is powerful, improper implementation can lead to suboptimal results. Follow these guidelines to ensure your implementation works correctly across all browsers and devices.

Do
  • Order sources strategicallyPlace modern formats and specific media conditions first, general fallbacks last
  • Include dimensionsAlways specify width and height on the img element to prevent layout shifts
  • Use descriptive alt textProvide meaningful alt text that describes the image content
  • Test across browsersVerify fallback behavior in older browsers and different devices
Don't
  • Skip the img elementThe img tag is required and serves as the ultimate fallback
  • Forget type attributesType attributes help browsers quickly identify supported formats
  • Use overly complex media queriesKeep media queries simple and based on actual design breakpoints
  • Neglect performance optimizationEnsure all image variants are properly compressed and optimized

Scaling Art Direction with Automation

Managing multiple image variants for art direction and format fallbacks can become complex at scale. Each breakpoint might require 3-4 format variants, meaning a single original image could generate 6-12 optimized versions. Automation tools can handle this complexity by programmatically generating all required variants from a single source image.

Automate image optimization with Optimagio

Doing this by hand for every image does not scale. Optimagio optimizes and converts your images (WebP and AVIF) automatically across your API, web app, and CMS — so every page ships the smallest possible files without manual work. See plans and pricing →

#AVIF#WebP#art-direction#html#performance#responsive-images
FAQ

Frequently asked questions

What is the difference between art direction and responsive images?

Art direction changes the image composition or crop for different viewports, while responsive images simply serve different sizes of the same composition. Art direction requires the picture element, while responsive images can use srcset/sizes.

Do all browsers support the picture element?

Yes, all modern browsers support the picture element. For older browsers, they'll simply use the fallback img element, making it completely backward compatible.

How many image versions do I need for art direction?

Typically 2-4 versions: different crops for mobile, tablet, and desktop viewports, plus fallback formats. The exact number depends on your design breakpoints and format support requirements.

Can I combine art direction with responsive images?

Absolutely. Within each source element, you can use srcset with multiple sizes of the same crop, combining art direction with responsive sizing for optimal performance.

What's the performance impact of using picture element?

The picture element itself has minimal performance impact. The main consideration is generating and serving multiple image variants, which can be automated with tools like Optimagio to handle format conversion and optimization at scale.

Keep reading