I noticed how poor the internet seemed to look on Apple’s retina iPad, and for whatever reason this new retina MacBook Pro seems to have more people focused on the issue of retina graphics and the internet. I happened upon two nice-looking solutions (Retina Images and retina.js) and implemented Retina Images on this site. I chose it over the latter because it serves the desired image once and works with CSS background images.
Retina Images gets the device pixel ratio and stores it in a cookie. Every image request is routed through a PHP file, which evaluates the cookie and whether a 2x image equivalent exists in the filesystem. The correct image is then returned. If any part of the process breaks (no cookies, for example), the original image is served. Pretty clever! The Retina Images site has instructions for setup, so all I have left are a few tips:
- Make sure your “@2x” images are exactly double the pixel dimensions (not the dpi).
- Hope that your source Photoshop files use smart objects liberally. Bonus points for having them already snapped to the nearest pixel.
- The Retina Images PHP file has a handy (and optional) debug log that you can switch on if things aren’t working out quite right.
It seems likely that future specs will make room for device resolution, but Retina Images can at least take some of the ugly out of the internet today.