WordPress 6.5 版本开始将支持一种新的图片格式,叫做 AVIF。这种格式的图片不仅质量高,而且文件大小比旧格式的图片(比如 JPEG 或 PNG)小很多,可以减少一半的大小但保持一样的清晰度。AVIF 图片还能展示更多的颜色,特别是在图片细节丰富的地方看起来更清楚。
从 WordPress 6.5 版本起,只要你的网站托管支持 AVIF,你就能像上传 JPEG 或 PNG 那样上传和使用 AVIF 图片了。换成 AVIF 格式的图片可以让你的网站运行得更快,给访问者更好的体验。
AVIF 图片的好处
AVIF 格式的图片比 JPEG 小很多,这意味着网页能更快地加载,而且使用的网络流量也少。使用 AVIF 图片,你仍然可以享受 WordPress 提供的所有图片优化功能,比如自动调整图片大小、优先加载和懒加载。而且,现在大部分的主流浏览器都支持 AVIF 格式,所以大多数网站都可以开始使用它了。
创建 AVIF 图像
很多图片编辑软件现在可以让你把图片保存成 AVIF 格式。你也可以用命令行工具或网上的工具,比如 Squoosh,来转换图片。一旦你把图片转换成 AVIF 格式,就可以像其他任何类型的图片一样上传并在 WordPress 中使用。WordPress 甚至能自动帮你处理 AVIF 图片,详情请查看下面的常见问题部分。
在 WordPress 中使用 AVIF 图片很简单。
在 WordPress 中使用 AVIF 图像
在 WordPress 里,AVIF 格式的图片和其他类型的图片差不多,但有几个重点需要注意:
- WordPress 里的 AVIF 图片支持取决于你的网站服务器支不支持特定的图像处理库(比如 Imagick 和 LibGD)。你可以在 WordPress 后台的“工具”->“站点运行状况”下,点击“信息”标签,然后查看“媒体处理”部分,来确认是否支持 AVIF 格式。
- 如果你的网站访问者中有很多人用的是不支持 AVIF 的浏览器,你可能要考虑暂时不用 AVIF 格式的图片,或者添加一些额外的代码(称为 polyfill 脚本)来解决这个问题。
常问问题
如何调整生成的 AVIF 图像的压缩级别?
wp_editor_set_quality
这个过滤器允许你调整图片的质量设置。你可以根据不同的文件类型,比如 JPEG 或 PNG,来设定具体的质量。
// 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 图像吗?
对于多站点设置,WordPress 允许控制用户可以上传的文件类型。我们正在努力在 #53167 中进行改善。同时,你可以通过一个特殊的插件,即 ‘mu-plugins’(必须使用的插件),来确保你网络中的所有站点都支持 AVIF 文件。你只需要用 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' );
暂无评论内容