你为什么要关心？
WebP 图像比它们的 JPEG 和 PNG 图像小——通常文件大小减少 25-35%。这减少了页面大小并提高了性能。
- YouTube 发现切换到 WebP 缩略图可使页面加载速度提高 10%。
- Facebook的经历为JPEG为25-35％，节省的文件大小和文件大小节省80％的PNG图像时，他们转而使用WebP的。
WebP 是 JPEG、PNG 和 GIF 图像的绝佳替代品。此外，WebP 提供无损和有损压缩。在无损压缩中，不会丢失任何数据。有损压缩可减小文件大小，但可能会降低图像质量。
将图像转换为 WebP
人们通常使用以下方法之一将他们的图像转换为 WebP：cwebp 命令行工具或Imagemin WebP 插件（npm 包）。如果您的项目使用构建脚本或构建工具（例如 Webpack 或 Gulp），Imagemin WebP 插件通常是最佳选择，而 CLI 是简单项目或您只需要转换图像一次的不错选择。
当您将图像转换为 WebP 时，您可以选择设置各种压缩设置——但对于大多数人来说，您唯一需要关心的是质量设置。您可以指定从 0（最差）到 100（最好）的质量级别。值得玩这个发现哪个级别是图像质量和文件大小之间的正确权衡，以满足您的需求。
使用 cwebp
使用 cwebp 的默认压缩设置转换单个文件：
cwebp images/flower.jpg -o images/flower.webp
使用质量级别转换单个文件50：
cwebp -q 50 images/flower.jpg -o images/flower.webp
转换目录中的所有文件：
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done使用 Imagemin
Imagemin WebP 插件可以单独使用，也可以与您喜欢的构建工具（Webpack/Gulp/Grunt/等）一起使用。这通常涉及向构建脚本或构建工具的配置文件添加约 10 行代码。以下是如何为Webpack、Gulp和Grunt执行此操作的示例。
如果您不使用这些构建工具之一，则可以将 Imagemin 本身用作 Node 脚本。此脚本将转换images目录中的文件并将它们保存在compressed_images目录中。
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});提供 WebP 图像
如果您的站点仅支持 WebP 兼容浏览器，您可以停止阅读。否则，将 WebP 提供给较新的浏览器，并为旧浏览器提供后备图像：
前：
<img src="flower.jpg" alt="">
后：
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
的，和标签，包括它们是如何相互下令，所有的相互作用来实现这一最终结果。
picture
该标签提供了封装零个或多个标签，一个标签。
来源
该标签指定的媒体资源。
浏览器使用它支持的格式的第一个列出的源。如果浏览器不支持标签中列出的任何格式，它会回退到加载标签指定的图像。
陷阱！
- “首选”图像格式的标签（在本例中为 WebP）应首先列出，在其他标签之前。
- 该
type属性的值应该是图像格式对应的 MIME 类型。图像的MIME 类型及其文件扩展名通常相似，但它们不一定相同（例如.jpgvs. image/jpeg）。
图片
该标签是什么使得在不支持的浏览器此代码的工作标签。如果浏览器不支持该标签，它将忽略它不支持的标签。因此，它只“看到”标签并加载该图像。
陷阱！
- 该标签应始终包括在内，它应该永远被列在最后，毕竟标签。
- 标签指定的资源应采用普遍支持的格式（例如 JPEG），因此可以用作后备。
验证 WebP 使用情况
Lighthouse 可用于验证您网站上的所有图像是否都是使用 WebP 提供的。运行 Lighthouse 性能审计（Lighthouse > Options > Performance），并在下一代格式审计中查找Serve 图像的结果。Lighthouse 将列出所有未在 WebP 中提供的图像。
