iPad 3: how to download retina images in uiwebview

Question

I have an hybrid iPad app loading html and javascript in a webview.

All the images are ok in ipads 1 and 2s but fuzzy in ipads 3.

I was thinking about some possible solutions:

1. Serve 2x images and show them at 50% in low res ipads.
2. Detect retina display and serve different images

How would you manage the different resolutions and image loading in different devices?

Answer 1

You can use Javascript to swap LowRes images to HiRes images on HiRes devices. There is a JQuery plugin that does that. Apple is using this method (not the JQuery plugin) for its own pages, so it should not be too bad.

You could use another method if you can change your inline <img> to CSS background images. Then you can use media queries to serve HiRes images to HiRes devices:

#yourImageConteainer {
   background-image: url('image.png');
}    

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
    #yourImageContainer {
        background-image: url('[email protected]');
        background-size: 100px 100px;
    }
}

I've named the HiRes image with the iOS @2x suffix, although that is not necessary.

I would not serve full resolution images to LowRes devices as that would increase the size of the images and thus the loading time for LowRes devices without any benefit.

If you can detect HiRes devices on your server side and then serve the best resolution images for the requesting device, that would be the best way IMHO.

Answer 2

Don't upscale your images too much for iPad3/New iPad. Safari downscales high res images http://www.tomshardware.com/reviews/ipad-3-benchmark-review,3156-5.html. The only way to see web images at full iPad3 resolution is to save them and view them outside of Safari.

Edit:

With the new retina display macbooks, this comment may no longer apply. Having hi-res versions of web graphics will presumably become more and more important going forward.