Blog

How Do I Make Retina Images for My Website?

Posted by in Design, Web Development tagged with

graphic showing device pixels at x2 times and x4 times

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. Everyone who makes things for digital devices should be thinking about Retina images because it’s important that images look clear 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:

  1. Defining Retina
  2. Making Retina images
  3. Implementation best practices

Let’s dive in!

Defining Retina

“Retina” is the 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.

graphic of the mightybytes logo under a magnifying glass to see the individual pixels

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.

enlarged bitmap image of nicholas cage looking unsurprisingly shocked and confused

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) — it’s 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

Use Retina.js. This is pretty fail-safe and uses JavaScript to detect a Retina Displays. However, requests for every image on the page will be sent to the server which in turn requires a lot of bandwidth (not efficient for performance or sustainability). Also, since this is a client-side solution; Retina devices will download both the Retina and non-Retina image. If you have a website with a ton of images, this could slow everything down significantly

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 in my opinion these 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 should website administrators wrap their heads around all this? I have found that the best thing to do is to explain 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:

Conclusion

I hope that this has cleared up any confusion you may have as a designer or a developer. Making websites accessible to all devices is an important to Mightybytes. For more information about our web design and development services, contact us today.

Mightybytes is a full-service digital agency in Chicago and a certified B Corporation. Connect with us on Twitter, Facebook and Pinterest or fill out our contact form.