0WordPress的标志使用 wordpress 自动生成和提供 avif 图像

我花了很多时间优化这个网站的性能, 作为正在进行的工作的一部分,我监控可以帮助提高访问速度的新技术. 我一直在跟踪下一代图像格式的采用情况,现在网络浏览器的支持相当普遍,是时候弄清楚如何在 wordpress 中使用这些新格式了.

需要多个步骤,我已将其分解为下面的标题

在 nginx 中启用支持

第一步是启用您的网络服务器 (就我而言,nginx) 识别新格式的 mime 类型. 为此,您需要编辑可能在 /etc/nginx/mime.types 中找到的 mime.types. 我添加了以下部分

在文件可用时自动提供文件

下一步是告诉 nginx 在文件存在时自动提供文件 (并退回到不存在新格式文件的旧格式)
为此,首先编辑主 nginx 配置文件 (通常 /etc/nginx/nginx.conf) 并在 http 中添加以下部分{} 配置部分

请注意,我只是想为 jxl 服务 (JPEG-加大码) 或avif文件, 你可以添加更多选项 (按优先顺序!) 如果你希望.
下一个, 您需要在服务器下添加以下内容{} nginx 配置部分 (它可能位于主配置文件中,也可能位于单独的配置文件中,具体取决于您如何设置 nginx 配置结构)

现在,当任何支持较新格式的浏览器要求提供 image.jpg 时,nginx 将查找 image.jpg.jxl 然后是 image.jpg.avif 然后是 image.jpg.webp 最后是 image.jpg. 接下来我们需要在wordpress中启用它们

在 wordpress 中启用下一代格式

将以下代码添加到您的functions.php (理想情况下,在子主题中执行此操作,以便在更新主题时不会覆盖更改)

请注意,我还启用了对 SVG的 同时图像

现在,您实际上可以上传下一代格式的图像,并在需要时直接在 wordpress 中使用它们, 但我不建议这样做,因为许多旧浏览器还不支持它们——而且我们已经设置了 nginx 来智能地为它们提供服务,所以我们应该利用它. 我们要做的是在我们上传图片的时候自动生成新的格式 (已经有插件可以为 webp 执行此操作, 但还没有对 jxl 或 avif 起作用).

安装 libheif

此步骤确实需要访问您的网络主机的命令行, 如果你运行一个,这是直接的 VPS, 但如果您使用的是共享主机,则可能不那么简单,在这种情况下,您可能需要向主机寻求支持
运行以下 bash 命令 (这些被选中用于 Centos下 8, 其他发行版可能略有不同)

在wordpressfunctions.php中添加自定义函数来压缩所有上传的图片 (和他们的缩略图) 转avif格式

与之前的 functions.php 步骤一样,我建议将其添加到子主题中

目前就是这样 - 您上传的所有图像都将转换为 avif 副本 (保留原件). 您可以使用插件重新生成所有图像以创建 avif 文件. 注意——我还没有设置 JPEG-主流浏览器尚不支持 XL 压缩作为对它的支持 (虽然它在预发布浏览器中,所以它很快就会推出).

虽然我正在讨论下一代格式和优化,但我还有一个最后的技巧——压缩 SVG的 带有 gzip 的图像 (甚至更好的 zopfli 和 brotli). 要做到这一点,需要另一个自定义函数……

奖金: SVG的 压缩

请注意,您需要在 nginx 配置中启用 gzip_static 和 brotli_static.

为新版本自行编译

我发现在 Centos 上最新版本的 heif-enc 是 1.7 创建avifs时有很多错误. 所以我选择编译我自己的更新 (1.12) 构建并使用它. 这样做有点复杂,因为它需要 aom 编解码器作为共享库. 为此,请运行以下 bash 命令. 确保以普通用户身份运行它们, 不是 root 用户. 另请注意,其中一些命令可能不是严格需要的, 我花了一段时间才让它工作,我只是记下了有效的东西——我绝不是 Linux 专家!

一旦你这样做了, 通过运行确保它工作 php -a 并运行以下命令

你应该得到一个完整的输出, 不只是一个 1 线路错误. 假设工作正常,您可以修改您的functions.php,以便每个shell-exec引用都指向/usr/local/bin/heif-enc,而不仅仅是heif-enc

认为我们已经错过了什么? 让我们通过下面的评论知道. 如果您想订阅,请使用菜单上的订阅链接右上方. 您还可以通过使用下面的链接社会分享这与你的朋友. 干杯.

Leave a Reply