The srcset attribute allows authors to define various image resources and “hints” that assist a user agent to determine the most appropriate image source to display (e.g. high-resolution displays, small monitors, etc).

Browser Support

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

Code Example

You can use Srcset attribute like this:

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,image-3x.png 3x, image-4x.png 4x">

More Information

More information can be found here.