BrowseEmAll

Picture tag is a responsive images 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 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.