What is retina display?Retina is a high-density resolution display. It produces crisp images by doubling the pixel density in the same amount of space as a normal computer monitor. As you can see in the screengrabs posted below, the amount of pixels in the retina display is drastically different than the normal display on the iPhone. The retina display is sharper, displaying a more vibrant image and crisper typography.
The first example below shows a non-retina display image. When a user zooms in on the logo, the edges of the graphic are blurred and muddy, which doesn't show the image off at its full potential. The second image is the website viewed on a device with a retina display with the logo optimized for this format. The result, when zooming, is detailed and adds to the overall beautiful experience of the website.
|Example of an optimized website viewed on a device with a non-retina display.|
|Example of an optimized website viewed on a device with a retina display.|
SolutionsThere are several solutions for optimizing websites for this improvement in browsing technology. These small changes in web development can impact the way your website is viewed on a high density display.
This solution involves targeting images in the stylesheet for both a normal display and retina display. The regular image is loaded at first, then switches out for the higher resolution image should the device request it. This solution is good for any website or app that uses the background-image property, but does not support inline images.
@font-face image fonts
This solution is specific to scenarios when there are a large amount of icons on a website. Similar to the above technique, when the webpage is loaded, the icons will automatically resize themselves.
- Smashing Magazine – Towards a Retina Web
- Net Magazine - Tips and Tricks for Retina Optimization
- A List Apart - Mo' Pixels Mo' Problems