The new elephant: Image Quality and Retina Displays
Several posts are being passed around regarding the 3rd generation iPad’s Retina graphics holding a direct light to how compressed our images are on the web.
http://www.mobify.com/blog/ipad-3-and-retina-screen-what-it-means-for-your-mobile-commerce-site/
http://daringfireball.net/2012/03/ipad_3
http://cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/
http://bradfrostweb.com/blog/notes/ipad3s-retina-display-web/
http://www.mobilexweb.com/blog/ios-5-1-new-ipad-web-developers
http://www.penny-arcade.com/2012/04/02/perhaps-too-real
I thought I’d start a discussion on possible approaches (notice I didn’t use the word ‘solutions’ because I think it’ll be an iterative process), and the potential pitfalls this might
bring in future responsive designs. So, it’s GO time.
One approach is just to use http://adaptive-images.com, use the alternate JS as provided, and supply a natural-pixel resolution bracket at the end of the resolutions variable:
320, 480, 640, 1280, 2048.
Job done. No more work.
Well, I was hoping to get into more of a discussion of image quality (PPI, resolution density) rather than image size. The issue we’re seeing now is that many images, not just heavily-compressed images, look rather inelegant on the new iPad, which will undoubtedly spawn other hi-DPI devices.
Should we start weighing trade-offs between image compression/poor display vs performance (both perceived and actual)? Obviously this is something we consider anyway, but at this point, the moving parts are getting harder to keep track of.
Using the Adaptive Images approach, as well as browser zooming, doesn’t guarantee that the browser will report it’s viewport correctly.
See http://www.alistapart.com/articles/a-pixel-identity-crisis/ and http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
Perhaps these factors need to be looked at more in-depth so we can come up with a robust solution.
I was just made aware of http://retinajs.com/, which aims to detect hi-res displays with JavaScript and serve higher resolution images. Looks like a handy approach, but I’d rather the solution be in markup or CSS. Until then, this might be the way to go. I’m interested to see performance benchmarks on it.
And the hits just keep coming.
http://osxdaily.com/2012/05/14/new-macbook-pro-coming-next-month-at-wwdc-retina-display-thinner-ssd/
Pingback: Olybop.info - Actualités Webdesign, Culture et Graphisme - » #web2day Design Responsive pour préparer le futur