jpg images in iphone and 2x images

Question

I am working on an iphone app and targeting iOS 4.0 or later. I am trying to add an image to UIImageView, and image is in jpeg format. This is what I have done so far..

UIImageView *bgImageView            =   [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 246.0)];
bgImageView.image                   =   [UIImage imageNamed:@"background"];
[self.view addSubview:bgImageView];
[bgImageView release];

I have added two images,

1. background.jpg (as normal 1x image)
2. background@2x.jpg (for 2x / retina display).

But when I build and run, everything runs fine, except there is no background. All my other widgets are there, but there is a white background and image is not showing.

Next I created two png images for my background, added it to the project and ran. This time my background was shown. I was perplexed because according to documentation jpg image can be used in iphone with UIImage.

I tried again with my jpg images and changed the code above to this

UIImageView *bgImageView            =   [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 246.0)];
bgImageView.image                   =   [UIImage imageNamed:@"background.jpg"]; //added extension
[self.view addSubview:bgImageView];
[bgImageView release];

When I run the above code, background image is showing, but 2x images are not loaded. That shows my jpg image is fine, and it is not the culprit. So when I just give image name without extension, png files (both 1x and 2x)are loaded on respective devices, jpg files are not loaded at all. Looks like a bug (either in sdk or documentation). iOS 4 is here for a good year. why no one noticed it? Also is there any option for me other than to convert all my images to png?

EDIT :

Well, two days in to the question, zero answers. I have already converted all my images to png, and that part of my project is done (as my project couldn't wait..). Still, for my own sake and for sake of everyone who faces this in future, I would like to know more about this problem. At least someone can confirm that this is indeed an apple bug. I am starting a bounty so that more people can see this thread.

EDIT AGAIN

2 days remaining for this bounty to end. Thanks for everyone who responded. But let me clarify one thing. I have already said that I have converted all my images to png and I moved along. I just wanted some confirmation that imageNamed treats jpg and png files same way. Documentation certainly says it will(unless Apple has written it somewhere other than UIImage documentation). If documentation is correct then my code failed me because of two possible reasons

1. It is a bug in imageNamed. If this is the reason, then I dont have too much option other than file a bug report, change my images to png or write a wrapper(like Chandan has said in his answer) and move on..
2. There is some problem with the jpeg image I used. Well I am not a photoshop guy. But I used RGBA jpg image. If image does matter I am ready to ask my designer friend and provide more info.

One more thing. This post also just tells about this problem. But he dont know the reason behind. So I am not alone.

EDIT : THE END

Well it is something related to the image itself. I googled and downloaded some sample jpeg images and played with it. Some of them shown up correctly and some doesn't. Since the boundy time is up, I am giving the boundy to PengOne who tried to reproduce the bug and successfully loaded jpg image without extension, there by making me to work with more images. Thanks for everyone who tried to help.

Answer 1

According to the UIImage Class Reference:

Discussion

This method looks in the system caches for an image object with the specified name and returns that object if it exists. If a matching image object is not already in the cache, this method loads the image data from the specified file, caches it, and then returns the resulting object.

On a device running iOS 4 or later, the behavior is identical if the device’s screen has a scale of 1.0. If the screen has a scale of 2.0, this method first searches for an image file with the same filename with an @2x suffix appended to it. For example, if the file’s name is button, it first searches for button@2x. If it finds a 2x, it loads that image and sets the scale property of the returned UIImage object to 2.0. Otherwise, it loads the unmodified filename and sets the scale property to 1.0. See iOS Application Programming Guide for more information on supporting images with different scale factors. Special

Considerations

On iOS 4 and later, the name of the file is not required to specify the filename extension. Prior to iOS 4, you must specify the filename extension.

Since you're targeting iOS 4.0 and later, you should not need the filename extension. I tried to reproduce this potential bug, but it worked as expected for me without the filename extensions.

Here are some ideas for what may have gone wrong to create this effect in your app:

1. It's possible that the problem comes from the cache if you changed your images at some point.

2. If you choose not to use the filename extensions, and you have both "background.jpg" and "background.png" as options, the preference appears to be to use the ".png" file.

3. If you set the target to iOS 4.0 and later after first running the app, then the filename extension would have been required and the image may have been cached blank, which leads back to theory 1.

That's the best I can make of this.

Answer 2

Write a wrapper to get the image like

-(UIImage*) getImage:(NSString*)imageName{

    UIImage *image;

    if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)] == YES && [[UIScreen mainScreen] scale] == 2.00) {

        // RETINA DISPLAY
        NSString *jpegFile = [imageName stringByAppendingString:@"@2x.jpg"];
        image = [UIImage imageNamed:jpegFile];
    }
    else{

        NSString *jpegFile = [imageName stringByAppendingString:@".jpg"];
        image = [UIImage imageNamed:jpegFile];
    }

    return image;
}

And from your code call

bgImageView.image                   =   getImage(@"background");

Answer 3

With the dawn of Xcode 6 I have found that JPG images might not render at all on certain iOS7 devices (they may work on some but not on others, or they may not work on any, and you may see a different result on a different developers machine, there doesn't seem to be any consistency). This is regardless of whether the image is just referenced in UIImageView in a XIB or programmatically with [UIImage imageNamed:] (which returns nil).

After scratching my head for a long time, the solution was to rename the *.jpg file extension to *.png (whilst obviously leaving the file contents as JPG data).

HTH

Answer 4

You just need to provide the full name of image.

bgImageView.image = [UIImage imageNamed:@"background.jpg"]; 

don't leave off the extension.

As for the @2x, it is not necessary to call it out anywhere in the code. If you code correctly there is no need to test for a retina display as some here have suggested.

Answer 5

You can use jpgs, just tried it myself and it worked. Only suggestion is how you are instantiating it. Try it this way:

stockImage = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"Morbo.jpg"]];

stockImage.frame = CGRectMake(0,0, self.view.bounds.size.width, self.view.bounds.size.height)  ;

[self.view addSubview:stockImage];

This is the image I used:

http://futurama.wikia.com/wiki/File:Morbo.jpg