Use image-set to provide high res images
image-set() function in CSS enhances the behavior
making it easy to provide multiple image files for different device
characteristics. This allows the browser to choose the best image depending on
the characteristics of the device, for example using a 2x image on a 2x display,
or a 1x image on a 2x device when on a limited bandwidth network.
In addition to loading the correct image, the browser will also scale it
accordingly. In other words, the browser assumes that 2x images are twice as
large as 1x images, and so will scale the 2x image down by a factor of 2, so
that the image appears to be the same size on the page.
image-set() is still new and is only supported in Chrome and
Safari with the
-webkit vendor prefix. Care must also be taken to include a
fallback image for when
image-set() is not supported, for example: