×

html · level 3 · unit 2 · lesson 1

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

<picture> swaps in a different picture for each screen.

srcset offers sizes of one picture. Sometimes you want a different picture: a wide shop banner on a laptop, but a tight of the logo on a phone, where the banner would be tiny. Choosing pictures like this is called .

Wrap an <img> in <picture>. Before it, add a <source> for each special case, with a media condition in media and the file in srcset. The browser uses the first <source> that matches.

The <img> goes last and is required. It is the fallback, and it carries the alt, width and height for whichever picture is chosen.

<h1>Pip's Plants</h1>
<picture>
  <source media="(min-width: 800px)" srcset="tree.svg">
  <img src="logo.svg" alt="The Pip's Plants shop" width="400" height="400">
</picture>

Press show my page to see it here.

<source> is an empty element, like <img>, so it never has a closing tag.