PNG、JPEG、WebP 怎么选
一句话结论
网页图片默认用 WebP：同等观感下比 JPEG 小 25-35%，还支持透明通道。PNG 只留给需要无损的场景（截图、图标、含文字的界面图）。JPEG 作为兼容性兜底，且照片类在极低码率下仍有优势。
核心区别对照
| 压缩类型 | PNG | JPEG | WebP |
|---|---|---|---|
| 透明通道 | 支持（Alpha） | 不支持 | 支持 |
| 动画 | 不支持（APNG 除外） | 不支持 | 支持 |
| 照片体积 | 大，通常是 JPEG 的 3-5 倍 | 中 | 比同等观感 JPEG 小 25-35% |
| 浏览器支持 | 全部支持 | 全部支持 | 现代浏览器全部支持（含 Safari 14+） |
| 反复编辑 | 无损，不会累积劣化 | 每次保存都劣化 | 有损模式同样会劣化 |
PNG
无损压缩，支持完整 Alpha 透明，反复保存不会损失画质，是截图、UI 元素、图标、含文字图像的正确选择。代价是体积大——同一张照片，PNG 往往是 JPEG 的三到五倍，直接放网页上会严重拖慢加载。
JPEG / WebP
JPEG 是有损压缩的老标准，靠丢弃人眼不敏感的高频信息换体积，照片上效果极好，但不支持透明，且每次重新保存都会再劣化一次。WebP 由 Google 推出，同时支持有损、无损、透明和动画，在同等主观画质下比 JPEG 再小 25-35%，且现代浏览器已全面支持，是新项目的默认选择。
怎么选
- 网页上的照片、Banner → WebP（必要时提供 JPEG 兜底）
- 截图、图标、含文字的界面图 → PNG
- 需要透明背景 → WebP 或 PNG，不要 JPEG
相关工具
常见问题
WebP 兼容性够了吗
够了。Chrome、Edge、Firefox、Safari 14+ 全部支持，全球覆盖率已在 97% 以上。极端老设备可用 <picture> 标签提供 JPEG 兜底。
为什么我的 PNG 截图那么大
因为无损。含大面积纯色和文字的图，PNG 效率很高；但照片类内容用 PNG 会浪费大量体积，应该转 JPEG 或 WebP。
反复保存 JPEG 会怎样
每次保存都会重新执行一次有损压缩，画质持续劣化。编辑中间过程请保存 PNG 或源文件，只在最后导出 JPEG。