HTML Academy · Lesson

The picture Element for Art Direction

Swap entire images based on viewport conditions.

Lesson 3 of 414 steps

The picture Element for Art Direction is a free HTML Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.

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:

Check first source's media condition — if it matches, use that image
Check second source — if it matches, use that
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?

Answer it in the interactive lesson

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

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the HTML Academy learning path, including “The picture Element for Art Direction”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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

← Back to HTML Academy