srcset -x to swap resolution-x syntax instructs the browser to load a different image based on the reported density of the screen display.
This was the first and is the simplest way of achieving “high resolution” images in HTML. However, its use is severely limited. It only makes sense to use on images with a fixed resolution as it does not take into consideration image display size.
If you have loaded the 2× image on a high-PPI screen or through PPI emulation, depending on browser it will be used in preference of the 1× image. This is true even if you then revert to displaying it on a low-PPI screen. It is also true even if both sizes have been cached – the larger one prevails. The only way to reset this is to clear the browser cache.
Certain browsers, will load a high-PPI image if you zoom the page using the browser page zoom controls. Depending on the browser, you may need to zoom and then refresh the page to observe this behaviour.
<img src="img-320.png"
srcset="img-640.png 1x,
img-1280.png 2x">
To reiterate the point above, note that this image below uses the image code but is set to 100% width. On larger screens, you can observe that the same image has loaded as above. As above the 2× image does not load unless the screen is also identified as high-PPI. Once it has been loaded it will be used regardless of density.
<img src="img-320.png"
srcset="img-640.png 1x,
img-1280.png 2x">
Chrome 46 Firefox 42 Safari 9 Edge 12 Edge 13 Android Chrome 44 iOS Safari 9