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 Apple.com 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.
No comments:
Post a Comment