Monday, April 22, 2013

Optimizing Web Experiences for High Resolution Screens

iPad 3 and Retina Screen: What it means for your mobile site

- A huge jump in screen resolution from 1024 × 768 pixels to an incredible 2048 × 1536 pixels. Apple calls this super-high-resolution screen its Retina display.
- As Kevin Suttle posted on Twitter: "No seriously, this screen is so bright and crisp it looks fake."
- The iPad 3 screen remains the exact same size as previous iPads – 9.7 inches. Yet that same screen size now packs more pixels than a high-definition 50-inch TV.
- Think about how clear a Blu-Ray movie is on a high-definition TV. Compress the image on that TV to the 9.7-inch screen of the iPad. Then add about 50% more pixels. That’s how crisp and sharp images are on the new iPad's Retina screen.

How will serve retina images to new iPads

- What they’ve chose to do is load the regular images for the site and then if the device requesting the page is a new iPad with the retina display, they use javascript to replace the image with a high-res version of it.
The heavy lifting for the image replacement is being done by image_replacer.js. Jim Newberry prettified the code and placed it in a gist for easier reading.
Another interesting part of image_replacer.js is that it checks for the existence of 2x images before downloading them:

- As far as I can tell, there is no attempt to prevent duplicate downloads of images. New iPad users are going to download both a full desktop size image and a retina version as well.
The price for both images is fairly steep. For example, the iPad hero image on the home page is 110.71K at standard resolution. The retina version is 351.74K. The new iPad will download both for a payload of 462.45K for the hero image alone.
The total size of the page goes from 502.90K to 2.13MB when the retina versions of images are downloaded.

-Unfortunately, it means that there are now three http requests for each assets: a GET request for the standard image, a HEAD request to verify the existence of the retina image, and a GET request to retrieve the retina image.

Optimizing Web Experiences for High Resolution Screens:

“@Malarkey Screen resolutions are going to increase. Period. Adaptation is the name of the game in web design. The sky is not falling.” — @robweychert

@media queries
We can use @media queries to target hi-res displays and serve them up different styles, including different background images. While not entirely related to images, Brad Birdsall demonstrates how you can finesse designs for hi-res displays. I wonder if there are the same issues regarding media queries and asset downloading with pixel-density as there are with device widths.