WordPress6.5将支持AVIF格式图像

从 WordPress 版本 6.5 开始，您可以在 WordPress 中上传和使用 AVIF 图像，就像现在使用 JPEG 或 PNG 图像一样 – 只要您的托管环境支持 AVIF。将图像切换为 AVIF 格式可能会提高网站的性能和网站访问者的体验。

AVIF是一种现代图像格式，与以前的格式（如 JPEG、PNG 甚至 WebP）相比，它在图像质量和压缩方面有了显着改进。

AVIF 图像比 JPEG 小最多 50%，同时保持相同的图像质量。AVIF 图像还支持多种颜色（包括 HDR），并且生成比 JPEG 更清晰的图像，尤其是在细节丰富的区域。

AVIF 的优势

AVIF 图像比 JPEG 图像小得多，因此页面加载速度更快，传输所需的带宽更少。AVIF 图像仍然享有 WordPress 默认支持的响应式图像、获取优先级和延迟加载的所有优点。

如何创建 AVIF 图像？

许多图像编辑工具都支持导出为 AVIF。您还可以使用命令行转换工具或基于 Web 的开源工具，例如Squoosh。将图像保存为 AVIF 后，将它们上传到 WordPress 并像使用任何其他图像一样使用它们。WordPress 还可以自动为您创建 AVIF。

如何在 WordPress 中使用 AVIF 图像？

AVIF 图像的工作方式与 WordPress 中的任何其他图像格式类似，但有一些重要注意事项：

WordPress 中的 AVIF 取决于 Web 服务器图像处理库的支持（WordPress 内置了对Imagick和LibGD图像处理的支持）。您可以通过访问“工具”->“站点运行状况”，单击“信息”选项卡并展开“媒体处理”部分，最后在支持的格式列表中查找“AVIF”来检查wp- admin中是否支持 AVIF。

如果您的受众群体中有大量使用不受支持的浏览器的用户，请避免使用 AVIF 图像，或将浏览器polyfill排入队列。

如何调整生成的 AVIF 图像的压缩级别？

过滤wp_editor_set_quality 器可用于设置质量设置。传入的mime类型可以按类型设置，例如：

// Use a quality setting of 75 for AVIF images.
function filter_avif_quality( $quality, $mime_type ) {
    if ( 'image/avif' === $mime_type ) {
        return 75;
    }
    return $quality;
}
add_filter( 'wp_editor_set_quality', 'filter_avif_quality', 10, 2 );

如何输出无损 AVIF 图像？

使用 100 的压缩级别会将 AVIF 设置为无损模式。

当我上传 JPEG 时，WordPress 可以创建 AVIF 图像吗？

是的。开发人员可以使用image_editor_output_format过滤器来指定这种类型的上传转换。例如：

// Output AVIFs for uploaded JPEGs
function filter_image_editor_output_format( $formats ) {
    $formats['image/jpeg'] = 'image/avif';
    return $formats;
}
add_filter( 'image_editor_output_format', 'filter_image_editor_output_format' );

如果我使用 WordPress多站点，我的所有站点都可以使用 AVIF 图像吗？

否。多站点存储创建站点时允许用户上传的文件类型。为了确保网络上的所有现有站点都允许 AVIF 文件，您可以使用site_option网络 mu-插件中的过滤器将 avif 添加到所有网络站点允许的文件类型中：

// Ensure all network sites include AVIF support.
function filter_site_option_upload_filetypes( $filetypes ) {
    $filetypes = explode( ' ', $filetypes );
    if ( ! in_array( 'avif', $filetypes, true ) ) {
        $filetypes[] = 'avif';
    }
    return implode( ' ', $filetypes );
}
add_filter( 'site_option_upload_filetypes', 'filter_site_option_upload_filetypes' );