用 WebP 把博客加载时间砍掉 30〜40%
Tomoda Hinata工具作者与维护者发布于 2026年4月18日更新于 2026年4月26日约 3 分钟阅读
WebP 在所有现代浏览器中可用，相同观感下比 JPG 小 25〜35%。在内容站点，它对 Core Web Vitals（尤其 LCP）的提升性价比最高。质量取 82，JPG 回退仅留给 RSS，有原图就避免 JPG → WebP 的二次压缩。
本指南使用的工具
为什么选 WebP？
WebP 同时支持有损/无损以及 alpha 通道。照片比 JPG 小 25〜35%，UI 截图比 PNG 小 50%+ 也常见。Safari 14（2020）起所有现代浏览器原生解码，对现代受众几乎没有兼容成本。
应该选哪个质量？
照片选 82，最佳字节-像素比。低于 75 渐变（天空、皮肤）出现条带；高于 90，节省趋零。带文字的截图用无损 WebP — 比 PNG 还小约 25%。
还需要 JPG 回退吗？
基本不需要。早已淘汰的旧 iOS Safari 与旧 Android 已经不在统计里。剩下的边角是 RSS 阅读器和 Outlook 桌面预览，单独维护一个把图片地址改成 JPG 的 RSS feed 比给所有图片都做双编码划算。
已有 JPG 是否要转 WebP？
如果还有原图，直接从原图导出 WebP，避免 JPG → WebP 的二次有损压缩。如果只剩 JPG，多数情况下转换仍然划算 — 节省的带宽通常大于轻微的压缩损失。
怎么衡量收益？
前后跑 Lighthouse，重点看 LCP（Largest Contentful Paint）。内容站点的 LCP 元素往往就是首屏主图，把 1.8 MB PNG 换成 420 KB WebP 经常让页面从 Poor（≥3 秒）跳到 Good（<2.5 秒）。
操作步骤
约 2 分钟选择源文件
尽量用 PNG/RAW/TIFF 原图；只有 JPG 也可以。
打开 WebP 转换器
把文件拖入；首次加载后可离线运行。
设质量 82
照片默认值；带文字的截图改用无损模式。
替换博客资源
把文章中的图片替换并重新部署，再跑 Lighthouse 验证 LCP。
| 格式 | 文件体积 | LCP（5G 移动） |
|---|---|---|
| PNG（原图） | 1.8 MB | 3.4 秒（Poor） |
| JPG 质量 82 | 640 KB | 2.6 秒（Needs improvement） |
| WebP 质量 82 | 420 KB | 2.1 秒（Good） |
常见问题
Outlook 邮件支持 WebP 吗？
Outlook 桌面不支持，只显示 alt。邮件模板继续用 JPG，其他场景（网页、社交预览）用 WebP 没问题。
AVIF 比 WebP 更小吗？
通常小 20〜30%，但 Outlook 与部分老旧移动浏览器不支持。WebP 是当下的实用最优；新站可考虑配合 `<picture>` 兜底使用 AVIF。
WebP 支持透明吗？
支持 — 有 alpha 通道与无损模式，可视为非图标场景下 PNG 的超集。
WebP 动图比 GIF 好吗？
好得多 — 同等观感下大约是 GIF 的 30〜60%，浏览器支持范围一致。Web 端动图首选 WebP。
可以本地批量转吗？
可以 — 本站工具基于 WebAssembly，浏览器内一次处理 30 张，无需上传，无单价。
立即试用
Convert images to the modern WebP format
WebP Converter本文包含 AI 翻译，如发现错误欢迎告知。