HTML · Links and media

picture

Chooses between image sources based on media conditions or format support.

htmlRunnable example html course

Syntax

<picture>…</picture>

Example

Try it

<picture>
  <source srcset="https://picsum.photos/400/200" media="(min-width: 600px)">
  <img src="https://picsum.photos/200/200" alt="Responsive placeholder" width="200" height="200">
</picture>

Learn this in the course

Reference pages are the quick answer. The course explains the why, shows the full example and ends with a challenge.

Open the course

picture

Example

More in this group

Learn this in the course