Mightybytes developer Stephanie Daniels offers a concise explanation of what Retina is, how to make images for it, and why it’s all so darn confusing.
Retina seems to be a point of uncertainty among web developers and graphic designers because of the confusion over what Retina means, how to make Retina images, and where Retina images should be used. What Retina means for sustainable web design adds another layer of complication. (At Mightybytes we’re all about sustainable, well-performing websites. See how your website ranks by using our tool EcoGrader.com)
But Retina images are something everyone who makes things for digital devices should be thinking about. It’s important how clear things look on every screen, not just your own.
In this post I’ll break down the complexities of Retina so you can spend less time trying to figure out what it all means and more time actually making things. I’ve broken this out into three parts:
- Defining Retina
- Making Retina images
- Implementation best practices
Let’s dive in!
“Retina” is medical term for part of an eyeball, but that’s not what we’re talking about here. The “Retina” we are talking about is a trademarked use of the word by Apple, Inc. to describe the pixel density of a screen wherein it is difficult for the human eye to discern a single pixel. (I’m assuming you know what a pixel is. If not, here’s a quick explanation.)
In other words, “Retina” describes really sharp and clear screens that can cram in lots and lots of pixels.
For the purpose of this post, when I say “Retina display,” I am describing device screens with a high enough pixel density that everything looks sharp to the human eye. When I say “Retina image,” I’m describing an image that has been made specifically to look sharp on a Retina display.These are two different things.
Some geeky stats about Retina display
The sweet spot for sharp-to-the-human-eye Retina displays is somewhere around 300 pixels per inch (PPI) according to Apple, Inc.
An iPhone 3GS’s display has 163 PPI (not Retina) vs. iPhone 4’s display which has 326 PPI (Retina). These number seem random, but they aren’t: 326 PPI equals 2 x 163 PPI.
These numbers seem even less random when we convert to the metric system as pixels per centimeter (PPCM): 64 PPCM and 128 PPCM, respectively. Any computer nerd or mathematically-inclined person should recognize those numbers! If not, they are powers of two, baby! (If you’re still confused, or intrigued, or want to know more about why these numbers were picked, ask an engineer! Or ask The Google, there’s answers in there, too.)
Ok, you may still be confused. I get it. Numbers are hard to visualize.
Let me break it down like this: the pixel density of a display describes how many pixels can fit horizontally or vertically into a physical space on the screen. The units used to measure this may be used interchangeably (PPI, PPCM, etc.), but the concept is the same. The more pixels you can pack into a physical space, the sharper everything looks.
Making Retina Images
Measuring images in a graphics program to ensure they’re dense enough for Retina
When you can, use vector-based images (SVG) or replace images with CSS. These formats are always scalable thanks to the mathematical data contained within them and are able to stretch to fit the PPI/PPCM of any display screen without sacrificing image quality. If you’re using SVG or CSS for images, congrats! You’re Retina-ready.
Where we get in trouble is when we use bitmap images. A lot of common image formats store bitmap images such as JPEG, TIFF, PNG, and GIF. Bitmaps are images constructed by little points called pixels, not mathematical points like vectors. With bitmaps a pixel’s size is constant. This means that bitmap images are not scalable. You’ve probably come across this problem if you’ve ever tried to make a bitmap image bigger and realized that the larger version of the image looks, well, pixelated. This is because the individual pixels are being stretched out into bigger areas. It’s like getting a tattoo when you’re in peak shape then gaining weight and having the tattoo look stretched out. The tattoo has set-in-stone ink point sizes and if the skin stretches, so do the points.
Now that we know that vector images can be stretched because of math magic and that bitmap images are really only a collection of pixels, let’s move on to talk about how a bitmap image gets interpreted by a Retina screen.
How bitmap images get interpreted by Retina screens
The output area of one pixel on a typical Retina display screen actually fits four bitmap pixels. This is why Retina screens are considered pixel dense. On a Retina display, each pixel in a bitmap image is stretched into an area of four pixels (2 x 2) — the reason bitmap images that look sharp on lower pixel density screens and look “fuzzy” on higher pixel density screens.
How to optimize bitmap images for Retina display
If you want a bitmap image that is 100px by 100px to look sharp on a Retina display, you’ll need to provide extra pixels for the Retina display to work with. This is done by making the bitmap image twice as big to begin with. (In this case we’d make the initial image 200px by 200px.) The next step involves using some programming to take the big image and scale it down to the desired 100px by 100px size.
Retina Implementation Best Practices
How to programmatically shrink large bitmap images down for Retina devices
The ideal thing to do is to make two images for every image on your site: a big image that is loaded on Retina displays, and one that is half the size which is loaded on non-Retina displays. This way, there is always a faster loading fallback image should you need one. The fallback should always be the smaller-sized image.
There are many ways to accomplish this. But some are better than others.
The okay option
The better option
Use a server-side script like Retina-Image to serve the appropriate Retina or non-Retina image to the screen.
There are many other options, but these are the ones I know of so far that are the most efficient. If you are a developer, making your own server-side method for serving the right image may be better than any of these options.
How to use Retina images in a content management system (CMS)
How will content entry people be able to wrap their heads around all this? I have found that the best thing to do is to explain to content entry people that their initial images will need to be twice as large as the size they really want. In the Content Management System (CMS), it is best to define the minimum size requirements of the image entry fields so there is always a Retina image available. After a content editor uploads a large image, you can let the CMS take care of processing, compressing, and resizing the image for both Retina and non-Retina devices.
There are some plugins available for many that do the dirty work for you. Here are a couple I have used that work well:
I hope that this has cleared up any confusion you may have as a designer or a developer. If there is something that you still have a question about please engage in conversation with me in the comments section below. I’d also love to hear about any other methods anyone has come up with to manage Retina or any tools that anyone has found particularly useful.