Media attribute

Switch images per screen with <source media="...">.

What is the media attribute?

Adding a media attribute to a <source> tells the browser which screen condition should pick that source. The value uses the same syntax as a CSS @media rule.

For example, media="(max-width: 600px)" fires only on narrow screens, media="(orientation: portrait)" only when held upright. The browser picks the first source whose condition matches and skips the rest. So order matters: put specific conditions first, general ones last.

What is art direction?

Art direction means showing different crops of the same scene on different screens. A wide landscape works on desktop; on a phone the people in it become too small. So you serve a tighter crop that pulls faces closer.

With srcset only the resolution changes, the crop stays the same. With <picture> and media the crop itself changes. So srcset swaps the size of the same image; media with <picture> swaps the image itself.

Exercise Write two sources, media and an img

Add a <picture> to body. Put two <source> tags inside: the first with media set to (min-width: 800px) and srcset set to news-wide.jpg; the second with media set to (max-width: 799px) and srcset set to news-narrow.jpg. Finish with an <img> whose src is news-narrow.jpg and alt is News image.

Show example solution

<body>
  <picture>
    <source media="(min-width: 800px)" srcset="news-wide.jpg">
    <source media="(max-width: 799px)" srcset="news-narrow.jpg">
    <img src="news-narrow.jpg" alt="News image">
  </picture>
</body>

Test yourself

When is <source media="(min-width: 800px)"> picked?
- When the viewport is at least 800 px wide
- When the viewport is at most 800 px wide
- When the image weighs at least 800 bytes
- When the browser has loaded for 800 ms
Show answer

When the viewport is at least 800 px wide — Correct. min-width: 800px means the viewport is at least 800 px wide.

Write the media attribute on source

<picture>
  <source ____="(min-width: 768px)" srcset="hero-wide.jpg">
  <img src="hero-narrow.jpg" alt="Hero image">
</picture>

Show answer

<picture>
  <source media="(min-width: 768px)" srcset="hero-wide.jpg">
  <img src="hero-narrow.jpg" alt="Hero image">
</picture>

Match each media query to its meaning

(min-width: 800px)

At least 800 px wide
(max-width: 600px)

At most 600 px wide
(orientation: portrait)

Held upright
(orientation: landscape)

Held sideways

Next lesson: Type attribute

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies