Responsive Imagery

Posted : | Filed Under : Retina

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) using background-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…

  1. Select “Image Size” from the top menu of photoshop
  2. Instead of pixels for our width and height we select percent and scale up to 200 in the text box
  3. Check the box “scale styles”
  4. 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

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.

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