WebP加载:SDImageWebPCoder和YYImage对比

什么是WebP?

WebP,是一种同时提供了有损压缩与无损压缩的图片文件格式,是Google新推出的影像技术,它可让网页图档有效进行压缩,同时又不影响图片格式兼容与实际清晰度,进而让整体网页下载速度加快。

  • WebP 无损压缩的图片可以比同样大小的 PNG 小 26%;
  • WebP 有损压缩的图片可以比同样大小的 JPEG 小 25-34%;
  • WebP 支持无损的透明图层通道,代价只需增加 22% 的字节存储空间;
  • WebP 有损透明图像可以比同样大小的 PNG 图像小3倍。

image.png

WebP对比GIF的优势:

  • 支持有损和无损压缩,并且可以合并有损和无损图片帧
  • 体积更小,GIF 转成有损 WebP 后可以减小 64% 的体积,转成无损可以节省 19% 的体积
  • 颜色更丰富,支持 24-bit 的 RGB 颜色以及 8-bit 的 Alpha 透明通道(而 GIF 只支持 8-bit RGB 颜色以及 1-bit 的透明)
  • 添加了关键帧、metadata 等数据

WebP对比GIF的劣势:

  • 消耗较多的 CPU 和解码时间(多 1.5~2.2 倍)
  • UIWebView无法加载(需通过NSUrlProtocol来处理)
  • 压缩时间长,大概是png的8倍左右(不过一般都是在服务端压缩,客户端解码,所以服务端可以做个预压缩)

SDImageWebPCoder链接
YYImage链接

SDImageWebPCoder加载WebP:

#import <SDWebImageWebPCoder/UIImage+WebP.h>

    NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"bigGif" ofType:@"webp"];
    NSData *data = [NSData dataWithContentsOfFile:imagePath];
    self.redImgView.image = [UIImage sd_imageWithWebPData:data];
复制代码

YYImage加载WebP:

#import "YYImage.h"

    NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"bigGif" ofType:@"webp"];
    NSData *data = [NSData dataWithContentsOfFile:imagePath];
    self.redImgView.image = [YYImage imageWithData:data];
复制代码

SDImageWebPCoder解析WebP原理:

image.png

YYImage解析WebP原理:

image.png YYImage解析源码.png

SDImageWebPCoder总结:

  • 先把WebP所有帧都解析完,才渲染,解析时间比较长(13M的WebP,解析需要28s)
    -解析的时候,会占用较高的CPU和内存(注意解析放到子线程)
  • 解析完成后,会释放CPU和内存
  • 通过CoreGraphics绘制,减少缓存的内存(13M的WebP,缓存到内存中才占用2M)

YYImage总结:

  • 每一帧解析完后马上显示,若每帧渲染时间>每帧的播放时间则会卡顿
  • 长期占用CPU和内存,需要手动释放(因为WebP动图播放的时候,会不断的解析每一帧)
  • 解析时间比较快(因为是一帧一帧的解析)

//基于SDImageWebPCoder占用内存少和YYImage解析速度快的优点,总结加载方案如下:

  1. //SDImageWebPCoder在子线程对WebP解码
  2. //在SDImageWebPCoder未解码成功之前,使用YYImage加载WebP
  3. //在SDImageWebPCoder解码成功后,缓存到内存,直接使用SDImageWebPCoder解析后的UIImage

猜你喜欢

转载自juejin.im/post/7071087293833936932