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
-
148 x 148 at 164 pixels per inch. Wow what a ton of ppi you got there pal! -
Dribbble • 148 x 148 • 96ppi
-
148 x 148 at 96 pixels per inch. A ton of ppi still, but not really seeing a huge difference. Maybe a color shift? -
Dribbble • 148 x 148 • 72ppi
-
148 x 148 at 72 pixels per inch. Are you seeing a difference yet? No? That’s what I thought -
Dribbble • 148×148/2
-
74 x 74 at 72 pixels per inch. In CSS this would be @media screen and (device-pixel-ratio: 2)
usingbackground-images
instead of<img>
tags -
Dribbble • Scaled 200%
-
Scaled up 200% from our original image of 148 x 148 at 72 pixels per inch. Also re–sized in our markup to 148 x 148. In Photoshop this would be the following steps…
- Select “Image Size” from the top menu of photoshop
- Instead of pixels for our width and height we select percent and scale up to 200 in the text box
- Check the box “scale styles”
- For the “re–sampling” option choose “Nearest Neighbor”
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
-
729 x 582 264ppi 511.5KB(native) saved to disk 295KB – jpeg progressive -
Image 2 • 365 x 236 • 264ppi
-
365 x 236 264ppi 511.5KB(native) saved to disk 130KB – jpeg progressive -
Image 3 • 1458 x 942 • 72ppi (scaled 200% from 729 x 582)
-
1458 x 942 72ppi 3.93M(native) saved to disk 409.2KB – jpeg progressive. Scaled back down to 729 x 582 in our markup -
Image 4 • 729 x 582 • 72ppi
729 x 582 72ppi with no scaling whatsoever
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
Comment Preview