WebP vs JPG vs PNG：网页图片格式怎么选

图片往往是网页里最大的体积来源。选对格式，能直接砍掉一大半流量、显著加快首屏加载。但 WebP、JPG、PNG 三者各有适用场景，选错要么画质差、要么体积大。本文给你一份清晰的选择指南。

三种格式各自的特点

JPG（JPEG）：最经典的有损压缩格式。体积小、适合色彩丰富的照片；但不支持透明、不支持动画，反复编辑会累积失真。

PNG：无损压缩，支持透明通道（Alpha）。适合图标、Logo、需要清晰边缘的图形；缺点是体积偏大，尤其是色彩丰富的图。

WebP：Google 推出的现代格式，兼顾了前两者的优点。同时支持有损和无损压缩、支持透明和动画。同等画质下，有损 WebP 比 JPG 小 25%–35%，无损 WebP 比 PNG 小约 20%。现代浏览器（Chrome、Edge、Firefox、Safari 14+）全部支持。

一张表对比

格式	压缩方式	透明	动画	体积	兼容性
JPG	有损	否	否	小	全平台
PNG	无损	是	否	大	全平台
WebP	有损/无损	是	是	最小	现代浏览器

怎么选

按场景做决策最实用：

• 照片、商品图、Banner → 优先 WebP；要兼容极老环境才用 JPG。
• 图标、Logo、需要透明背景的图 → 用 PNG，或用支持透明的 WebP 进一步压缩。
• 动图 → 用 WebP（动画）替代 GIF，体积优势明显。
• 新项目 → 默认 WebP，它是当前网页图片的最佳选择。

Canvas 压缩的 quality 参数

在前端用 Canvas 压缩图片时，toBlob(type, quality) 的 quality 取值是 0 到 1：

• 0.7–0.85 是体积与画质的最佳平衡区间。
• 低于 0.7 画质明显下降；高于 0.9 体积压不下去，性价比低。

透明图片转 JPG 时要注意：JPG 不支持透明，透明区会被填成背景色（通常是白色）。要保留透明，请输出 PNG 或 WebP。

实操

想把现有图片批量转成 WebP 或压缩到合适体积，可以用 UPTools 图片压缩工具，支持 JPG/PNG/WebP 互转、调节质量、批量处理，全部在浏览器本地完成。

总结

新项目默认 WebP；需要透明用 PNG 或 WebP；Canvas 压缩的 quality 别低于 0.7。按场景选格式，比盲目追求某一种更有效。