0Pricing
HTML Academy · Lesson

The picture Element for Art Direction

Swap entire images based on viewport conditions.

The picture Element for Art Direction is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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 -->

How picture Works

The browser evaluates <source> elements in order, top to bottom:

  1. Check first source's media condition — if it matches, use that image
  2. Check second source — if it matches, use that
  3. Fallthrough to <img> as default

The <img> element still displays the chosen image and carries the alt text.

Format Switching with picture

<picture> can also select image formats based on browser support:

<picture>
  <!-- AVIF: best compression, newest support -->
  <source type="image/avif" srcset="photo.avif">
  <!-- WebP: great compression, wide support -->
  <source type="image/webp" srcset="photo.webp">
  <!-- JPEG: universal fallback -->
  <img src="photo.jpg" alt="Mountain photo">
</picture>
<!-- Browser picks the first format it supports -->

Combining Art Direction and Format

You can combine media conditions and format selection:

<picture>
  <source
    media="(min-width: 800px)"
    type="image/webp"
    srcset="hero-wide.webp"
  >
  <source
    media="(min-width: 800px)"
    srcset="hero-wide.jpg"
  >
  <source type="image/webp" srcset="hero-mobile.webp">
  <img src="hero-mobile.jpg" alt="Hero image" width="1200" height="600">
</picture>

The img Is Required

The <img> element inside <picture> is not optional:

  • It displays the selected image
  • It carries the alt text for accessibility
  • It carries width, height, loading, and other attributes
  • Without it, nothing is displayed

source media Attribute

The media attribute accepts standard CSS media queries:

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="portrait.jpg" alt="Scene">
</picture>

<!-- Other media features work too: -->
<!-- (prefers-color-scheme: dark) -->
<!-- (min-resolution: 2dppx) -->
<!-- (max-width: 600px) -->

source srcset with Responsive Selection

Combine art direction with srcset for full control:

<picture>
  <!-- Desktop: wide hero, multiple resolutions -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1024.jpg 1024w, hero-2048.jpg 2048w"
    sizes="100vw"
  >
  <!-- Mobile: portrait crop -->
  <img
    srcset="hero-mobile-400.jpg 400w, hero-mobile-800.jpg 800w"
    sizes="100vw"
    src="hero-mobile-400.jpg"
    alt="Conference keynote speaker on stage"
  >
</picture>

Dark Mode Images

Serve different images for dark mode users:

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="logo-dark.svg"
  >
  <img src="logo-light.svg" alt="Company logo" width="120" height="40">
</picture>
<!-- Users with dark mode OS setting see logo-dark.svg -->
<!-- Everyone else sees logo-light.svg -->

picture vs CSS background-image

When to use <picture> vs CSS backgrounds:

  • Content images — use <picture>: needs alt text, part of document content
  • Decorative images — use CSS background-image with media queries
  • SEO-important images — always use <picture>: crawlers index img elements

Accessibility Note

The alt attribute always belongs on the <img>, not on <source>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- alt goes on img, not source: -->
  <img src="photo.jpg" alt="Sunset over the Pacific Ocean">
</picture>
<!-- screen readers read img's alt, whichever source was selected -->

Lazy Loading with picture

Add lazy loading to the <img> inside <picture>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img
    src="photo.jpg"
    alt="Gallery photo"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

Quick Check

Which element in a picture block must always be present and carries the alt attribute?

Recap: picture Element

Art direction with picture:

  • <picture> wraps <source> elements and an <img>
  • Browser picks first matching <source>
  • Use media for viewport conditions, type for format selection
  • <img> is required — it displays the image and carries alt text
  • Combine with srcset + sizes for full responsive control

Frequently asked questions

Is the “The picture Element for Art Direction” lesson free?

Yes — the full text of “The picture Element for Art Direction” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “The picture Element for Art Direction”?

Swap entire images based on viewport conditions. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The picture Element for Art Direction” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

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