包体积之webp图片优化（😁）

性能优化

webp图片介绍

WebP 的诞生起初是因为 Google 开发了一种基于 VP8 视频编码格式的 WebM 视频格式，Google 的工程师意识到 WebM 格式非常适合压缩关键帧，由此开发了 WebP 图片格式。

WebP 最初发布于 2010 年，主要目标是使图片质量和 JPEG 格式质量相同的情况下，减少图片文件的体积，籍此减少互联网上图片的发送时间和流量消耗。发布不久之后，WebP 便被整合到 Chrome 以及 Android 系统中，并且 Google 发布了函数库，让 iOS 应用等其他工具支持 WebP 格式。

WebP 图片格式派生自 VP8 视频编码，同时提供有损压缩和无损压缩：

• 有损 WebP 压缩使用的图像编码方式与 VP8 视频编解码器中压缩视频关键帧的方法相同。利用图像已编码部分预测未编码部分，将图像细分来进行预测处理，分块越细预测越准确。获取编码数值后将原图像数据减去预测数据得到差值，仅对差值进行编码，以此控制大小；

• 无损 WebP 压缩使用已知的图像片段来精确地重建新的像素，在无法找到相应的匹配值的情况下，使用本地调色板进行优化。

为什么要用webp

• 无损压缩情况下webp比png少了45%的体积，即使png图片经过pngcrush无损压缩后，webp依旧可减少28%的体积。

有损压缩和无损压缩技术原理

都说 WebP 厉害，究竟厉害在哪里？

压缩工具

使用文档

https://developers.google.com/speed/webp/docs/cwebp

安装

brew install webp

使用

无损压缩：

cwebp -lossless -q 100 add_disable_icon@3x.png -o add_disable_icon@3x.webp

• -lossless：无损压缩
• -q：质量，0-100，默认值75，值越小压缩速度越快，但压缩体积越大

有损压缩：

cwebp -q 60 -af add_disable_icon@3x.png -o add_disable_icon@3x.webp

• -q：质量，0-100，默认值75，值越小压缩质量越低
• -af：打开自动过滤器。该算法将花费额外的时间来优化过滤强度以达到均衡的质量。

png转webp动画工具

webpmux -frame image_0@3x.png.webp +150+0+0+1-b -frame image_1@3x.png.webp +150+0+0+1-b -loop 0 -bgcolor 255,255,255,255 -o animationName.webp

• -frame：每一帧的webp图片，150表示两帧之间的时间间隔，150ms
• -loop： 循环次数，0表示无限循环

脚本工具直接png转webp动画：

./png2animation_webp.sh pngPath 50 '-lossless -q 75'

• pngPath：表示png图片所在的路径
• 50：两帧图片的时间间隔
• '-lossless -q 75'：cwebp转换png到webp时用到的参数

或者使用img2webp可直接转：

img2webp -loop 0 -d 6000 image_0@3x.png -d 3000 image_1@3x.png -d 3000 image_2@3x.png -o out.webp

查看webp动画图片

使用vwebp，下载地址：

https://developers.google.com/speed/webp/download

downloadPath/bin/vwebp name.webp

分解webp动画图片

webpmux -get frame 2 name@3x.webp -o frame_2.webp
webpmux -get frame 2 name@3x.webp -o frame_2.png

优化建议

webp图片不能放入assets，所以一般我们可能放2x和3x两张图，这时会有一种尺寸的图是冗余的。

建议2x和3x屏幕都直接使用3x的图片，唯一的问题是原来2x的设备解码2x图片会比现在解码3x图片快很多。

经测试发现使用了一张1M的webp动画图，在iphone11上运行，原来2x解码时间是1500ms，3x解码时间变成了3000ms。

在iphone6上运行2x的解码时间是14000ms，3x的解码时间是21000ms。