Xcode Image Assets return the wrong image for retina devices

Question

I've got an image assets catalog in Xcode 5 and two images in it.

This is what the folder structure looks like

This is the contents of the json file:

{
  "images" : [
    {
      "idiom" : "ipad",
      "scale" : "1x",
      "filename" : "background.png"
    },
    {
      "idiom" : "ipad",
      "scale" : "2x",
      "filename" : "background@2x.png"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

The assets catalog is the only place where I have the background and a file that's named background.png. Now whenever I do a

[UIImage imageNamed:@"background"];

On a non retina iPad I get the non retina version and on a retina iPad I get the non retina version again. I use this technique with all of my other resources as well and it correctly loads the right image for retina/non retina everywhere, except for this one.

If I do

[UIImage imageNamed:@"background@2x"]

it loads the retina version of the image and at this point the only solution that I see is to just check the scale and load the appropriate image, but I'd really like this to work.

Any ideas?

Edit:

Here's a link to a sample project, showing the issue AssetsCatalogWrongImageLoad

Edit 2 Seems like it doesn't have anything to do with the asset catalog. [UIImage imageNamed] just doesn't work with these two images, even if they are on their own...

Answer 1

There is nothing wrong with the assets catalog. The trouble is in the way you are testing for the size of the image.

Looking at your code you have

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background"]];
NSLog(@"Image size should be: %@", [[UIScreen mainScreen] scale] == 1 ? @"1136x1024":@"2732x2048");
NSLog(@"Image size is:%@", NSStringFromCGSize(imageView.image.size));

But imageView.image.size returns the logical size (in points, not pixels) for the image from iOS 4 onwards. So your test is always returning the screen size in points, whether it loads the retina image or not. Use different images for retina and non-retina graphics if you want a real test of what is being loaded.

Here's a corrected version of your test project: https://www.dropbox.com/s/ns6ci3b5htkhvi6/AssetsCatalogWrongImageLoad.zip

What I've done here is to put the text "@2x" on the retina sized image so when you run it on a retina iPad you can actually see that a different image is being used rather than incorrectly checking the size of the image.

Answer 2

I have seen problem with the asset catalog when using png. For whatever reason it was showing the same problem with png, moving to jpeg solved it. It seems that some file extension can be confusing