即日起我们全面使用WEBP格式的图像输出

图片来源：@shmuelr

再有两个月就2025年了，尽管在2019年ProcessWire就增加了这一特性，但是为了浏览器的全面兼容，我们一直未全面使用webp格式的图片格式。

WEBP是一种输出格式

和BLOB的视频流一样，WEBP纯粹是一种输出格式，而不是输入格式，因此您在后台无法上传后缀为.webp格式的文件。您仍然需要为您提供的任何WEBP图像提供后备JPG或PNG文件，因为并非所有浏览器都能够使用WEBP图像。

此外，WEBP 图像具有一种压缩类型，使其不适合任何进一步的操作或转换，因此 PNG 和/或 JPG 图像仍应是您上传到网站的任何图像的标准。 ProcessWire提供的所有WEBP图像都是从源PNG或JPG图像自动生成的。

使用 WebP 图像格式有许多优点，使其成为一种受欢迎的选择，尤其是在网页开发和优化中。

以下是使用 WebP 的几个关键原因

1. 更高的压缩效率

• WebP 提供了更小的文件大小：相比 JPEG 和 PNG 格式，WebP 可以在保持图像质量的前提下显著减少文件大小。具体来说，WebP 图像的文件大小通常比 JPEG 小 25% 到 34%，而比 PNG 小 26% 到 45%。这有助于减少带宽占用和加快网页加载速度。
• 支持有损和无损压缩：WebP 支持有损和无损两种压缩方式，能够灵活地在图像质量和文件大小之间进行权衡。

2. 支持透明度（alpha 通道）

• 与 PNG 类似，WebP 还支持透明度（alpha 通道），但文件大小更小。因此，可以用它来替代 PNG 格式，从而降低图片加载时间，提升网页的性能。

3. 支持动画

• WebP 还可以创建动画图像，类似于 GIF 文件。与 GIF 相比，动画 WebP 文件的体积通常更小，支持 24 位颜色和 8 位透明度，使得动画效果更流畅，色彩表现更好。

4. 减少页面加载时间

• 因为 WebP 图像的文件更小，浏览器可以更快地加载图像，减少网页的加载时间。这对于移动设备上的用户特别有帮助，可以降低数据使用量并提高网站的响应速度。

5. SEO 优势

• 更快的页面加载速度有助于提高搜索引擎排名。Google 等搜索引擎将页面速度作为排名因素之一，使用 WebP 可以提升页面速度，从而提高 SEO 效果。

6. 更好的用户体验

• 快速加载的页面可以减少用户等待时间，提高用户的留存率和满意度。这对于电商网站、新闻门户等依赖于高用户参与度的场景特别重要。

适用场景的限制

尽管 WebP 有很多优势，但在某些场景下使用其他图像格式可能更合适：

• 如果需要向不支持 WebP 的浏览器提供兼容性（可以通过提供备用图像格式来解决）。
• 某些特定情况下，PNG 或 JPEG 可能在极高压缩比的情况下表现出更高的图像质量。

总体而言，WebP 是一种高效的图像格式，适合用于网站优化，以提高加载速度和用户体验。

哪些浏览器不支持webp文件

目前大多数现代浏览器都支持 WebP 图像格式，但仍有一些较旧的浏览器或版本可能不支持 WebP 格式。以下是对浏览器支持情况的概述：

不支持 WebP 格式的浏览器：

1. Internet Explorer（IE）：所有版本的 Internet Explorer 都不支持 WebP 格式。这包括 IE 11 及更早版本。
2. Safari（较旧版本）：Safari 浏览器在 14 版本之前不支持 WebP。在 macOS 和 iOS 上，Safari 14 及以上版本才添加了对 WebP 的支持。
3. 较老版本的 Opera Mini：尽管大多数现代浏览器都支持 WebP，但一些旧版本的 Opera Mini 浏览器不支持该格式。

支持 WebP 的浏览器：

• Google Chrome：自 2011 年的 Chrome 17 版本起就支持 WebP。
• Firefox：自 2019 年的 Firefox 65 版本起支持 WebP。
• Microsoft Edge：基于 Chromium 内核的 Edge 版本支持 WebP。
• Opera：Opera 11.10 及以上版本支持 WebP。
• Safari：从 Safari 14 开始支持 WebP。

总体来看，除了较旧的 Internet Explorer 和 Safari 版本外，大多数现代浏览器都支持 WebP 格式。如果需要向不支持 WebP 的浏览器提供兼容性，可以考虑使用 <picture> 标签来提供备用的图像格式（如 JPEG 或 PNG）。

<picture>
  <source srcset="<?= $image->webp->url ?>" type="image/webp">
  <img src="<?= $image->url ?>" alt="<?= $image->description ?>">
</picture>