[关闭]
@qidiandasheng 2022-08-15T01:26:28.000000Z 字数 1747 阅读 134

包体积之webp图片优化(😁)

性能优化


webp图片介绍

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

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

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

为什么要用webp

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

都说 WebP 厉害,究竟厉害在哪里?

压缩工具

使用文档

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

安装

  1. brew install webp

使用

无损压缩:

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

有损压缩:

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

png转webp动画工具

  1. 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动画:

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

或者使用img2webp可直接转:

  1. 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,下载地址:

  1. https://developers.google.com/speed/webp/download
  1. downloadPath/bin/vwebp name.webp

分解webp动画图片

  1. webpmux -get frame 2 name@3x.webp -o frame_2.webp
  2. 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。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注