This article was originally written for MacTalk.
It appeared as an editorial on their home page June 18th, 2012.
“Retina display” itâ€™s Appleâ€™s latest buzzword thatâ€™s slowly mulling its way across their entire product line. Most recently recently bursting from its former iOS bounds and landing amid Appleâ€™s newest MacBook Pro lineup announced just days ago at WWDC 2012. But what is exactly is a Retina display? How does it affect you as a consumer or perhaps you as a developer? Do I want one? Well in the words of Dr Deane Hutton â€œIâ€™m glad you askedâ€…
To understand what a Retina display is weâ€™re going to jump back to some of the basics that make up your computerâ€™s (or phoneâ€™s, or tabletâ€™s) display. Every screen is made up of pixels, tiny dots of light that are told what colour they should be by your computer. Thousands of these pixels line your display and together in their combination of colours create the visual imagery that you see and interact with on your screen. Where things get interesting is when we look at the density of the pixels or rather how many of them are crammed into the physical size of your screen referred to by the term â€œpixels per inchâ€ (PPI).
PPI is calculated through a relatively simple little formula of which the crux is the number of pixels diagonally across your screen divided by its physical diagonal size. For example Appleâ€™s smaller iMac which has a viewable diagonal screen size of 21.5 inches at a display resolution of 1900×1200 equates to a PPI of 102.46. Had the same display resolution been on physically smaller screen, say 15 inches diagonal the PPI would be much higher at 149.81.
Having a higher PPI means the pixels are bunched up much finer and can lead to a more crisp image to the viewer. Technology in display manufacturing has been slowly leading up to the point where now we can create displays with such a high PPI that according to Apple they are of such a high density that from a normal viewing point we can no longer see the lines between the pixels and it is this high density that Apple loosely refers to as a â€œRetina displayâ€. To quote Steve Jobs at the unveiling of the iPhone 4, Appleâ€™s first product with a Retina display:
“…there’s a magic number around 300dpi, if you hold something about 10-12 inches away from your eye, it’s the limit of the human retina to distinguish pixels.”
The original iPhone and itâ€™s successors up until the iPhone 4 all had a resolution of 320×480 with a PPI of 163. With the launch of the iPhone 4 the resolution doubled to become 640×960, 326 PPI. The increase by exactly double is no accident either and you may have already noticed that the new MacBook Proâ€™s resolution is exactly double its predecessorâ€™s too. 2880×1800 to itâ€™s former non-retina self of 1440×900. So why is this? Well, it keep everything in proportion. For the user if youâ€™re looking at a web page or running an app that was built using the lesser resolution the system can double everything quite easily and not ruin the ratio of the material. The downside is that as the technology begins to expand across new product lines youâ€™ll see an almost never-ending game of catch up as developers must include larger versions of all the imagery included in their software so that it looks as it should, until that happens the software does its best to blow things up to their newly doubled size often leaving them blurry and uneasy on the eye.
For now the introduction of Retina displays into the Mac product family means more work for developers to double the size of their image assets. For the end-user, once their apps are updated theyâ€™ll enjoy a much more pleasant aesthetic experience and be able to truly reap the rewards of their wonderful display. The same goes for web developers, in a world where Retina displays become the norm the web will migrate to non-vector imagery doubled in size to accommodate these higher PPI displays. This may be a while away as Apple are technically the only people out there pushing the displays into the market at present but there are already Retina displayed imagery on a lot of websites as the iPhone & iPad take advantage of them already, accounting for the lion share of mobile traffic.
To break it down as a developer (web or app) youâ€™ll be creating rasterized assets at double the size (and again at half if you want to do the job properly), for the end-user youâ€™ll be complaining on Twitter and Facebook that your favourite app looks funny until you get an update. Unfortunate but true.
Lastly letâ€™s all understand that â€œRetina displayâ€ is nothing more than an Apple trademarked name of higher pixel density displayed. It is NOT an industry standard nor patent of technology held by Apple, itâ€™s a marketing term. Other computer manufacturers such as Dell or HP may not have a competing displays at this point but if they did they donâ€™t have to create it to the same standard as Apple nor would they call it â€œRetina displayâ€.
- Retina display – Wikipedia
- Pixel density – Wikipedia
- Apple MacBook Pro – Features – Apple, June 2012
- What the MacBook Retina display means to you – Expert Reviews, June 15th 2012
- What is the iPhone’s Retina display – Gizmodo, June 7th 2010
- iPhone 4’s Retina display explained – PCWorld, June 7th 2010