“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 1900x1200 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 320x480 with a PPI of 163. With the launch of the iPhone 4 the resolution doubled to become 640x960, 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. 2880x1800 to it’s former non-retina self of 1440x900. 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”.