如何将 JPG 转 WebP 加速网站

← 返回博客

如何将 JPG 转 WebP 加速网站

· 5 分钟阅读

WebP 能节省多少体积？

WebP 是 Google 推出的现代图片格式，在相同视觉质量下，有损 WebP 比 JPG 平均小 25–35%，无损 WebP 比 PNG 平均小 25–34%。对于一个图片密集型页面，这意味着数百 KB 甚至数 MB 的节省，直接缩短首屏加载时间，改善 LCP 指标。

• 典型照片（1920×1080）：JPG 约 350 KB，WebP 约 220 KB，节省约 37%
• 产品图（800×800）：JPG 约 120 KB，WebP 约 78 KB，节省约 35%
• Banner 图（1440×500）：JPG 约 180 KB，WebP 约 115 KB，节省约 36%

方法一：在线工具（零配置最快速）

对于需要快速转换单张或少量图片的场景，使用在线工具是最省事的选择。本站提供的图片格式转换工具支持 JPG 转 WebP，无需安装任何软件，在浏览器中完成转换，文件不会上传至服务器，保护隐私。操作步骤：

1. 点击下方「打开工具」按钮
2. 上传或拖入 JPG 文件
3. 选择输出格式为 WebP，调整画质（建议 80–85）
4. 点击转换并下载

方法二：命令行 cwebp（批量处理首选）

Google 官方提供的 cwebp 工具是批量转换的标准方案，适合开发者和服务器端处理。

安装（macOS）：

brew install webp

单文件转换：

cwebp -q 82 input.jpg -o output.webp

批量转换当前目录所有 JPG：

for f in *.jpg; do cwebp -q 82 "$f" -o "${f%.jpg}.webp"; done

-q 参数控制画质（0–100），推荐 80–85，在文件大小和画质间取得良好平衡。

方法三：构建流水线集成（自动化最优）

对于有前端构建流程的项目，推荐将 WebP 转换集成到构建管道中，实现新图片自动转换。

Webpack 方案（imagemin-webpack-plugin）：

npm install imagemin-webp-webpack-plugin --save-dev

Vite / Rollup 方案使用 vite-plugin-imagemin，Next.js 内置 Image 组件已自动处理 WebP 输出，无需额外配置。

HTML picture 元素：WebP + JPG 双格式回退

为确保旧浏览器兼容性（虽然 2025 年 WebP 覆盖率已超 97%，但仍有极少数环境不支持），建议使用 `` 元素提供回退：

浏览器会优先加载 中的 WebP，若不支持则自动回退到 中的 JPG，完全无感知。

CDN WebP 自动分发

主流 CDN 服务（Cloudflare、AWS CloudFront、阿里云 CDN）均支持根据浏览器 Accept 请求头自动分发 WebP。启用方法：在 CDN 控制台开启「图片优化」或「WebP 自适应」功能，CDN 会自动在支持 WebP 的客户端返回 WebP 版本，无需修改 HTML 代码，对开发者透明。

性能提升前后对比

以一个典型的图片密集型落地页（含 8 张产品图）为例，从 JPG 迁移到 WebP 后的实测变化：

• 页面总图片体积：1.8 MB → 1.1 MB，减少 39%
• LCP（移动端 4G）：3.8 秒 → 2.6 秒，改善 32%
• PageSpeed Insights 性能分（移动端）：58 → 74
• Google Search Console 中「需改进」页面数量减少约 60%

总结

JPG 转 WebP 是提升网站速度最简单有效的方法之一。无论你选择在线工具、命令行还是构建流水线，整个过程都可在几分钟内完成，带来的性能收益却是持续的。从今天开始，用 WebP 替换你网站上的 JPG 图片吧。

立即尝试在线工具，无需安装，免费使用。

打开工具 →