Cross-Browser Picture Tag
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.
This feature is already supported by a few major browsers including Chrome, Microsoft Edge, and Opera.
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 can be found here.