美文网首页
iOS 开发HEIC图标实践总结

iOS 开发HEIC图标实践总结

作者: Sweet丶 | 来源:发表于2023-11-06 23:07 被阅读0次

    这里记录下自己了解的HEIC及其在iOS开发中的实践。

    一、HEIC简介

    发展史.png

    HEIF(High Efficiency Image Format),即高效图像格式。HEIF是由MPEG组织开发的,它的目标是在保持较高的图像质量的同时减小文件大小。HEIF广泛地应用于移动设备和互联网环境中。它已被苹果公司选作其手机和平板电脑上的默认图像格式。

    • HEIF使用的主要压缩算法有HEVCHEIC

    HEIF使用的主要压缩算法有:HEVC(High Efficiency Video Coding)HEIC(High Efficiency Image Coding)
    HEVC是一种视频编码标准,也被用于压缩HEIF图像。它使用了先进的压缩技术,包括帧间预测、变换编码和熵编码,以减小图像数据的存储空间.
    HEIC综合使用了HEVCCE-BC算法。

    • HEIF格式文件的扩展名有.heic.heif

    .heic.heif扩展名都可以用于包含静态图像、动态图像、音频和其他多媒体内容的HEIF文件。这两种扩展名在功能和文件格式上没有区别,只是在命名上略有不同。 通常情况下:

    • .heif扩展名用于表示包含多媒体内容的HEIF文件,如动态图像(例如,由多个图像帧组成的动态图像)或包含音频的HEIF文件。
    • .heic扩展名则更多地用于表示单个静态图像的HEIF文件。
    • HEIC图标相比PNGJPEG格式

    如果图像的内容具有较高的细节和颜色变化,或者存在大面积的纹理和细微的图像细节,HEIF格式可能实现更高的压缩率和更小的文件大小。然而,如果图像是简单的图形或颜色块,PNG格式可能会产生更小的文件。我尝试将截图转换成HEIC,发现比PNG文件小3/4左右!!

    • 压缩比高,在相同的图片质量情况下,平比 JPEG 高两倍。
    • 能增加如图片深度信息,透明通道等辅助图片。(苹果正是通过这个就能实现动态的调整图片的景深)。
    • 支持存放多张图片,类似相册和集合。(实现多重曝光的效果)
      支持多张图片实现 GIF 和 livePhoto 的动画效果。
    • 无类似 JPEG 的最大像素限制。支持透明像素。分块加载机制。支持缩略图。

    iOS 开发中的图标如果使用HEIC格式可以减小包体积,那么正确的姿势是什么呢?

    二、HEICiPhone上的兼容性

    首先我们需要了解HEICiPhone上的兼容性。

    硬解码: A9 及以上芯片 iOS 设备(iPhone6s)
    硬编码:iPhone 7及之后(A10芯片)
    软解码:iOS 12及以后(官方说iOS11开始支持,但实测将Mac上的heic图片隔空投送到8plusiOS 11不支持,iOS 12才支持)

    /* 可以调用ImageI/O相关函数获取支持的图片编解码支持的格式,
    * 这里值得注意的是,在iPhone6p,iOS11.0.4实测不支持HEIC,
      即调用CGImageSourceCopyTypeIdentifiers();查询可解码格式包含public.heic,依旧是无法正常显示出HEIC图片;
    * 在iPhone6p,iOS12.5.6测试机上可以正常显示HEIC图片。*/
    //获取所支持的图片格式数组,解码
    CFArrayRef decodeArr = CGImageSourceCopyTypeIdentifiers();
    NSArray *decodeUTI = (__bridge NSArray *)decodeArr;
    NSLog(@"解码支持%@", decodeUTI);
    
    //获取所支持的图片格式数组,编码
    CFArrayRef encodeArr = CGImageDestinationCopyTypeIdentifiers();
    NSArray *encodeUTI = (__bridge NSArray *)encodeArr;
    NSLog(@"编码支持%@", encodeUTI);
    
    • 对于iOS 11及以下的设备如何兼容?
      如果你的APP需要支持iOS 11及以下,可以集成三方库来支持:
      pod 'SDWebImageHEIFCoder', '~> 0.10.1’
      或者使用HEICConverter
      可以比较HEIC替代PNG的收益和导入库的大小来决定是否采用HEIC;如果是网络图片需要支持HEIC,那么也可以导入三方库来支持。

    • 如果APP是只适配iOS 12及以上,建议使用;如果是需要适配iOS 12以下,但网络资源想使用HEIC,那么也建议使用。

    三、PNG图标如何转换成HEIC

    1. 格式转换的方式网上有很多,我这边使用简单的方式:

    选中PNG图右键“转换图像” 选择HEIF格式即可
    选中要转换的PNG右键.png 转换图像选择HEIF格式.png

    2. 转换后的文件大小与原先对比

    • 首先我选择了13个大于30KB的APP里的图标
    PNG图大小为2.1M 转换HEIF后500KB
    PNG.png HEIF.png

    可以看到压缩后节省了大概3/4的空间。

    • 再次选择了一些小于20KB的图标来转换
    PNG图大小为26KB 转换HEIF后65KB
    PNG小图标.png HEIF.png

    我们发现转换为HEIC后文件变大了,那么有什么特点呢?

    如果图像的内容具有较高的细节和颜色变化,或者存在大面积的纹理和细微的图像细节,HEIF格式可能实现更高的压缩率和更小的文件大小。然而,如果图像是简单的图形或颜色块,PNG格式可能会产生更小的文件。

    所以我们出现将小图标转换后更大的原因是小图标一般是“简单的图形或颜色块”。

    3. 需使用原PNG转换

    在实践中,发现将压缩过的且有透明度值的PNG图标转换为HEIC时,在低版本系统iOS12、iOS13上会出现图片透明度的地方显示为白色或绿幕;而iOS 14及以上是正常的。但是,如果把原图PNG图标转换为HEIC展示则是正常的。

    iOS 12上显示.png

    四、iOS开发中如何使用HEIC

    1. 图片资源放在Asset Catalog

    在iOS开发中,图标一般会放在Bundle中或者Assets.xcassets, 这里是建议都放在Assets.xcassets中,因为首先这在APP Store能享受到APP Slicing,其次是可以享受到苹果官方的持续更新的压缩算法优化。

    我们可以通过比对转换后的HEIC和PNG大小,选在文件更小的那个放入Assets.xcassets

    2. 使用.heic

    使用时就跟PNG一样的写法:

    let img = UIImage(named: "haha")
    

    五、和webP的对比

    常常拿来与 HEVC 来做对比的是 VP9。两者的性能相近,但是 VP9 是开源的,而 HEVC 是需要专利费的( $2 每设备)。目前暂时没有通过 VP9 进行编码的图片,所以这里主要对比的是 webp 就是通过 VP8 进行编码的图片。


    HEIF与WebP图片对比.png
    • 压缩效率对比:heif 确实比 webp 压缩效率高 10-20%。


      压缩效率对比.png
    • 解码的消耗测试
      用第一张 7.7 mb 的 jpeg 压缩后大小 1.1mb
      jpeg 7.43 2.77 1.46 1.9 2.14 2.00 【占用率 6 %】
      hevc 41.0 3.45 3.35 2.62 2.92 2.66 【占用率 6 %】
      webp 216.6 216.8 217.5 261.9 195.2 【占用率 21 %】


      解码时间.png

      测试结果由于硬解码的支持,jpeg 和 hevc 解码速度和 CPU 占用率都比 webp 快和小很多,jpeg 和 hevc 不相伯仲,可见苹果内部对其优化也相当到位,才把它放到 iOS 中。

    参考文章
    HEIF & HEVC 你知道多少?

    相关文章

      网友评论

          本文标题:iOS 开发HEIC图标实践总结

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