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.

5 Responses to The new elephant: Image Quality and Retina Displays

  1. Matt Wilcox says:

    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.

  2. Kevin Suttle says:

    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.

  3. Kevin Suttle says:

    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.

  4. Kevin Suttle says:

    And the hits just keep coming.

    http://osxdaily.com/2012/05/14/new-macbook-pro-coming-next-month-at-wwdc-retina-display-thinner-ssd/

  5. Pingback: Olybop.info - Actualités Webdesign, Culture et Graphisme - » #web2day Design Responsive pour préparer le futur

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Before you comment here, note that this forum is moderated and your IP address is sent to Akismet, the plugin we use to mitigate spam comments.