美文网首页iOS 开发 实用技术
iOS APP瘦身之优化图片资源

iOS APP瘦身之优化图片资源

作者: 德惟 | 来源:发表于2021-12-28 16:13 被阅读0次

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

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

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

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

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

    image

    左边的大小是原始大小,右边的大小是压缩后的大小,可见压缩率在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 APP瘦身之优化图片资源

        本文链接:https://www.haomeiwen.com/subject/mqpifrtx.html