优化 Web 性能：使用 WebP 图片（Uses WebP Images）

在 Web 开发中，图片资源的优化是提升页面加载速度和用户体验的关键。Google 的 Lighthouse 工具在性能审计中特别推荐“使用 WebP 图片”（Uses WebP Images），因为 WebP 格式在保持视觉质量的同时显著减少文件大小。本文将基于 Chrome 开发者文档，深入探讨 WebP 图片的优势、实现方法及注意事项，助你在2025年的 Web 项目中提升性能。

---

1. 什么是 WebP 图片？

1.1 定义

WebP 是一种由 Google 开发的现代图片格式，基于 VP8/VP9 视频编解码技术，支持有损和无损压缩，以及透明度和动画。它旨在替代 JPEG、PNG 和 GIF，提供更高的压缩效率。

1.2 WebP 的优势

• 文件大小更小：相比 JPEG，WebP 有损压缩可减少 25-34% 的体积；相比 PNG，无损压缩减少约 26%。
• 高质量：在相同体积下，WebP 提供更好的视觉质量。
• 多功能：支持透明度（类似 PNG）和动画（类似 GIF）。

1.3 Lighthouse 的关注点

Lighthouse 检查页面中的图片，评估是否可以通过转换为 WebP 节省字节，并在“机会”部分提供建议。

---

2. 不使用 WebP 的影响

2.1 带宽浪费

使用传统格式（如 JPEG 或 PNG）可能导致文件体积过大，例如，一个 500KB 的 JPEG 可能转换为 WebP 后仅需 150KB。

2.2 加载时间延长

更大的文件增加下载时间，尤其在移动网络下，延迟“首次内容绘制”（FCP）和“最大内容绘制”（LCP）。

2.3 性能得分下降

Lighthouse 的性能评分因未使用 WebP 而降低，影响用户体验和 SEO。

---

3. 如何识别优化机会？

3.1 使用 Lighthouse

1. 打开 Chrome 开发者工具（F12）。
2. 切换到“Lighthouse”选项卡。
3. 选择“性能”类别，生成报告。
4. 查看“机会”下的“使用下一代格式提供图片”（Serve Images in Next-Gen Formats），列出可转换为 WebP 的图片及节省字节。

3.2 手动检查

• 在开发者工具的“网络”面板中查看图片格式和大小。
• 对比相同图片的 JPEG/PNG 和 WebP 版本。

---

4. 使用 WebP 的优化策略

4.1 转换图片到 WebP

使用工具将现有图片转换为 WebP：

• 命令行：使用 cwebp：

  cwebp -q 80 image.jpg -o image.webp
  

  • -q：质量（0-100），80 是常见平衡点。
• GUI 工具：如 XnConvert、Photoshop（需插件）。

4.2 在 HTML 中使用 WebP

通过 <picture> 元素支持 WebP 并提供后备：

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

• 浏览器优先加载 WebP，若不支持则回退到 JPEG。

4.3 响应式 WebP

结合 srcset 提供不同分辨率的 WebP：

<img src="small.jpg"
     srcset="small.webp 320w, medium.webp 640w, large.webp 1280w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="响应式 WebP">

4.4 构建工具集成

• Webpack：使用 webp-loader：

  module.exports = {
      module: {
          rules: [
              {
                  test: /\.(png|jpe?g)$/i,
                  use: ['file-loader', 'webp-loader'],
              },
          ],
      },
  };
  

• Vite：使用 vite-plugin-webp：

  import webp from 'vite-plugin-webp';
  export default {
      plugins: [webp()],
  };
  

4.5 服务端优化

• 动态转换：使用 CDN（如 Cloudinary）根据请求返回 WebP：

  <img src="https://example.com/image.jpg?format=webp" alt="动态 WebP">
  

• 内容协商：服务器根据 Accept 头返回格式：

  location ~* \.(jpg|jpeg|png)$ {
      if ($http_accept ~* "webp") {
          rewrite ^/(.*)$ /webp/$1.webp last;
      }
  }
  

---

5. 示例：优化前后对比

优化前

<img src="large.jpg" alt="未优化图片">

• 文件大小：500KB（JPEG）。

优化后

<picture>
    <source srcset="large.webp" type="image/webp">
    <img src="large.jpg" alt="优化图片">
</picture>

• 文件大小：150KB（WebP）。
• 节省 70% 字节。

效果

• 下载时间从 1.5 秒降至 0.5 秒。
• LCP 从 2.5 秒缩短至 1 秒。
• Lighthouse 性能得分提升 10-15 分。

---

6. 注意事项

• 兼容性：WebP 在现代浏览器（Chrome、Firefox、Edge）中支持良好，但需提供 JPEG/PNG 后备。
• 质量控制：调整压缩质量，避免失真。
• 测试：在不同设备和网络条件下验证效果。

---

7. 总结

WebP 图片是优化 Web 性能的利器，通过其高效的压缩能力，可以显著减少文件大小，提升加载速度。Lighthouse 的审计为我们提供了优化方向，而本文介绍的策略（如 <picture>、构建工具、服务端优化）则是实践指南。！