0Pricing
HTML Academy · Lesson

The picture Element for Art Direction

Swap entire images based on viewport conditions.

Art Direction Problem

Art direction means serving a fundamentally different image crop or composition depending on screen size:

  • Full landscape photo on desktop
  • Zoomed-in portrait crop on mobile
  • This cannot be solved by srcset + sizes alone

The picture Element

The <picture> element wraps multiple <source> elements and an <img> fallback:

<picture>
  <source media="(min-width: 800px)" srcset="wide-crop.jpg">
  <source media="(min-width: 500px)" srcset="medium-crop.jpg">
  <img src="narrow-crop.jpg" alt="Team photo">
</picture>
<!-- Browser picks the first matching source -->
<!-- img is required as fallback and carries the alt attribute -->

All lessons in this course

  1. The img Element src alt width height
  2. Responsive Images with srcset and sizes
  3. The picture Element for Art Direction
  4. figure and figcaption
← Back to HTML Academy