iOS 图片 @2x与@3x区别

一部好看的电影《看不见的客人》,老年人被逼无奈的情况下，激发了他们的最大潜能，逼凶手认罪伏法。有些时候，人都是被逼的...

28号面试了一位同僚，想起了之前腾讯电话面试我的一个问题，@2x和@3x的图片有啥区别，如果将@2x的图片放在@3x的屏幕上会有什么效果，反之呢。候选人的回答让我想起了曾经的自己。

2007年初代iPhone 3GS,320x480像素。一个点是一个像素。

2010年iPhone4发布，使用Retina显示屏，尺寸还是320*480，但像素为640x960。一个点是两个像素。

2014年iPhone6s Plus发布，尺寸是414736,像素为12422208。一个点是三个像素。

假设图片 example.png，大小为 30 x 40像素（这里的单位是像素，数字图片的单位通常都为像素）。当这张example.png在iPhone 4中使用时候，都占据屏幕上30 x 40个点。而因为iPhone 4中1个点等于2个像素，也就是30 x 40像素的图片，占据了60 x 80像素的屏幕，因此这图片在iPhone 4中看起来就会模糊。所以图片的像素应该为60*80像素。

在iPhone 6 Plus中，还出现3x模式，原理是一样的。

开发中美工切图要@2x和@3x的各一张，( @1x的（iPhone 3GS）已经淘汰了，所以不用切图 )。

1547050556930.jpg

例如：
[email protected] // 60 x 80像素
[email protected] // 90 x 120像素

当程序中使用example.png的时候，会根据屏幕模式自动选择对应的图片。屏幕2x模式，就会选择
example2x.png, 3x模式就会优先选择[email protected]，假如[email protected]不存在，就选择
example2x.png。

若@3x的图片放在@2x的屏幕上面，不会有任何问题，因为6080像素的图片堆积在3040的像素里，图片会更清晰。

Simulator Screen Shot - iPhone 6s - 2019-01-06 at 21.09.11.png

若@2x的图片放在@3x的屏幕上面，3040像素的图片放在需要放6080像素的图片里，图片会模糊失真。

@2x图片放在@3x屏幕上

IMG_2393.PNG

@3x图片放在@3x屏幕上

IMG_2394.PNG

加载图片方式

20160929093507359.png

-(void)setImageView1{
    UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 80, 240, 150)];
    imageView.backgroundColor = [UIColor whiteColor];
//只有test@2x与test@3x图片
    //4s 5 5s 6 6s 会自动加载test@2x图片
    //6Plus 6sPlus 会自动加载test@3x图片
    imageView.image = [UIImage imageNamed:@"front"];
    [self.view addSubview:imageView];
 }
-(void)setImageView2{
    //此处的路径是物理路径如果是逻辑路径是获取不到资源的
    //这里填写test@2x或者test@3x都可以（只要这个文件在wwwwww这个文件夹真实存在即可），主要是获得这个物理路径。
    //获得到这个路径之后 后边才会根据设备自动加载@2x图片或者@3x图片。
    NSString *path = [[NSBundle mainBundle] pathForResource:@"wwwwww/test@2x" ofType:@"png"];
    NSLog(@"path = %@",path);
    //因为www是逻辑路径，用此方法是加载不到这个文件的
     NSString *path1 = [[NSBundle mainBundle] pathForResource:@"www/test@2x" ofType:@"png"];
    //所以path1的值为null;
    NSLog(@"path1 = %@",path1);//path1 = null;
    UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 80, 240, 150)];
    imageView.backgroundColor = [UIColor blueColor];
    //4s 5 5s 6 6s 会自动加载test@2x图片
    //6Plus 6sPlus 会自动加载test@3x图片
    imageView.image = [UIImage imageWithContentsOfFile:path];
    [self.view addSubview:imageView];
}

imageNamed与imageWithContentOfFile的区别

myImage = [UIImage imageNamed:@"icon.png"];这种方法在一些图片很少，或者图片很小的程序里是ok的。但是，在大量加载图片的程序里，请千万不要这样做。为什么呢？？？？？？

这种方法在application bundle的顶层文件夹寻找由供应的名字的图象。如果找到图片，装载iPhone系统缓存图象。那意味图片是(理论上)放在内存里作为cache的。试想你图片多了，是什么后果,图片cache极有可能不会响应 memory warnings and release its objects。

NSString *path = [[NSBundle mainBundle] pathForResource:@”icon” ofType:@”png”];
myImage = [UIImage imageWithContentsOfFile:path];

NSString *filePath = [[NSBundle mainBundle] pathForResource:fileName ofType:extension];
NSData *image = [NSData dataWithContentsOfFile:filePath];
[UIImage imageWithData:image];

1.用imageNamed的方式加载时，系统会把图像Cache到内存。如果图像比较大，或者图像比较多，用这种方式会消耗很大的内存，而且释放图像的内存是一件相对来说比较麻烦的事情。例如：如果利用imageNamed的方式加载图像到一个动态数组NSMutableArray，然后将将数组赋予一个UIView的对象的animationImages进行逐帧动画，那么这将会很有可能造成内存泄露。并且释放图像所占据的内存也不会那么简单。但是利用imageNamed加载图像也有自己的优势。对于同一个图像系统只会把它Cache到内存一次，这对于图像的重复利用是非常有优势的。例如：你需要在一个TableView里重复加载同样一个图标，那么用imageNamed加载图像，系统会把那个图标Cache到内存，在Table里每次利用那个图像的时候，只会把图片指针指向同一块内存。这种情况使用imageNamed加载图像就会变得非常有效。