WebP是一种现代图像格式,可为网络图像提供更好的无损和有损压缩。WebP 图像的平均尺寸比 JPEG 或 PNG 等效图像小 30%,因此网站运行速度更快,占用带宽更少。据 caniuse 称,所有现代浏览器都支持 WebP。
从 WordPress 版本 5.8 开始,您可以在 WordPress 中上传和使用 WebP 图像,就像现在上传和使用 JPEG 或 PNG 图像一样(只要您的托管服务支持 WebP)。将图片转换为 WebP 格式将提高网站性能,改善网站访问者的体验。
WebP 如何帮助您提高页面打开速度
WebP 图像的尺寸明显小于 JPEG 图像,因此网站访客可以更快地看到完整页面的加载。较小的图像占用的传输带宽更少,而且您的图像在默认情况下仍能获得srcset
和懒加载的所有响应式优势。最后,所有主流浏览器都支持 WebP,因此大多数网站现在就可以开始使用它们。
创建 WebP 图像
图像编辑工具支持以 WebP 格式导出,也可以使用命令行转换工具或基于网络的工具(如Squoosh)。将图片保存为 WebP 格式后,将其上传到 WordPress,然后像使用其他图片一样使用它们。
使用 WebP 图像
WebP 图像可以像 WordPress 中的其他图像一样使用,但有一些小的注意事项。
WebP 图像支持有损和无损压缩,以及动画格式和对透明图像的支持。在 WordPress 中,只有当托管服务器使用 Imagick(PHP库)时才支持无损 WebP格式,直到 LibGD 添加支持。此外,调整大小后的图像尚不支持动画和 alpha 格式(当您以这些格式上传时,会改为创建有损图像)。
媒体库中的 WebP 支持要求您的 Web 服务器的图像处理库(WordPress 支持 Imagick 和 LibGD)支持 WebP 格式。幸运的是,这些库已经支持 WebP 一段时间了,因此支持范围很广。如果您的 Web 服务器不支持 WebP,则当您尝试上传 WebP 图像时会看到一条错误消息。
如果您的受众中有大量使用不支持的浏览器(如 IE11)的用户,请避免使用 WebP 图像,或加入浏览器 polyfillThe
未来计划
媒体组件团队还在探索让 WordPress 对上传的图像执行图像格式转换的选项——使用 WebP 作为小尺寸图像的默认输出格式。您可以在 trac ticket上跟踪进度并测试此功能。我们还在关注更现代的格式,如 AVIF 和 JPEGXL,它们既能提高压缩率,又能进一步减少压缩所需的资源。
FAQs
如何微调 WebP 图像的压缩质量设置?
开发者或者插件可以使用wp_editor_set_quality
过滤器来设置质量设置,传递的mime类型可以按类型设置,例如:
// Use a quality setting of 75 for WebP images. function filter_webp_quality( $quality, $mime_type ) { if ( 'image/webp' === $mime_type ) { return 75; } return $quality; } add_filter( 'wp_editor_set_quality', 'filter_webp_quality', 10, 2 );
如果我启用过滤器使用 WebP 子尺寸,但上传 JPEG,会发生什么情况?子尺寸必须与原始尺寸一致吗?
默认情况下,WordPres 会创建与上传文件类型相同的子尺寸图像,因此上传 WebP 文件会在您的网站上获取 WebP 文件。如果您想尝试上传 JPEG 并让 WordPress 自动将这些图像转换为 WebP 以用于子尺寸图像,请查看此
Plugins(相关 trac ticket).
如果我使用 WordPress
多站点,我的所有站点都可以使用 WebP 图像吗?
否。多站点存储创建站点时允许用户上传的文件类型。我们正在#53167中努力改进这一点。同时,为了确保网络上所有现有站点都允许 WebP 文件,您可以使用site_option
网络 mu-plugins 中的过滤器为所有网络站点添加webp
允许的文件类型:
// Ensure all network sites include WebP support.
add_filter(
'site_option_upload_filetypes',
function ( $filetypes ) {
$filetypes = explode( ' ', $filetypes );
if ( ! in_array( 'webp', $filetypes, true ) ) {
$filetypes[] = 'webp';
}
$filetypes = implode( ' ', $filetypes );
return $filetypes;
}
);