We were looking for a neat way to handle high resolution images for devices that can benefit from them and have discovered a handy solution in the form of retinaimag.es.

Using just a small snippet of js code and a few other bits and bobs, it determines if you’re viewing the site on a retina device and swaps in a high resolution version of the image instead. There are a few key components to get it to work.

  1. A couple of rules added to your .htaccess file.
  2. A PHP script to serve the high resolution image.
  3. A JS/CSS snippet to set the devicePixelRatio cookie value

Rather than me just repeating what their site says, I suggest you take a look. The only other requirement is needing to set a width attribute for img tags, but you should be doing this anyway for various other reasons, even when using responsive images which sometimes are required to go 100% width.

To try it out I’ve added it to this site for our news section (I’m yet to see how well this combines with my other foray into the world of AMP). In order to utilise the script I just needed to make a quick update to our CMS to save off a high resolution version of the news thumbnail images, but thanks to the image resizing library we use that’s easy enough to achieve. High resolution images just have @2x added to the filename just before the file extension and are saved alongside the existing thumbnails at x2 resolution.

One thing is for sure, with retina devices and responsive websites, effectively using images on websites has gotten a lot more complicated and is a huge topic in itself, but this could be another useful tool in your web dev arsenal to help create beautiful websites for all devices.