如何让 WordPress 支持 AVIF 格式图片？提升速度

AVIF 是一种图像格式，它基于 AV1 视频编解码器，提供了比传统的 JPEG、PNG 和 WebP 更高的压缩率和更小的文件大小。相较于其他图像格式，AVIF 不仅能够在保证较高图像质量的同时大幅减小文件体积，还支持更丰富的色彩和透明度，适应了现代网站对图像优化的需求。

为什么要让 WordPress 支持 AVIF 呢？首先，AVIF 图像格式在压缩效率和图像质量方面都有明显优势。对于使用大量图片的 WordPress 站点来说，切换到 AVIF 可以显著提升网站的加载速度，尤其是在移动设备上，用户体验更加流畅。此外，AVIF 的文件体积远小于 JPEG 或 PNG，意味着你可以减少带宽消耗，提升 SEO 排名。

再者，随着 AVIF 格式的普及，越来越多的网站开始使用这一格式来优化图片。为了跟上技术发展的步伐，我们也需要支持 AVIF 格式，以确保网站的图片能够在各种现代浏览器中正确展示，并适应日益增长的网络需求。

1. 什么是 AVIF 格式？

1.1 什么是 AVIF 格式？

AVIF（AV1 Image File Format）是一种新的图像格式，基于开源的视频编解码器 AV1。它旨在通过更高效的图像压缩，提供更小的文件大小，同时保持图像质量。AVIF 格式支持从静态图片到动画的多种类型，且能够以更小的文件大小实现与传统格式（如 JPEG、PNG）相媲美甚至更好的图像质量。

AVIF 格式支持透明度（类似 PNG）以及高动态范围（HDR）图像，适应了现代显示设备和网络的需求。由于其出色的压缩性能和多种图像特性，AVIF 格式逐渐成为网络图像优化的热门选择。

1.2 与常见格式（JPEG、PNG、WebP、GIF）相比的优势

与传统的图像格式相比，AVIF 在多个方面展示了明显的优势：

特性 🔧	AVIF 🖼️	JPEG 📷	PNG 🖌️	WebP 🌐	GIF 🎞️
压缩方式	有损&无损 效率极高	有损 效率一般	无损 文件较大	有损&无损 效率较高	无损 颜色受限
文件大小	最小 比 WebP 小 30-50%	中等 大于 AVIF/WebP	较大 不适合网页	较小 优于 JPEG/PNG	较小 动画占用大
图像质量	高质量 低比特率表现优	良好 高压缩有瑕疵	无损 适合透明	高质量 接近 AVIF	低质量 最多 256 色
透明支持	支持 Alpha 通道	不支持	支持 完整 Alpha 通道	支持 Alpha 通道	支持 二值透明
动画支持	支持 高效动画	不支持	不支持	支持 高效动画	支持 基础动画
浏览器支持	增长中 Chrome、Firefox、Edge 支持 Safari 部分支持	全面支持	全面支持	广泛支持 现代浏览器	全面支持
颜色深度	10-12 位 支持 HDR	8 位 不支持 HDR	8-24 位 不支持 HDR	8 位 不支持 HDR	8 位 最多 256 色
使用场景	现代网页 高质量小文件	照片 传统网页	标志、图标 透明需求	网页图像 动画	简单动画 表情包
编码速度	较慢 算法复杂	快速 优化成熟	中等 视内容而定	中等 优于 AVIF	快速 格式简单
解码速度	中等 硬件支持增加	快速 高度优化	快速 解码简单	快速 网页优化	快速 轻量解码

1.3 AVIF 图像格式的缺点

尽管 AVIF 具有许多优点，但它仍然有一些缺点和局限性：

• 开发工具的支持不足：尽管 AVIF 格式正在逐渐被各大平台采纳，但对于开发者来说，AVIF 的支持仍然相对较新。一些图像处理工具、图像编辑软件或内容管理系统可能需要额外的插件或配置才能完全支持 AVIF。
• 浏览器兼容性：尽管现代浏览器（如 Chrome、Firefox 和 Safari）已经开始支持 AVIF，但一些旧版浏览器和某些浏览器的移动端版本，仍然不完全支持 AVIF。这意味着，如果你希望让所有用户都能看到优化后的图像，可能还需要提供回退机制（例如 WebP 或 JPEG）。
• 编码和解码性能：与 JPEG 或 PNG 相比，AVIF 的编码和解码过程需要更多的计算资源。在某些低端设备或高流量环境下，这可能导致一些性能瓶颈，尤其是在图像数量较多或需要动态生成图像的场景中。

2. 让 WordPress 支持 AVIF 格式图片

我标题写的是“如何让 WordPress 支持 AVIF 格式图片？”其实这是个伪命题，因为从 WordPress 6.5 版本开始，AVIF 格式就已经得到了内建支持。不过，现实中大多数情况下，我们的服务器并不直接支持该格式，因此实际上还是无法使用。

