Retina display for an image from URL

Question

I have some images I need to get from the web. Just using data from a URL.
They need to show correctly on Retina Display.
When I get the images from the web, they still look pixelated. I need to set the images' scale to retina display (2.0), but I must be missing something. Here's what I did so far.

UIImage *img = [UIImage imageWithData:[NSData dataWithContentsOfURL:@"http://www.msdomains.com/tmp/test.png"];

CGRect labelFrame = CGRectMake(0,0,64,64);
UIImageView *imageView = [[UIImageView alloc] initWithFrame:labelFrame];
imageView.contentScaleFactor = [UIScreen mainScreen].scale;

[imageView setImage:img];
[self addSubview:imageView];
[imageView release];

Answer 1

Try adding #@2x.png at the end of your URL. That wont change the URL, but the image will be recognized as a retina @2x image. It worked for me, but I used this method with SDWebImage.

e.g. using http://www.msdomains.com/tmp/test.png#@2x.png.

Answer 2

Your code should work pretty much as-is. I don't know what the original dimensions of your image were, but I'd guess they were 64x64 px. In order to scale down correctly, the original image would need to be 128x128 px.

As a test, the following code correctly displayed my photo in Retina resolution on the Simulator, and on my iPhone 4:

UIImage *img = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://www.seenobjects.org/images/mediumlarge/2006-08-19-native-lilac.jpg"]]];

CGRect labelFrame = CGRectMake(0, 0, 375, 249.5);
UIImageView *imageView = [[UIImageView alloc] initWithFrame:labelFrame];

[imageView setImage:img];
[self.view addSubview:imageView];

Note that the UIImageView is 375x249.5 points, which is half of the original (pixel) dimensions of the photo. Also, setting the contentScaleFactor didn't seem to be necessary.

(As an aside, I can't see that specifying @2x on the URL will help, in this case, as the call to dataWithContentsOfURL: will return an opaque blob of data, with no trace of the filename left. It's that opaque data that's then passed to imageWithData: to load the image.)