当前位置：首页 > news >正文

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

news 来源：原创 2025/8/24 3:59:04

在 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

打开 Chrome 开发者工具（F12）。
切换到“Lighthouse”选项卡。
选择“性能”类别，生成报告。
查看“机会”下的“使用下一代格式提供图片”（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>、构建工具、服务端优化）则是实践指南。！