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%），并且国内的大厂也有使用这种方案的，因此也可以作为备选方案。

附录

相关工具

• 图片资源提取
  iOS-Images-Extractor
  可以将IPA，Assets.car中的图片资源进行解包，提取。

• 查找工程中没被使用的图片资源
  LSUnusedResources