昨天，我更新了电脑上的 Photoshop 到最新版的 26.8 版本，发现它已经明确支持将图像转换并存储为 AVIF 格式了。这让我意识到，是时候让我的 WordPress 博客也全面支持 AVIF 格式了，借此提升网站加载速度，优化图片存储。

2.1 检查 WordPress 环境状态

AVIF 格式是否能在 WordPress 中使用，取决于服务器的图片处理库是否支持。WordPress 内置了对 Imagick 和 LibGD 这两个图像处理库的支持，只有当服务器安装了这两个库中的至少一个，才能正常处理 AVIF 图片。

为了快速检查网站是否支持 AVIF 格式，你可以进入后台的「工具」菜单，选择「站点健康」，然后点击「信息」标签，展开「媒体处理」部分。在支持的格式列表中查找“AVIF”，如果能看到 AVIF 格式，就说明你的服务器已经支持上传和使用 AVIF 格式的图像。

2.2 让服务器支持 AVIF 图像格式

根据之前在健康状态检查中得到的结果，我们可以看到，Kevin's Space 当前仅支持 GIF、JPEG、PNG、WebP 和 BMP 等常见格式，Imagick 也未启用。虽然 Imagick 支持更丰富的图像格式并能提供更高质量的图像处理，但它的资源消耗相对较大，尤其在处理大量图像时，可能会对服务器性能产生较大负担。

因此，为了能够支持 AVIF 格式，我决定通过 GD 库安装扩展。GD 库是 WordPress 支持的默认图像处理库，虽然它没有像 Imagick 那样强大的功能，但它的资源消耗较低，适合在服务器资源有限的情况下使用。

? 步骤 1：检查 GD 库的当前状态

在开始安装之前，我们先用以下命令检查当前 GD 库支持的图像格式：

root@aliyun:~# php -r 'print_r(gd_info());'
Array
(
    [GD Version] => bundled (2.1.0 compatible)
    [FreeType Support] => 1
    [FreeType Linkage] => with freetype
    [GIF Read Support] => 1
    [GIF Create Support] => 1
    [JPEG Support] => 1
    [PNG Support] => 1
    [WBMP Support] => 1
    [XPM Support] =>
    [XBM Support] => 1
    [WebP Support] => 1
    [BMP Support] => 1
    [AVIF Support] =>
    [TGA Read Support] => 1
    [JIS-mapped Japanese Font Support] =>
)

以上返回 GD 库支持的所有格式及功能。输出结果中 AVIF 为空，说明当前确实是不支持该功能的。

? 步骤 2：安装和配置 libavif 扩展

为了让 GD 库支持该格式，我们需要安装并配置libavif库，确保图像处理库能够解码和编码 AVIF 图像。操作如下：

额……由于需要 PHP 8 以及 Debian 10 以上的版本支持，博主决定不再继续折腾了，本文烂尾了，抱歉抱歉！！！

? 步骤 3：在此检查 GD 库并重启 Web 服务器

首先，检查 GD 库是否支持 AVIF 格式。如果支持，可以直接上传一个 AVIF 图像进行测试。同时，别忘了重启 Web 服务器（Apache 或 Nginx）以确保配置生效。在宝塔面板中，可以方便地直接重启 PHP 和 Web 服务器。

3. 处理兼容性问题

尽管现代浏览器（如 Chrome、Firefox、Safari 等）已经广泛支持 AVIF 格式，但仍然有一些较老版本的浏览器无法识别这一格式。因此，为了确保用户体验，我们需要使用回退机制，确保在不支持 AVIF 的浏览器中，图片能够正常加载。

可以通过 HTML 中的 <picture> 标签来实现这一回退机制。通过这种方式，当浏览器不支持 AVIF 时，会自动加载备用格式，如 WebP 或 JPEG。以下是一个常见的实现方式：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="image description">
</picture>

在这个示例中，浏览器首先尝试加载 AVIF 格式的图片。如果不支持，会自动加载 WebP 格式；如果 WebP 也不支持，则加载 JPEG 格式。这种方式确保了图片的兼容性，避免出现图片无法显示或加载错误的情况。

---

启用 AVIF 格式后，你可以使用像 PageSpeed Insights 或浏览器开发者工具等，来检查图片加载的速度和整体网站的性能。如果 AVIF 格式显著提高了加载速度，进一步优化图像压缩率，将有助于降低带宽占用和提高用户体验。

为了更好地优化性能，还可以结合使用缓存插件（如 WP Rocket）和 CDN 加速。通过将图像和其他资源缓存到 CDN，能够让用户从距离较近的服务器加载图像，进一步提升页面加载速度，并减少服务器压力。