As you can tell from the title of this post we’re gonna talk about retina and most importantly, that it’s not called retina. Why you ask? Well, because it’s a buzzword from Apple so instead let’s call it hidpi because that’s more appropriate, but even then I still don’t like that term. The reason is “dpi” actually stands for “dots per inch” and our screens are in pixels…or at least that’s how I think of them as. I would rather call it hippi which replaces “dots per inch” with “pixels per inch.” DPI is used by printers so that’s why it always confuses the hell out of me when we talk about computer screens.
My current concern is that the majority of articles titled something like “How to make your website retina ready” are a bit misleading. Most of them provide great examples and in-depth discussions with beautiful screenshots, but make it appear that once you have a 1x image you can just scale that up from there and call it a day. I want to clear up that last part in order to understand what it really takes to make your images look good on hidpi devices.
For this example we’ll take a look at an image(raster) used inline and as a background using css. Both images are 29px x 32px and let’s pretend this is the only image your designer has given you.
As you can see from the demo (using a hidpi device of course), our original scale (29 x 32) for this image isn’t gonna do us any good. We need a much larger version to start with (58 x 64) in order to combat the situation otherwise the image is expanded on hidpi devices (using 29 x 32 as the original would scale up to 58 x 64) which in essence is stretching the pixels in order to guesstimate and replace those missing pixels for larger sizes.
The moral of the story is as follows; The next time your designer hands you something of this nature we’ve discussed and expects there to be magic, walk right back to that designer and ask for SVG if you can (or explain why a smaller image is no good).
I highly suggest watching this video from Google IO 2013, but do keep in mind that you cannot scale up a raster image and then scale it back down for hidpi as this will always result in fuzzy images. You need the largest version first or else you’re sol. Confused? Got Questions? Remarks? Leave a comment. Bill Collector? I’m away from my desk, but I will return shortly.