Art Direction with the picture Element — Different Crops for Different Devices

Q: Art Direction with the picture Element — Different Crops for Different Devices

## Art Direction with the picture Element Art direction goes beyond resolution switching. It means serving different image compositions — different crops, focal points, or even different images — based on the viewport. ### When to Use Art Direction - Hero banners that change from landscape (desktop) to square (mobile) - Product photos that zoom into the product on small screens - Team photos that switch from group shot to individual headshots on mobile - Infographics that use a simplified ver

Use the picture element for art direction: serve different image crops or compositions based on viewport width, not just different sizes.

Use Cases

Detailed Explanation

Art Direction with the picture Element

Art direction goes beyond resolution switching. It means serving different image compositions — different crops, focal points, or even different images — based on the viewport.

When to Use Art Direction

Hero banners that change from landscape (desktop) to square (mobile)
Product photos that zoom into the product on small screens
Team photos that switch from group shot to individual headshots on mobile
Infographics that use a simplified version on small screens

Basic Art Direction

<picture>
  <!-- Wide banner for desktop -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-wide-1024w.webp 1024w,
            hero-wide-1536w.webp 1536w"
    sizes="100vw"
  />
  <!-- Square crop for tablet -->
  <source
    media="(min-width: 640px)"
    srcset="hero-square-640w.webp 640w,
            hero-square-768w.webp 768w"
    sizes="100vw"
  />
  <!-- Tall portrait for mobile -->
  <img
    src="hero-portrait-640w.jpg"
    srcset="hero-portrait-320w.jpg 320w,
            hero-portrait-640w.jpg 640w"
    sizes="100vw"
    alt="Company team photo"
    loading="eager"
    fetchpriority="high"
  />
</picture>

How art-direction source Selection Works

With the media attribute, <source> selection is deterministic — the browser must use the first source whose media query matches. This is different from srcset/sizes where the browser has advisory flexibility.

Combining Art Direction with Format Negotiation

You can nest both strategies:

<picture>
  <!-- Desktop: wide crop, AVIF -->
  <source media="(min-width: 1024px)" type="image/avif"
    srcset="hero-wide.avif 1024w, hero-wide-1536.avif 1536w" />
  <!-- Desktop: wide crop, WebP -->
  <source media="(min-width: 1024px)" type="image/webp"
    srcset="hero-wide.webp 1024w, hero-wide-1536.webp 1536w" />
  <!-- Mobile: portrait crop, AVIF -->
  <source type="image/avif"
    srcset="hero-portrait-320.avif 320w, hero-portrait-640.avif 640w" />
  <!-- Mobile: portrait crop, WebP -->
  <source type="image/webp"
    srcset="hero-portrait-320.webp 320w, hero-portrait-640.webp 640w" />
  <!-- Fallback -->
  <img src="hero-portrait-640.jpg" alt="Hero" loading="eager" />
</picture>

Note that the number of <source> elements grows multiplicatively with formats × breakpoints.

Use Case

Marketing landing pages, editorial content, and any design where the image composition needs to change between mobile and desktop. Art direction ensures the visual message is preserved at every viewport width.

Try It — Responsive Image Srcset Generator

Open full tool →