All Articles Mac OSX
Retina Displays: A Detailed Look
Iain Anderson on Wed, January 16th 1 comments
Retina displays on the Mac and iOS platform are relatively new, and within the coming years every display is likely to be of such a high resolution. So, what is retina and how does it work?

So what’s all the fuss about? Well, if you’ve had an iPhone 4 or later, you’ll have noticed its smooth display of text and graphics. Essentially, four times as many dots as there used to be are now packed into the screen. Detail is greatly improved, and the term “retina” roughly correlates to “smaller dots that your eye can see at a typical viewing distance”. So how good is it? And how does it work?

Lots and lots of dots even add detail to simple arrows.


Four times the dots on an iOS screen

On an iPhone 3GS or earlier, the resolution was 320x480, but with the iPhone 4, each dimension doubled, to 640x960. (The iPhone 5 has now increased that further, to 1136x640, but that’s really just “more of the same” as opposed to greater detail.) The iPad (2012, aka iPad 3) pulled the same trick, doubling 1024x768 to 2048x1536. The new iPad mini has not made the Retina jump, and remains at 1024x768. Granted, the dots are smaller than before, but not as small as on a Retina screen. And now, a 13” or 15” MacBook Pro can come with a Retina screen if desired.

They’re all different sizes, but this compares how many dots each device has: 

Comparative dots


It just gets smoother

On iOS, and OS X with default settings, there is no increase in usable space with a Retina Display — just in clarity. Four dots on the new display take the place of one dot on the equivalent original display, and the additional dots are used to render text and images more finely. Therefore, on the MacBook Pro 13”, its 1280x800 screen is now a 2560x1600 pixel screen, and the apparent resolution (dots per inch) has now doubled. In OS X, this is also known behind the scenes as HiDPI mode.

Before and after, looking at the menubar.

Before and after, looking at the menubar.

What retina-ready apps do

This magic doesn’t come for free, though. Text is easy, and if an app uses the built-in text drawing routines, it just gets smoother. Images are harder, though. A developer needs to provide double-size versions of graphical buttons, images, toolbar icons and so on, to make sure they look good on a Retina Display. If they don’t, the slight chunkiness to the non-Retina graphics stands out, like a low-resolution image on a printed page.

To make it more complex, apps that create their own complex images need to render to the actual pixels in the display. Of the major creative apps, Final Cut Pro X, Aperture, Lightroom, Premiere, Illustrator and Photoshop are all now Retina-ready, and the other Adobe CS apps are to be updated soon.

Why yes, that is a full HD video shown at 100%, taking up only part of the screen.

Why yes, that is a full HD video shown at 100%, taking up only part of the screen.


Up the res!

While it’s nice to see everything more clearly, I would prefer to compromise the smoothness just a little and get more usable screen real-estate instead. Surely, with 2560x1600 real pixels, I can see more than 1280x800 old-style pixels, right? And yes, yes you can. In System Preferences, under Displays, you can choose Best for Retina Display, or push to a virtual resolution that “looks like” 1440x900 or 1680x1050. With these, an app’s interface elements will get smaller as the resolution increases. It’s a trade-off: smaller dots for more of the interface. And it is just “interface” that you’re getting more of; with native apps, you’re always using the full 1:1 resolution for the image data. If you live in Aperture or Lightroom’s full screen mode, it’s not going to make much difference what you choose.

Send it as small as I can read, please.

Send it as small as I can read, please.


How does that work?

It’s very sneaky. Behind the scenes, OS X renders a double-size version of whatever “virtual” size you chose, then scales it back down to fit the screen. So, if you choose 1680x1050, it’s really rendering a mammoth 3360x2100 pixels behind the scenes. All the time. It could affect performance, and Apple warns you that it could, but I haven’t had any problems myself, and I run in that mode on my 13” all the time.


What’s not Retina-ready?

Lots of websites, for starters. Many websites will likely never be updated, but the more graphics they use, the worse they’re likely to look. Text is perfect, but graphics will stand out badly. If you’re a web designer yourself, it’s easy: double the size of your graphics in each dimension, but don’t change your code. A graphic that’s placed as width=”200” height=”150” should really be 400 pixels wide and 300 pixels high to look good. Of course, you’ll need higher-resolution source images to be able to generate those newly detailed images, so you might need to recreate some elements. If your sources are vector-based, you’re fine.

This website header graphic has been optimized, but the city behind is has not, and text still looks fine.


What apps aren’t Retina ready?

Much of the Creative Suite is not yet Retina-ready. However, Photoshop, Premiere and Lightroom are already ready, and the rest of CS6 is due to be updated soon. In general, older apps can cause problems.

It’s not a total disaster for most of these apps; graphics will generally be a bit chunky but if you’re not using it all the time it might not bother you. Twitter for Mac, however, uses custom text drawing methods and looks pretty terrible. Tweetbot, and a third-party hack of the official Twitter client, are both Retina-friendly.

Still, if you can’t tolerate your old app’s chunky graphics, you might have another option.

I can’t look at this!

I can’t look at this!


One to One

When you can't tolerate even slightly-chunky scaled graphics — and you might be reluctant to in Photoshop, Illustrator, or InDesign — you can use the actual resolution of your display in "1:1 mode". Download the QuickRes app, and you’ll be able to use every pixel on your display. In the preferences, you can choose two resolutions to switch between. I have pretty good eyesight, so I’ve chosen 2560x1600 and 1680x1050 HiDPI.

In that “native” resolution mode, everything looks perfect, but the interface is tiny. If you don’t have great eyesight, you won’t be able to read the text on the buttons, let alone click on them. Think of it as a good opportunity to learn the shortcuts, and you might have a better time. It’s the resolution of a 30” Cinema Display in 13 inches. Insane. Awe-inspiring.

And that’s the same video as before, still at 100%, but with a tiny interface around it.

And that’s the same video as before, still at 100%, but with a tiny interface around it.


Conclusion

Retina is absolutely the future: higher-detail displays that look better than the printed page. If you’re used to how your new iPad or iPhone looks, you’re likely to love a Retina Display. I’m never going back, and it’s difficult to live with my desktop 1920x1080 displays now that I’ve experienced Retina.

Just look at Illustrator’s Brushes panel!

Just look at Illustrator’s Brushes panel!


It’s a one-way trip, a visual experience similar to the speedy joy of using a solid-state boot drive. Since the Retina MacBook Pro has both Retina and an SSD, it’s the best of all worlds. If you’re coming to a Retina MacBook Pro from a spinning disk on a non-Retina Mac, you’ll be blown away. To see it is to desire it.

Before you look at one, make sure you can afford it. Then, say your last goodbyes to your old Mac, because you won’t want to look at it any more.


Related Videos
Comments (1)

You must be logged in to comment.

  • Jeff
    I appreciated the clarity of your writing in this informative article, thanks. Jeff in Houston
    • 6 years ago
    • By: Jeff
    Reply
Mountain Lion
Mac OS X (10.8) 101
Dream It. Do It.
Do you want to learn Mountain Lion?
Yes, I want to learn!
No Thanks, I just want to read the article.
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: