在 WordPress 中使用 WebP 图像：完整指南

WordPress 5.8 开始支持 WebP 图像格式。这种现代格式能显著减小图像尺寸，有效提升网站加载速度和性能。本文将详细介绍 WebP 的优势、使用方法、兼容性注意事项以及 WordPress 的未来计划，帮助您更好地利用这一技术优化网站体验。

一、什么是 WebP？它为何重要？

WebP 是一种现代图像格式，可为网络图像提供卓越的无损和有损压缩。

• 核心优势：平均文件尺寸比同等质量的 JPEG 或 PNG 图像小 30%。
• 直接效益：网站加载速度更快，占用带宽更少，用户体验更佳。
• 浏览器支持：所有现代浏览器均已支持 WebP（可在 https://caniuse.com/webp 查看详情）。

自 WordPress 5.8 起，您可以在支持 WebP 的主机环境中，像上传 JPEG 或 PNG 一样直接上传和使用 WebP 图像，从而轻松提升网站性能。

二、为何使用 WebP？速度提升详解

将图片转换为 WebP 格式能从多个方面直接提升您的网站速度：

1. 更快的加载：图片尺寸更小，访客能更快看到完整页面。
2. 节省带宽：减少数据传输量，对移动用户和服务器流量都更友好。
3. 保留 WordPress 核心功能：自动享有 <code>srcset</code>（响应式图片）和懒加载等原生优化优势。
4. 广泛兼容：主流浏览器均已支持，可以立即投入使用。

三、如何创建与使用 WebP 图像

1. 创建 WebP 图像

您可以通过多种方式获得 WebP 图片：

• 图像编辑工具：如 Photoshop、GIMP 等，支持直接导出为 WebP 格式。
• 在线转换工具：推荐使用 https://squoosh.app/ 等在线工具。
• 命令行工具：使用 <code>cwebp</code> 等工具进行批量转换。

2. 在 WordPress 中使用

• 上传：将 WebP 图片像其他格式一样上传至媒体库。
• 使用：插入文章、页面或主题中，使用方法与 JPEG/PNG 完全相同。

四、重要注意事项与限制

虽然 WebP 功能强大，但在 WordPress 中使用时需注意以下技术细节：

五、WordPress 的未来计划

WordPress 核心团队正持续改进媒体处理功能：

1. 自动格式转换：正在探索（相关 https://core.trac.wordpress.org/ticket/55443）将上传的图像（如 JPEG）在生成“子尺寸”（缩略图）时自动转换为 WebP 格式，作为默认输出。
2. 支持更现代格式：团队也在关注 AVIF 和 JPEG XL 等下一代格式，它们在压缩率和资源消耗上更有优势。

六、常见问题 (FAQ)

1. 如何调整 WebP 图像的压缩质量？

开发者或插件可以使用 <code>wp_editor_set_quality</code> 过滤器，根据 MIME 类型单独设置质量。例如，将 WebP 质量设为 75：

// 为 WebP 图像设置质量为 75
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 );

2. 如果我上传 JPEG，能让 WordPress 自动生成 WebP 子尺寸吗？

默认情况下，WordPress 生成与上传文件格式相同的子尺寸。若想实现“上传 JPEG，自动生成 WebP 缩略图”，可关注相关实验性插件（详见此 https://core.trac.wordpress.org/ticket/55443）。

3. WordPress 多站点网络下，所有子站点都支持 WebP 吗？

默认不支持。 多站点网络在站点创建时确定允许上传的文件类型。核心团队正在修复此问题（#53167）。目前，您可以通过以下代码片段（放置在 MU 插件中），为网络中的所有站点添加 WebP 支持：

// 确保所有子站点都支持 WebP
add_filter(
    'site_option_upload_filetypes',
    function ( $filetypes ) {
        $filetypes = explode( ' ', $filetypes );
        if ( ! in_array( 'webp', $filetypes, true ) ) {
            $filetypes[] = 'webp';
        }
        $filetypes = implode( ' ', $filetypes );
        return $filetypes;
    }
);

通过本文的指引，您可以充分利用 WebP 图像格式，在保证视觉质量的前提下，有效优化 WordPress 网站的性能与加载速度。