本文总结了优化应用中图片资源大小的几种方法,有效的使用这些方法,可以减小应用的图片资源体积。
在使用这些优化方法之前,还是有几个基本的原则要去遵守:
- 使用Assets来管理资源,而不是传统的直接将图片加入工程的方式
这样会有两个好处:1)相比传统方式,加载速度快 2)下载后的安装包里,只会包含一套@2x或是@3x的资源,而不会2套资源都包含。这属于苹果在应用瘦身方面做的一项优化。 - 同时提供2x和3x版本(现在没有必要提供1x的了),且图片尺寸严格符合2:3的比例。否则图片的大小和视图的大小不一致,会产生像素不对齐的问题,伤性能。
1 使用TinyPng来优化png格式图片大小
TinyPng对图片资源有损压缩,在大幅减小图片大小的基础上,图片质量上损失很小,肉眼基本上无法分辨出。官方提供了PhotoShop的插件,在设计师将图片资源导出时,可以选择TinyPng格式进行导出,从而无缝集成到设计师的工作流中。该插件价格为50美元。
下图显示了图片的压缩比例:
左边的大小是原始大小,右边的大小是压缩后的大小,可见压缩率在60%左右,很可观。
2 不包含透明像素的图片,改为JPEG格式
同样的图片,JPEG格式在文件大小上会减少很多。
3 针对大的背景图片,思考能否修改设计
有时可以用一些小的图片,拼接后可以达到同样的效果,但是小图的体积就比一张大图的体积小很多。
4 使用九宫格图片
如果一个图片适合使用九宫格图片,那么就不要使用普通的图片。
5 使用IconFont
IconFont是一种通过字体文件来构建纯色图的方案。更详细的介绍参见使用IconFont减小iOS应用体积。
该方案的优点:
- 减小应用体积,字体文件比图片要小
- 图标保真缩放,解决2x/3x乃至将来nx图问题
- 方便更改颜色大小,图片复用
缺点在于: - 只适用于纯色icon
- 使用unicode字符难以理解
- 需要维护字体库
目前在Github上也有开源的库对此进行支持:
IconFont:阿里巴巴提供
FontAwesomeKit
6 使用WebP格式
关于iOS+WebP,在Google上可以搜索出很多结果,这里不再细说,可以看这篇文章:
在iOS项目中使用WebP格式图片
总结:
- SDWebImage提供了针对WebP的支持,支持单张图片和动图。
- Native中使用本地WebP图片:
使用UIImage+WebP
分类中的+ (nullable UIImage *)sd_imageWithWebPData:(nullable NSData *)data;
方法,可以从WebP数据,构造出UIImage对象。 - Native中使用网络WebP图片:
这种情况下对调用者是透明的,SDWebImage会在下载图片后分析其格式,针对不同的格式做不同的处理。我们象平常一样使用SDWebImage即可。 - WebView中使用WebP图片
由于WebView没有提供内置对WebP的支持,所以需要使用NSURLProtocol拦截WebView中的网络请求,判断是否WebP的请求,如果是WebP的话就将WebP格式的网络数据,转码成WebView认识的Jpeg或Png格式,这样就可以正常显示了。
总结
个人觉得最方便的方案是客户端使用TinyPng,网络图片使用WebP。如果是纯色图标,那么IconFont的体积减小效果也非常可观(大于60%),并且国内的大厂也有使用这种方案的,因此也可以作为备选方案。
附录
相关工具
图片资源提取
iOS-Images-Extractor
可以将IPA,Assets.car中的图片资源进行解包,提取。查找工程中没被使用的图片资源
LSUnusedResources