WebP介绍

关于WebP

WebP，是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小。

在 Google 的明星产品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影，而 Chrome 网上商店甚至已完全使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团、小红书等都使用了WebP。同时也有一些针对 WebP 的图片格式转换工具，如 智图，iSparta 等

同时，谷歌也提出了动态WebP，拓展WebP使其支持动图能力。动态WebP相比GIF支持更丰富的色彩，并且也占用更小空间，更适应移动网络的动图播放。 （Android暂时仅facebook的开源库Fresco对其支持）

WebP的优点

• 压缩率高

PNG 转 WebP 的压缩率要高于 PNG 转JPEG压缩率

• 显示效果好

转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数，不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

• 占用空间小

据官方实验显示：无损WebP相比PNG减少26%大小；有损WebP在相同的SSIM（Structural Similarity Index，结构相似性）下相比JPEG减少25%~34%的大小；有损WebP也支持透明通道，大小通常约为对应PNG的1/3。（同时肉眼几乎无法看出差异）

75%有损压缩（大小仅原来的7%）

无损压缩（大小仅原来的12%）

• 加载速度快

使用100张不同格式的网络图片测试得知：WebP图片加载基本均快于jpg图片，加载速度正常快20%~30%，最快的有61.27%

WebP的缺点

• IOS，H5渲染需要插件

除了Android 4.0以上提供了WebP原生支持外，其他版本和IOS需要使用官方提供的解析库支持

各平台支持情况

在终端上的支持

• 对于在App中使用WebP，除了Android 4.0以上提供了静态WebP原生支持外，其他版本和IOS都可以直接使用官方提供的解析库来支持静态WebP

  Android iOS

• Android官方文档中说明了在Android4.0的机器上开始支持了webp图片格式，不过对于无损、透明的图片（设置了setAlpha），图像进行编码时会出错，导致图像无法显示。该问题在Android 4.2.1+解决了，详见官方文档

• 然而，对于动态WebP，目前只能找到facebook的开源库Fresco对其支持，不过Fresco最低仅支持API 9，且引用的相关库较多 Fresco

在浏览器上的支持

WebP应用

app场景

• Android4.0以上原生支持，Android 4.0 以下WebP 解析库
• iOS WebP 解析库

浏览器场景

• JavaScript 能力检测，对支持 WebP 的用户输出 WebP 图片, 参考jQuery Plugin of Cloudinary
• 使用 WebP 支持插件：WebPJS
• 哪些web浏览器本身支持WebP
• 如何检测浏览器对WebP的支持

后台场景（WebP转换）

• 谷歌webp开发者网站：the command line tools cwebp and dwebp for converting images to and from the WebP format, as well as tools for viewing, muxing and animating WebP images.
• 谷歌开发的 PageSpeed 模块：一个支持Nginx和Apache的模块，主要用来提高页面加载速度。其中有一个功能convert_jpeg_to_webp，可以实现当支持WebP的浏览器请求图片时，可以自动将jpg等转换成WebP
• 阿里云OSS图片格式转换也有提供相关的技术支持

渲染

• 根据google官网介绍，目前WebP与JPG相比较，编解码速度上，毫秒级别上：编码速度webp比jpg慢10倍，解码速度慢1.5倍。在我们的使用场景下，编码速度的影响可以被忽略，因为服务器会在用户第一次请求时，编码生成jpg图片对应的webp图片，之后都会被缓存下来，可以认为几乎所有用户的请求都能命中缓存。解码方面，则是每个用户拿到webp图片都必经的开销。
• 针对1.5倍的解码速度是否影响用户体验的问题，dbay团队进行了测试，50张同样质量的WEBP与JPEG加载的速度对比。 此测试表明，webp虽然会增加额外的解码时间，但是由于减少了文件体积，缩短了加载的时间，实际上文件的渲染速度反而变快了

对比图

清晰度

同一张图片，50%的JPEG处理跟77%的WEBP处理结果对比，大小接近

放大400%后，WebP格式图片较清晰，与原图肉眼上没有差别

占用空间

同一张图片，75%的JPEG处理以及75%WEBP处理结果对比

WEBP格式图片大小仅JPEG格式图片大小的一半，两者清晰度上WEBP格式的稍微好些

本地资源文件批量处理

需要注意的是，在我测试一些图片的时候，发现个别图片（具体什么为界限并不固定）转化成WebP图反而比压缩图体积大，有可能是原来的图片已经经过一定的压缩处理了，转换成75%有损WebP图反而会变大，但总体的占用空间还是少了一半，打包apk的占用空间也相应减少了。

官方解答：WebP图像会变化得比源图像更大吗

参考资料

官方文档

libwebp插件下载地址

WebP的介绍

WebP原理和Android支持现状介绍

Glide+阿里OSS+WebP 图片处理方案

阿里云OSS图片格式转换