With the regularly increasing number of retina-screen devices browsing web pages each day, we may want to display images with better quality to such devices.
Here are 3 easy-to-use solutions for serving high resolution images to retina-display devices:
With a simple setup, it works on images that defined in both CSS and HTML.
This open source script checks for every image on the web page to find out if there is any high-res version hosted on the server.
If such an image exists, it swaps that with the original one.
P.S. For the high-res images, It looks for the Apple's prescribed high-resolution modifier (@2x) version.
This jQuery plugin also follows Apple's prescribed high-resolution modifier (@2x) format, searches for the high-res versions and replaces them with the original one if exists.
It is a plug 'n' play solution, nothing to edit (just add the high-res versions of the images to the same folder with other images).