@qidiandasheng
2022-08-15T09:26:28.000000Z
字数 1747
阅读 689
性能优化
WebP 的诞生起初是因为 Google 开发了一种基于 VP8 视频编码格式的 WebM 视频格式,Google 的工程师意识到 WebM 格式非常适合压缩关键帧,由此开发了 WebP 图片格式。
WebP 最初发布于 2010 年,主要目标是使图片质量和 JPEG 格式质量相同的情况下,减少图片文件的体积,籍此减少互联网上图片的发送时间和流量消耗。发布不久之后,WebP 便被整合到 Chrome 以及 Android 系统中,并且 Google 发布了函数库,让 iOS 应用等其他工具支持 WebP 格式。
WebP 图片格式派生自 VP8 视频编码,同时提供有损压缩和无损压缩:
有损 WebP 压缩使用的图像编码方式与 VP8 视频编解码器中压缩视频关键帧的方法相同。利用图像已编码部分预测未编码部分,将图像细分来进行预测处理,分块越细预测越准确。获取编码数值后将原图像数据减去预测数据得到差值,仅对差值进行编码,以此控制大小;
无损 WebP 压缩使用已知的图像片段来精确地重建新的像素,在无法找到相应的匹配值的情况下,使用本地调色板进行优化。
pngcrush
无损压缩后,webp依旧可减少28%的体积。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
有损压缩:
cwebp -q 60 -af add_disable_icon@3x.png -o add_disable_icon@3x.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
脚本工具直接png转webp动画:
./png2animation_webp.sh pngPath 50 '-lossless -q 75'
或者使用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
使用vwebp
,下载地址:
https://developers.google.com/speed/webp/download
downloadPath/bin/vwebp name.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。