So I have a new MacBook Pro with Retina display. It looks great. But there is one problem: I don’t get what I expect when I take a screenshot – everything is twice the size I expect!
What is going on?
Well, on the 15-in Macbook Pro, the native screen resolution is 2880×1800 pixels, a pretty huge display – significantly larger than the 2560×1440 on my 27in iMac at work. Running a normally-sized user interface (UI) at that resolution would look tiny. Instead, Retina displays scale the UI, using several pixels where other displays would just have one. With appropriate smoothing applied, this leads to a beautiful-looking display, with no visible pixels at a normal viewing distance.
Since the relationship between pixels and apparent size has become fairly unclear the control panel for retina displays no longer offers a variety of pixel-based resolutions, instead offering a choice between 5 settings (for the 15in version).
This is fine for most users, but a bit frustrating for designers who are used to dealing with old-style pixels and judging interfaces on that basis. What resolutions do these equate to?
Well, running from left to right, here are the figures:
Larger Text
A – Looks like 1024×640
B – Looks like 1280×800
Best (Retina)
C – Looks like 1440×900
D – Looks like 1680×1050
More Space
E – Looks like 1920×1200
Remember, these are all actually running on a resolution of 2880×1800, so the UI is scaled in each case:
Larger Text
A – 2.8:1
B – 2.25:1
Best (Retina)
C – 2:1 – i.e. 4 screen pixels (2×2) to represent 1 old-style pixel.
D – 1.7:1
More Space
E – 1.5:1
All good so far. But here comes the problem – for me at least. When you take a screenshot, you don’t get a image equivalent in size to the ‘apparent’ resolution. Nor do you get a screenshot based on the actual pixels being used (2880×1800). Instead you get a ‘Retina screenshot’. Regardless of which of those options you choose, you get a screenshot that is twice the apparent size:
Larger Text
A – Screenshot size: 2048×1280
B – Screenshot size: 2560×1600
Best (Retina)
C – Screenshot size: 2880×1800
D – Screenshot size: 3360×2100
More Space
E – Screenshot size: 3840×2400
For the ‘Best’ scale, this does at least match the actual screen resolution, but it makes no sense that I can see for the other settings. Why would I want a double-size screenshot? True, the screenshot you’ve just taken looks fine on screen when you review it on the same machine (since 1:1 in Preview matches image pixels to screen pixels, not scaled pixels), but try sending the screenshot to someone on a non-retina device. Or try adding the screenshot into an Application like Keynote, or uploading it to a website – it all looks double sized…
Martin Colebourne 