How to create big image when we have small image in iOS without pixel distortion?

Question

I am working on an app which is fully dependent on images. I have images like 320*480 now I want those same images with 768*1024 dimension. I can get it by UI designer and place in my bundle but my application is for universal app so I needed to include same image for iPhone retina, iPad, iPad retina. If I am using multiple images my IPA size goes increase (ex: if an image with 320*480 having 200KB now if I again adding 768*1024 the size of my IPA will increased to at least 200KB).

Idea: I am placing only 320*480 images and planning to create 768*1024 images programmatically which means only one set of images I am using in my bundle.

Work done: By looking some blogs I found that using below code we can create required image sizes.

- (UIImage *)scale:(UIImage *)image toSize:(CGSize)size
{
    UIGraphicsBeginImageContext(size);
    [image drawInRect:CGRectMake(0, 0, size.width, size.height)];
    UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return scaledImage;
}


UIImage *smallImage=[UIImage imageNamed:@"1.png"];
    UIImage *bigImage=[self scale:smallImage  toSize:CGSizeMake(768, 1024)];
    [UIImageJPEGRepresentation(bigImage,2.0) writeToFile:[[self applicationDocumentsDirectory]stringByAppendingPathComponent:@"upload.png"]  atomically:YES];

Problem: Above code works cool and getting the expected size of images but only problem is I am getting pixel distortion on the end image.

Question: Is there any good or efficient solution to get different dimensions with out distortion image from the small image or I need to get all my images from the UI designer. If we have normal Image can we create same image for retina display?

Is there a better solution?

Answer 1

It is impossible to create a larger image from a smaller image without distortion or pixelation. There is no way to magically fill in the additional detail.

The real world doesn't work like TV or movies where people zoom in on images and magically get a lot of detail. :)

If you feel that your app is too big when you include 5 sets of images for:

1. iPhone 3.5" non-retina
2. iPhone 3.5" retina
3. iPhone 4" retina
4. iPad non-retina
5. iPad retina

then you have a few options:

1. Make two apps. One for iPhones and iPod touches, and one for iPads.
2. Ship your app with only a small subset of images. Then when the app is run the 1st time, the app can download only the images required for the current device.
3. Only include the largest images. As the app needs each image, it can create a properly sized version of the image and use that. Each conversion would only need to be done once per image. Downsizing an image gives much better results than trying to upscale.

Answer 2

You can resize image programmatically but they will not look good. I wouldn't worry that much about bundle size. Just put native-resolution image for all devices and forget about resizing.

Answer 3

If you want, you can crop and scale down from the big images, but if you are scaling up, there will be quality loss because the file does not contain enough information for all of those pixels. I would suggest either:

1) The easiest method is to make a bunch of different versions of the image. (see rmaddy's answer).

2) If you really don't want multiple images, take the largest one and scale downwards. Since they have different aspect ratios, simply scaling will cause some distortion; you will need to crop as well.

Either way, you will need to open up your image editor and make a larger image.