WebP 是一种现代图像格式，可为网络上的图像提供卓越的无损和有损压缩。使用 WebP，网站管理员和 Web 开发人员可以创建更小、更丰富的图像，从而提高 Web 速度。与 PNG 相比，WebP 无损图像的尺寸小 26%。WebP 有损图像比同等SSIM质量指数下的可比 JPEG 图像 小 25-34%。

无损 WebP以仅22% 的额外字节为代价支持透明度（也称为 alpha 通道）。对于可以接受有损 RGB 压缩的情况，有损 WebP 还支持透明度，通常提供比 PNG 小 3 倍的文件大小。

什么是 WebP

这是一种类似于 PNG/JPG/GIF 的图像格式，但它具有更多有趣的功能，使其更加通用。实际上，它是由 Google 开发和发布的。

它的一些主要特点：

1.它支持有损和无损压缩。

2.WebP 无损图像比 PNG 小 26%，比 JPEG 小 25-34%

3.由于它的尺寸更小，具有许多图像的网站变得更轻、更快且对 SEO 友好

提示：WebP 不能替代 JPEG 和 PNG 图像，不是所有浏览器都支持 WebP 格式。这就是为什么您还应该提供 JPEG/PNG 版本的图像，以防用户的浏览器不支持 WebP。

如何将图像转换为 WebP

1.在线图像转换器：您可以使用一些必须上传图像并进行转换的网站。转换后，您必须下载此文件并在您的项目中使用它。

2.软件：有些软件可以让您以 WebP 格式导出 png/JPEG 文件。可以试试Adobe Photoshop、Sketch等软件。

3.Node JS：您可以使用 nodeJs 脚本将任何图像转换为 WebP。我主要使用“ imagemin-webp”插件将图像转换为WebP。

网站如何使用WebP格式图像

因为有的浏览器不支持 WebP 格式（火狐、谷歌、百度、QQ、UC、安卓浏览器支持WebP 格式图像，IE、苹果浏览器不支持），这就是为什么您需要在 HTML 中提供后备图像。这样做是为了确保如果任何浏览器不支持 WebP，它将以另一种格式显示图像，例如 jpg/png。

通常，我们是这样写的

<img src="image/fish.webp" alt="棕鱼" />

但是如果用户的浏览器不支持 WebP，那么他将看不到任何图像。所以解决方案是使用后备图像。

<picture><source srcset="img/awesomeWebPImage.webp" type="image/webp"> <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> <img src="img/creakyOldJPEG. jpg" alt="替代文字！"> </picture>

在 HTML 中，您可以轻松使用后备图像。但是在 CSS 中兼容WebP，它有点复杂，就没有必要研究实施。

WebP 的缺点

您必须使用两组图像。一个是 WebP 格式，另一个是 png/jpg 格式，以确保支持所有浏览器。但是，我认为它的优点多于缺点，因为它使您的网页加载时间更快。