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 naturally 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!).
But wait, there’s more.
The Retina story won’t end here. With the launch of Apple’s iPhone X, a new “Super Retina” display has been announced. The pixel density on the screens of these phones will be a whopping 1125px × 2436px in portrait mode. That’s more pixels than some older standard-definition monitors!
Currently, Apple is recommending images uploaded @3x to accommodate images served on these screens. You don’t necessarily need to start uploading your images this large quite yet; instead, we recommend keeping an eye on your Google Analytics to see how users access your website. If the vast majority surf your site from an iPhone 8 or earlier, don’t worry about sizing images @3x. If you notice a large percentage of users accessing the site on a screen that’s 1125px × 2436px or 2436px × 1125px, this could indicate many of your users reading your site from an iPhone X, and sizing your images @3x makes more sense.