Retina vs Non-Retina iOS

Question

I have some questions regarding retina vs non-retina images in iOS. Actually I am downloading some image files and they are not appended with the @2x suffix. I have few questions.

1 - Firstly it is not in a bundle just in a document library after download so @2x won't work like work for retina images that are bundled. Is my assumption correct?

2 - Retina is in the double of size as compare to non-retina images but if you will see retina images are scaled at 2.0 so If I manually scale any image to at 2.0 would there be any quality difference? e.g. I have an image Image1.png and convert it to scale 2.0 and just add in the UIImageView while on the other side I have to same image but with the name [email protected] and I add Image2 in the UIImageView. Any quality difference would be in the Image1 as compare to Image2?

Here's a code snippet I am using to convert it into at scale 2.0 or retina if the images are non-retina.

UIImage *image = [UIImage imageNamed:@"fileName"];

UIImage *convertedImage = [UIImage imageWithData:UIImagePNGRepresentation(image) scale:2.];

novalagung novalagung · Accepted Answer · 2014-02-19T04:53:34

downloaded image placed on document library. you can't get the image using [UIImage imageNamed:@"filename"] because these function only get image from bundle. here is example how to get image from document library :

NSString *bundlePath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0];
UIImage *image = [UIImage imageWithContentsOfFile:[NSString stringWithFormat:@"%@/%@", bundlePath, fileName]];

scaling non-retina image to get the retina size is bad practice. My suggestion is, your downloaded image should be in retina size. from it, generate the non-retina image and save it in document library.

this is example how to scale an retina image and save it on document library. to get the non-retina size, you can scale it manually then save it. here the example code :

UIImage *image = [UIImage imageNamed:@"[email protected]"];

// set non-retina size from current image
CGSize size = CGSizeMake(image.size.width / 2., image.size.height / 2.);


/** scale the image */

UIGraphicsBeginImageContext(size);

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0.0, size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextDrawImage(context, CGRectMake(0.0f, 0.0f, size.width, size.height), image.CGImage);

UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();


/** save scaled image */

NSString *basePath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0];
// save with same name but without suffix "@2x"
NSString *filePath = [NSString stringWithFormat:@"%@/%@", basePath, @"nonRetinaImage"];

@try {
    [UIImagePNGRepresentation(scaledImage) writeToFile:filePath options:NSAtomicWrite error:nil];
} @catch (NSException *exception) {
    NSLog(@"error while saving non-retina image with exception %@", exception);
}

Retina vs Non-Retina iOS

1 Answers