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原理:

SDImageWebPCoder源码.png

YYImage解析WebP原理:

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容