A new generation of Retina displays with high pixel densities is now on the market. Unfortunately, that means your website imagery could instantly become ugly and pixelated if you don't take action.
With the introduction of the iPhone 4 in 2010, Apple no longer measured its screens in pixels, but in points. The scaling factor of the screen changed, which determines how a point relates to a pixel. A Retina display now has a scale of two, so one point is equal to two pixels -- if you draw a one-point line, it shows as two pixels wide. If you're imagery isn't optimized to account for this, your product won't make a great first impression.
Most standard desktop displays fall between 96 to 100DPI, with web-ready graphics normally at 72DPI. However, Retina displays have a much higher DPI (generally acknowledged at 200 pixels per inch, or greater), so the images will look blurry if you don't make adjustments. It's therefore essential to ensure your website images are optimized to scale up properly.
We'll cover four approaches to convert your site to Retina, while ensuring its imagery looks great on all devices.
If you have found alternative solutions to serving Retina images, please share your recommendations with readers in the comments below.
1. CSS Sprites
One method to serve responsive Retina images is to use CSS Sprites. To cater for high-resolution displays, you need two images: a normal resolution (@1x) and a high-resolution image (@2x); this means doubling the number of files, selectors and references in your CSS.
However, if you use a CSS Sprite, "you only need to override the link to the @1x sprite file for all the selectors that include high-resolution assets," says Maykel Loomans, user interface designer at Instagram. This technique reduces network requests and stylesheet file size, an efficient process for creating Retina assets.
The CSS Sprite solution, though, is only for assets referenced in your CSS. For the images on your page, Imulus has developed Retina.js, a very useful plugin that checks your server to see if you have any image source with @2x at the end. For example, if you have an image on your page that looks like this: img src="/images/my_image.png, the script will check your server to see if an alternative image exists at this path: /images/[email protected]. It then automatically replaces images on your page with high-resolution variants. To use it, just place the Retina.js file on your server and include the script on your page at the bottom of your template, before the closing