In my previous blog post on responsive website design, I talked about designing for multiple device widths.
Hardware manufacturers have thrown a curve ball into the works by making their screens too good. A new challenge which web designers have to face is designing for high resolution screens. This article discusses the new work needed and a handy little cheat sheet to help you get started.
High resolution displays are quickly growing in prominence, meaning fancy crystal-clear content for end-users and a whole new set of headaches for designers. I would estimate the proportion of high-res display users at under 10% of the total internet population. It’s difficult to find a definitive figure for this, as the data seems to be scarce and the number is constantly increasing. Needless to say, even at under 10%, that’s a LOT of users!
Every designer and front-end developer knows that we need to start supporting these new-fangled “Retina” devices. (I’ll refer to them as Retina or high-res for the sake of argument, but I’m generally referring to any device with a pixel density greater than 200 ppi. Please don’t sue me Apple).
I’m not going to ramble on about why we need to start doing extra ground work to get content looking pretty on Retina. There are plenty of handy articles out there already, which go over all the ins-and-outs of high-res displays. Instead, I want to make a simple, concise cheat-sheet which serves as to-do list for designers and devs when optimising for Retina displays.
Tasks | ||
Graphic Format | Graphic Designer | Front-end Developer |
PNG | Make each vector image asset double the size, save as PNG-24. If the down-scaled image is blurry or unreadable, make a second smaller copy at the original size. See example below… | Add the PNGs as background images. The normal version sits in the CSS, the Retina version inside the pixel ratio media query (inside HTML5 boilerplate main.css) |
JPEG | Use images which are double the resolution (or as close as possible), reduce JPEG quality to 25% | Check your JPEG images on IE9 for aliasing issues. |
GIF | Convert to PNG. | Twiddle thumbs |
SVG | No extra work needed! SVG is great 😀 | Make a PNG fallback for IE 8 or earlier and Android 2 or earlier |
Favicon | Make a single favicon.ico file which includes a 16x16px and 32x32px version using X-icon Editor | Add the favicon.ico to your website’s root directory and add the link tag in the CSS. |
Touch icons | Make a 57x57px, 72x72px, 114x114px and 144x144px version of your icon | Add the touch-icon link tags in your CSS, (note: they also come with H5BP…) |
Animated GIF | Create a double-sized version and a second normal-sized version if the downscaled version is blurry | Watch a cat fighting a baby |
Canvas | Go get a coffee | Use some clever JavaScript to check the device pixel-ratio, adjust canvas width and height based on the ratio. Provide a fallback for browsers which don’t support canvas. |
Example: PNG optimization

Save the vector image at double the width and height

…and the normal version if looks blurry when scaled down

Then name the images appropriately…
.retina-friendly-example { background: url(../img/retinafy-example.png) no-repeat; } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { .retina-friendly-example { background: url(../img/retinafy-example@2x.png) no-repeat; } }
…and add the background image in the CSS
Extra notes:
- Always use CSS where possible, eg. linear gradients can be added easily with cross-browser fallbacks. This will save you requests and will be much easier to maintain.
- Images are presentational, keep them out of the HTML as much as possible.
- You may have a lot of images to optimize, consider using an automator to run batch processes on large groups of images. Use Fireworks, Photoshop or an automation app (eg. Automator built-in to Mac, Action(s) for Windows).
Some important considerations
Think about your content. For example; if your site/app doesn’t contain many images, then it’s probably not worth going to the trouble of adding Retina support. If you’re dealing with a big site with millions of images, introducing Retina support may be a difficult, time-consuming and costly process.
Another factor to consider is your audience, maybe some of your images are going to look a little bit pixelated on a Retina display. Supporting high-resolution screens isn’t exactly a trivial task, so if slightly blurry images aren’t going to be an issue for your users, it may not be worth optimising. Look at your analytics and user feedback, see what proportion of your visitors are using high resolution devices.
Reasons to get retinafying right away
The number of users viewing content on high-res screens is steadily increasing, and no doubt will keep increasing. Over the next few years we will see a shift to high pixel-density screen manufacturing in nearly all electronic devices, along with an increase in user expectations.
One very good reason to start Retina support is that it’ll help to make your projects future-proof. Okay, it’s not necessarily going to look good on the iPad 23 with it’s 72 inch 3D hologram screen… but it’ll keep your site looking crisp as the world transitions to higher resolution screens over the next few years.
I’d like to extend a big thanks to Thomas Fuchs, author of Retinafy your web sites & apps.
Need help with your next responsive website?
Designing with Retina support for a fresh new project is pretty straightforward, implementing it half way through… not so easy. If you do have an existing site which needs to be retinafied… well come and talk to us!
Responsive is a trend that more people are going to start to pick up on. More and more people are wanting mobile sites as well. This is a perfect fit for them. Thanks Jonathan for sharing the link. 🙂