Picture tag is a responsive image method to control which image resource a user agent presents to a user, based on resolution, media query, and/or support for a particular image format.

Browser Support

This feature is already supported by a few major browsers including Chrome, Microsoft Edge, and Opera.

Code Example

You can use a picture tag like this:

<picture>
  <source
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img
    src="images/kitten-curled.png"
    alt="a cute kitten">
</picture>

More Information

More information can be found here.