iOS APP瘦身之优化图片资源

本文总结了优化应用中图片资源大小的几种方法,有效的使用这些方法,可以减小应用的图片资源体积。

在使用这些优化方法之前,还是有几个基本的原则要去遵守:

  • 使用Assets来管理资源,而不是传统的直接将图片加入工程的方式
    这样会有两个好处:1)相比传统方式,加载速度快 2)下载后的安装包里,只会包含一套@2x或是@3x的资源,而不会2套资源都包含。这属于苹果在应用瘦身方面做的一项优化。
  • 同时提供2x和3x版本(现在没有必要提供1x的了),且图片尺寸严格符合2:3的比例。否则图片的大小和视图的大小不一致,会产生像素不对齐的问题,伤性能。

1 使用TinyPng来优化png格式图片大小

TinyPng对图片资源有损压缩,在大幅减小图片大小的基础上,图片质量上损失很小,肉眼基本上无法分辨出。官方提供了PhotoShop的插件,在设计师将图片资源导出时,可以选择TinyPng格式进行导出,从而无缝集成到设计师的工作流中。该插件价格为50美元。
下图显示了图片的压缩比例:

TinyPng.png

左边的大小是原始大小,右边的大小是压缩后的大小,可见压缩率在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%),并且国内的大厂也有使用这种方案的,因此也可以作为备选方案。

附录

相关工具

推荐阅读更多精彩内容