Retina is misunderstood

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.

Check out this Pen!

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.

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.
  1. ❧ Rob shouted:
    2013/06/09 • 10:11 am

    Sorry but I think you misunderstand Retina.

    No one calls it “hippi” so that’s not helping. And the solution isnt just to ‘ask for SVG’.

    Very confusing article.

    1. Of course no one calls it HiPPI. That’s just how I think of it as as opposed to HiDPI which I have always associated with printing devices (the DPI part that is). Also I’m not saying the solution is strictly SVG, but suggesting devs ask for it where they can to help combat the problem especially when the asset in question can be created as an SVG from the start. Of course raster images like photographs are another completely different ballpark all together.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2013/05/23