High Resolution images in a uiwebview

Question

I have a webview that displays an image, as shown in the code below. The bundle also has a DGT64@2x.png with dimensions of 128x128 for use on the iPhone4. The DGT64@2x.png never shows. Is there a way to display either/or depending on whether it's an iPhone or an iPhone4?

<img src="DGT64.png" width="64" height="64" align="left" style="padding:2px;"/>

Answer 1

I don't think the @2x trick works with web content. Sounds really useful though, I would certainly file a bug with Apple to request that.

If you are generating the above HTML from your app then I think the best way for now will be to detect if you are running on a Retina display device and then adjusting the image name manually.

You can detect the Retina display by doing something like this:

if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
    if ([[UIScreen mainScreen] scale] == 2) {
        // Use high resolution images
    }
}

(Took that code from an answer I found here in SO)

Answer 2

The way to do it is with CSS backgrounds. Just embedd all your 2x stuff in a subsection in CSS. The key is also to set the -webkit-background-size. Here is an example of the portion of the css (both retina and not) for a div with the id Ampersand that acts as an image.

div#Ampersand {
  background: url('AmpersandBurned.png');
  width:43px;
  height:97px;
  float:left;
  -webkit-background-size: 43px 97px;
}

@media screen and (-webkit-device-pixel-ratio: 2) {
  div#Ampersand {
    background: url('AmpersandBurned@2x.png');
    width:43px;
    height:97px;
    float:left;
  }
}

Answer 3

Currently the best way to do this is by referencing your images in your CSS file using the background-image property. Then, you can use a special CSS file that is only loaded by devices with high resolution screens to override these properties.

See this blog post for more information.