WebP 图片格式

一种压缩率较大，适合网页使用的图片格式。由谷歌推出，Safari 和 IE 上暂不支持。

How can i detect browser support for webp

Intro

转换工具

Getting Started

下载 libwebp，使用 /bin/cwebp.exe 转换成 webp

cwebp -q 80 image.png -o image.webp

使用 /bin/dwebp.exe 转换回 png

dwebp -q 80 image.webp -o image.png

查看 webp

Chrome 等浏览器可以直接打开

兼容性处理，提供回退图片

picture会优先使用 source 中可用的类型和值，来替换 img 中的值。因此 img 是必填的。

<picture>
  <source type="image/webp" srcset="assets/tmp.webp">
  <img alt="" src="assets/tmp.png" />
</picture>

兼容性处理，第三方库

webp-hero 在不支持 webp 的浏览器中，使用 libwebp， 将 webp 图片渲染成 canvas，再转换成 png 格式。