Before we start, take a deep breath and release. Feel better now? Great! Then let us begin our training into the dark magical arts of retina image enhancements. I should preface this by saying I will not be discussing anything app related as this discussion will be purely web based. You can refer to the links at the end of this article for more info on app UI design. Ready to dive in? Then let the training commence with a direct quote via Apple on the retina display.

Apple did something different: they increased the resolution without changing the physical size of the screen This makes for a higher pixel density, pixels are smaller and more tightly packed. In one square inch of the iPhone 4’s screen there are around 106 thousand pixels (at 326ppi, or pixels per Inch) while the older models have only about 26 thousand (at 163ppi) in an inch – 4 times less.

By developing pixels a mere 78 micrometers wide, Apple engineers were able to pack four times the number of pixels into the 3.5–inch (diagonal) screen found on iPhone 4S and iPhone 4. The resulting pixel density – 326ppi – makes text and graphics look smooth and continuous at any size. Retina displays offer four times the contrast ratio of previous displays, so whites are brighter,blacks are blacker and everything is more beautiful.
–Apple

iTechnical Specs

• iPhone Retina

  960–by–640–pixel resolution at 326ppi

• iPhone 3G

  320 x 480 163ppi

• iPad Retina

  9.7–inch (diagonal) LED–backlit glossy widescreen Multi–Touch display with IPS technology
  2048–by–1536–pixel resolution at 264ppi

• iPad2

  9.7–inch (diagonal) LED–backlit glossy widescreen Multi–Touch display with IPS technology
  1024–by–768–pixel resolution at 132ppi

Lets Discuss

Now that our technical portion of this discussion is complete we can proceed. As far as us Web Designers are concerned, when it comes to screen resolution (w x h), ppi don’t mean Jack (App UI designers on the other hand, ppi will matter tremendously). If you don’t believe me then by all means here is the proof in da puddin’.

The first three images (dribbble logo) below each possess varying resolutions (ppi) but keeping the same dimensions (w x h). This helps to prove ppi doesn’t matter with screens or any other web format (jpg,png,gif, etc.).

The Dribbble 148×148 / 2 logo in this debauchery will be our retina image research where the width and height are divided by 2 scaling the image down. The last and final dribble logo is scaled up from 148 x 148 by 200% using Photoshop. This image is then scaled back down once again in our markup to the original 148×148 dimensions.

Dribbble • 148 x 148 • 164ppi

Dribbble • 148 x 148 • 96ppi

Dribbble • 148 x 148 • 72ppi

Dribbble • 148×148/2

Dribbble • Scaled 200%

Retina with Photography

Lets take a look at the other side of the coin using photography(jpg) as our base.

Image 1 • 729 x 582 • 264ppi

Image 2 • 365 x 236 • 264ppi

Image 3 • 1458 x 942 • 72ppi (scaled 200% from 729 x 582)

Image 4 • 729 x 582 • 72ppi

Summing it up

As you can see, “ppi” doesn’t mean squat unless you’re in the print world Charlie. Lets face it, a 300ppi image – sent over the wire (especially 3G)– is a nightmare that sends users running for the hills in search of that great and wonderful site next door. Beep! Beep! This however does mean that we have reached a point where screens are better than the actual printed surface. That’s right! Screen surfaces have now been pushed beyond their old capabilities and dipped themselves into a print like bath.

Here is a quick tweet from Edward Cant of Optic Swerve

@gryghostvisuals Yes, you need the higher resolution image in the first place… can’t scale up to achieve higher pixel density, only down.

— Edward Cant (@OpticSwerve) March 21, 2012

What Ed’s actually suggesting is;

The source image needs to be twice the width/height in order to be scaled back down. The pixels per inch of a saved image makes absolutely no difference in a web browser….or even in png. The first 3 dribble logos are the same size and as a result would look identical on a retina display other than the discoloration which is probably a result of the saving process.

For example, if you’re image was 148px x 148px then we would double the dimensions to 296px x 296px and scale back in our CSS to the original 148px x 148px image.

If you need a way to test for HiDPI on your desktop then pay attention closely. To enable HiDPI on desktop requires a little knowledge of the right application to open. I stumbled upon this video link from Mathias on Twitter. Watch the video posted below for the rest of the story.

Playing around with OS X’s HiDPI display mode: i.imgur.com/YhFIo.pngHow to enable it: youtu.be/zE8agGL1Whw

— ⚞ Mathias Bynens ⚟ (@mathias) March 24, 2012

If you want to tell me I’m all wrong in my studies so far then please do so and lets discuss your retina enhancement technique research further. In the meantime here are some other helpful links to get you started.

Links, Glorious Links

• Matt Wilcox → Adaptive Images(video)
• Quirks Mode → A Pixel is not a pixel is not a pixel
• Menacing Cloud → Optimizing for High Pixel Density Displays
• Luke Wroblewski → Designing For Retina Displays
• Responsive Images Community Group
• Brad Frost → Optimizing Web Experiences for High Resolution Screens
• Punch Cut → Shrink To Fit: Designing Scalable User Interfaces
• Mister Morris → The Simplest Way to Handle Retina Graphics for iPad
• Mister Morris → Upscaling Raster Bitmap Images for Retina