WordPress 6.5 将支持 AVIF 图片,这是一种现代图像格式,与以前的格式(如 JPEG、PNG 甚至 WebP)相比,它在图像质量和压缩方面有了显着改进。AVIF 图像比 JPEG 小最多 50%,同时保持相同的图像质量。AVIF 图像还支持多种颜色(包括 HDR),并且生成比 JPEG 更清晰的图像,尤其是在细节丰富的区域。
从 WordPress 版本 6.5 开始,您可以在 WordPress 中上传和使用 AVIF 图像,就像现在使用 JPEG 或 PNG 图像一样 – 只要您的托管服务支持 AVIF。将图像切换为 AVIF 格式可能会提高网站的性能和网站访问者的体验。
AVIF 图片的好处
AVIF 图像比 JPEG 图像小得多,因此页面加载速度更快,传输所需的带宽更少。AVIF 图像仍然享有 WordPress 默认添加的响应式图像、获取优先级和延迟加载的所有优点。最后,所有主要浏览器都支持AVIF,因此大多数网站现在就可以开始使用它们。
创建 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/jpg'] = 'image/avif';
return $formats;
}
add_filter( 'image_editor_output_format', 'filter_image_editor_output_format' );
如果我使用 WordPress 多站点,我的所有站点都可以使用 AVIF 图像吗?
否。多站点存储创建站点时允许用户上传的文件类型。我们仍在#53167中努力改进这一点。同时,为了确保网络上的所有现有站点都允许 AVIF 文件,您可以通过 必要插件 mu-plugins 的方式使用 site_option
过滤器将 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' );