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
例如:
example@2x.png // 60 x 80像素
example@3x.png // 90 x 120像素

当程序中使用example.png的时候,会根据屏幕模式自动选择对应的图片。屏幕2x模式,就会选择
example2x.png, 3x模式就会优先选择example@3x.png,假如example@3x.png不存在,就选择
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加载图像就会变得非常有效。

2.利用NSData方式加载时,图像会被系统以数据方式加载到程序。当你不需要重用该图像,或者你需要将图像以数据方式存储到数据库,又或者你要通过网络下载一个很大的图像时,请尽量使用imageWithData的方式加载图像。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,165评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,503评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,295评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,589评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,439评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,342评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,749评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,397评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,700评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,740评论 2 313
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,523评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,364评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,755评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,024评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,297评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,721评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,918评论 2 336

推荐阅读更多精彩内容