Understanding Retina display

If you own an iPhone or an Apple computer (or actually, even if you don’t!) you may have heard the term  Retina display. A Retina display simply refers to a screen or monitor that has a greater density of pixels (px) embedded in it, allowing it to render text and images at a super high resolution. Content on a Retina display will look extraordinarily crisp, with colors feeling saturated and very life like.

“Retina display” is a marketing term coined by Apple; in truth, there are plenty of other high resolution screens available on the market. You may have even noticed televisions now available in “Ultra HD.”

Because of their higher pixel density in comparison to standard-resolution screens, Retina displays require images with more pixels in them. This ensures that images viewed on the display look crisp and clear. Images uploaded at standard resolution (sometimes referred to as @1x) will look slightly blurred, or fuzzy — like the camera lens wasn’t fully in focus.

So, why does Retina display matter for bloggers?

To accommodate readers who are viewing your site on a Retina display or monitor, you must upload images to your website that supply enough pixels to ensure the photograph looks crisp and clear — sometimes referred to as @2x.

How does this pixel density play out visually? Here’s an example:

The heart shaped icon on the left is 10px high by 10px wide. But on a Retina display, an icon of the same size has double the number of pixels for the same shape, making it 20px by 20px. Even with a close zoom on these two icons, it’s obvious that the image on the right is already crisper, clearer, and has much more detail than the image on the left.

Now, let’s apply this to your own blog.

If your blog post column is 600px in width, uploading an image that’s 600px in width will look good on older, standard definition monitors, but will render blurry to someone viewing the site on a Retina display. 

Instead, you’d want to upload the image at 1200px, or double the total space of the post column, so that there are more pixels available within the image when viewed on a Retina display. Because we’ve doubled the number of pixels, this is why these images are referred to as @2x.

Who knew you’d have to do so much math when managing images for your site, right? 

But truthfully, the formula is easy. Whatever the width of your blog column, simply double that number, and that’s how large your images should be. We use this as a baseline because it’ll cover images whether they are viewed on mobile devices or a 5k Retina display on a desktop iMac. You can save images as a JPG and reduce the quality to simultaneously reduce the file size as much as possible (remember: larger files slow down your website and also take up valuable space on your server!).