The picture element

Use picture when you need art direction: a different crop or composition for a different layout.

<picture>
  <source
    media="(max-width: 600px)"
    srcset="harbor-close-up.jpg"
  >
  <img
    src="harbor-wide.jpg"
    alt="Cyclists crossing the harbor bridge"
    width="1200"
    height="700"
  >
</picture>

On a small screen, the close crop keeps the cyclists visible. On a wider screen, the fallback img shows the full scene.

The browser reads source elements from top to bottom and uses the first matching one. The img element is required. It provides the fallback, alt text, dimensions, and other image behavior.

picture can also offer newer file formats:

<picture>
  <source srcset="harbor.avif" type="image/avif">
  <source srcset="harbor.webp" type="image/webp">
  <img src="harbor.jpg" alt="Cyclists beside the harbor">
</picture>

If you only need smaller and larger copies of the same composition, img with srcset is simpler.

Quick check

Result

You got of right.

Try again