HTML <picture> tag

example

How to use the <picture> tag:

<picture>
  <source media="(min-width:650px)" srcset="/i/photo/flower-4.jpg">
  <source media="(min-width:465px)" srcset="/i/photo/tulip.jpg">
  <img src="/i/photo/flower.gif" alt="Flowers" style="width:auto;">
</picture>

Definition and usage

<picture> Tags give web developers more flexibility in specifying image resources.

<picture> The most common use of elements is for art direction in responsive design. Instead of scaling one image based on viewport width, multiple images can be designed to better fill the browser viewport.

<picture> The element contains two tags: one or more  <source>  tags and an  <img>  tag.

The browser will look for the first <source> element with a media query that matches the current viewport width, and display the correct image (specified in the srcset attribute). The <img> element is the last child of the <picture> element and acts as a fallback if no source tag matches.

Tip: The <picture> element acts like