<picture>

Responsive image container.

The `<picture>` tag gives web developers more flexibility in specifying image resources. It allows you to define multiple `<source>` elements for different screen sizes or formats, with an `<img>` tag as a fallback.

Live Example & Code

Preview Output

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Open in Playground