3 Solutions For Serving High-Res Images To Retina-Display Devices

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:

Retina Images

Retina Images is a JavaScript/PHP solution which stores the devicePixelRatio in a cookie and displays the high-res version of images (if exists) by checking whether that cookie's value is 1 or not (if 1, then the device has a retina screen).

With a simple setup, it works on images that defined in both CSS and HTML.

Retina.js

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.

jQuery Retina Display Plugin

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).