核心原理与收益

图片资源在移动端 H5 流量中占比较高，公开资料显示图片请求可占移动端流量的 40%~60%。WebP 是 Google 推出的一种图片格式，同时提供有损和无损压缩。相比传统格式，它在同等质量下体积更小。据 Google 官方介绍及相关技术文章披露，WebP 无损压缩图片比同样大小的 PNG 小约 26%，有损压缩图片比同样大小的 JPEG 小 25%~34%。体积减小意味着加载时间缩短和流量成本降低，直接影响用户体验和转化率。

注意：网传“压缩至十分之一”的说法严重偏离常态，实际工程中通常预期压缩率为 25%-35%，需根据具体图片内容测试。

方案一：HTML picture 标签（推荐）

这是目前最标准的实现方式，利用浏览器原生能力选择格式，无需 JavaScript 介入，性能最好。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="description">
</picture>

浏览器会优先加载 type 为 image/webp 的 source，如果不支持则自动降级加载 img 标签的 src。

方案二：JavaScript 动态检测（兼容旧设备）

如果无法修改 HTML 结构，或通过 JS 框架动态渲染图片，可使用以下完整检测与替换逻辑。该脚本会在页面加载完成后遍历所有图片并替换源。

function initWebP() {
  const image = new Image();
  image.onload = () => {
    const isSupport = true;
    replaceImages(isSupport);
  };
  image.onerror = () => {
    const isSupport = false;
    replaceImages(isSupport);
  };
  // 使用极小的 WebP 数据流进行检测
  image.src = 'data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==';
}

function replaceImages(support) {
  if (!support) return;
  const imgs = document.querySelectorAll('img');
  imgs.forEach(img => {
    const src = img.getAttribute('src');
    if (src && (src.endsWith('.png') || src.endsWith('.jpg') || src.endsWith('.jpeg'))) {
      img.src = src.replace(/\.(png|jpg|jpeg)$/i, '.webp');
    }
    // 处理 srcset
    const srcset = img.getAttribute('srcset');
    if (srcset) {
      img.srcset = srcset.replace(/\.(png|jpg|jpeg)/gi, '.webp');
    }
  });
}

// 页面加载完成后执行
window.addEventListener('load', initWebP);

方案三：构建工具自动化（Webpack/Vite）

在工程化项目中，建议通过构建工具自动转换图片格式，避免手动操作。

Webpack 配置示例：使用 image-minimizer-webpack-plugin

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g)$/i,
        use: [
          {
            loader: 'image-minimizer-webpack-plugin',
            options: {
              minimizer: {
                implementation: require('image-minimizer-webpack-plugin'),
                options: {
                  convertTo: 'image/webp',
                },
              },
            },
          },
        ],
      },
    ],
  },
};

Vite 配置示例：使用 vite-plugin-image-optimizer

import { ImageMinimizerPlugin } from 'vite-plugin-image-optimizer';

export default defineConfig({
  plugins: [
    ImageMinimizerPlugin({
      minimizerOptions: {
        plugins: [
          ['webp', { quality: 75 }]
        ]
      }
    })
  ]
});

方案四：CDN 边缘转换

如果图片存储在对象存储（如阿里云 OSS、腾讯云 COS）或经过 CDN，可开启云端自动转换功能，无需修改代码。

阿里云 OSS 示例：在图片 URL 后追加处理参数。

原始 URL：http://example.com/image.jpg
WebP URL：http://example.com/image.jpg?x-oss-process=format/webp

配合 JS 检测或 Accept 头识别，CDN 可自动返回 WebP 格式。需在 CDN 控制台开启“图片格式转换”或“智能压缩”功能。

验证方法

打开浏览器开发者工具（Network 面板），刷新页面并筛选图片请求。检查以下三点：

• 请求的文件后缀是否为.webp（在支持的设备上）。
• 对比响应头中的 Content-Type 是否为 image/webp。
• 观察传输大小（Transfer Size），确认体积是否较原图有明显下降（通常 25%-35%）。

在不支持 WebP 的设备或模拟器上，应确认加载的是 fallback 的 PNG/JPG 图片，且页面显示正常。

常见坑与注意事项

1. iOS 版本兼容性
iOS 系统从版本 14 才开始原生支持 WebP 格式。对于 iOS 13 及以下用户，必须提供 PNG 或 JPEG 回退，否则图片将无法显示。

2. 安卓早期版本限制
Android 从 4.0 开始支持 WebP，但在 4.2 之前不支持无损压缩、透明度 Alpha 通道和动画功能。如果业务涉及透明背景图，需特别注意旧安卓机型的表现，建议针对透明图单独保留 PNG 回退。

3. 透明度与动画成本
WebP 支持无损透明图层，但代价是会增加约 22% 的字节存储空间。对于不需要透明度的照片类素材，使用有损压缩性价比更高。

4. 首屏图片数量
即使使用了 WebP，也应控制首屏图片数量。建议首屏主图不超过 3 张，并对非首屏图片使用懒加载，避免并发请求过多导致阻塞。