直接给结论：照片用 JPEG 或 WebP；截图、图表、纯色块的东西用 PNG 或 WebP； 需要透明背景就用 PNG 或 WebP，JPEG 做不到。矢量图形（图标、字标、简单插画）这三种都别用，用 SVG。 如果只记一条：在网页上，WebP 从来不是错的答案。
图像格式有几十种，但几乎覆盖网页上每一张图的只有三种。一旦你知道每种格式是为解决什么问题而生的， 在两秒内就能做完选择。
两秒钟做完的选择
- 这是一张照片，或者有大片平滑渐变的画面？ → JPEG，或者 WebP。
- 这是截图、图表、流程图、logo，或者任何有纯色块和硬边缘的东西？ → PNG，或者 WebP。
- 需要透明背景吗？ → PNG 或 WebP。JPEG 做不到。
- 这是矢量形状 —— 图标、字标、简单插画？ → 三个都不对，用 SVG。
前两条背后的道理值得花两分钟弄懂，因为它能解释你遇到过的绝大多数「怎么压完变这样」的结果。
一段话讲清「有损」和「无损」
JPEG 是有损的：它会永久丢弃信息，而它的设计目标是 —— 专挑人眼最不容易察觉的那部分丢。 它把画面切成小方块，把大部分数据预算花在低频结构上（大块形状和明暗过渡），把细节扔掉。 用在照片上这是极划算的交易，因为照片里到处都是没人会怀念的细节。
PNG 是无损的：你放进去什么，就原封不动地拿出来。它靠寻找重复模式来压缩， 而不是靠扔掉任何东西。用在截图上效果极好，因为截图主要是大片一模一样的颜色。 用在照片上几乎没用，因为照片里的噪点从不重复。
为什么截图存成 JPEG 是一场灾难
这是最常见的格式错误，而且败相很有辨识度。
文字就是「高对比度的高频细节」—— 恰恰是 JPEG 专门要丢的东西。把一张带文字的截图存成 JPEG， 字周围会长出毛茸茸的光晕，黑白交界处会渗出彩色镶边，小号字直接糊成一团。 为了压体积再把质量调低，那就真的读不清了。
而同一张截图用 PNG 存却很轻松，因为一整页文字大部分是相同的白色像素，压缩率接近极限。 截图存成 PNG 比存成高质量 JPEG 还小，同时像素级无损、看不出任何劣化 —— 这种情况一点都不罕见。
反过来的错误同样常见：把照片存成 PNG。它会完全精确，但体积是 JPEG 的三到十倍， 因为这个格式无从利用那些根本不存在的重复。
WebP 改变了什么
WebP 之所以让上面两个选择都变简单，是因为它把整个范围都覆盖了。
- 它有一个有损模式，比 JPEG 更好 —— 在观感相当的前提下通常小 25%–35%。
- 它有一个无损模式，比 PNG 更好 —— 通常小 20%–30%。
- 两种模式都支持透明，而 JPEG 完全不行。
- 它支持动图，作为 GIF 的更小替代品。
浏览器支持现在已经全面覆盖 Chrome、Firefox、Safari 和 Edge，包括几年前发布的那些 Safari 版本。 「WebP 有些地方不支持」这个理由，已经过时好一阵了。
那 JPEG 为什么还在？主要是因为浏览器之外的目的地：印刷流程、老式桌面软件、嵌入式系统，
以及任何要求文件后缀是 .jpg 的地方。这些是真实存在的场景，
但它们和「一个网站上的图片」并不是同一个集合。
一张真用得上的对比表
| JPEG | PNG | WebP | |
|---|---|---|---|
| 压缩方式 | 只有有损 | 只有无损 | 两者都有 |
| 透明背景 | 不支持 | 支持 | 支持 |
| 动图 | 不支持 | 不支持 | 支持 |
| 最适合 | 照片 | 截图、纯色图形 | 两者都能 |
| 同一张照片相对 JPEG 的体积 | 基准 | 大 3–10 倍 | 小 25%–35% |
| 同一张截图相对 PNG 的体积 | 接近，但已劣化 | 基准 | 小 20%–30% |
| 兼容性 | 哪都能用，包括印刷和桌面软件 | 哪都能用 | 所有现代浏览器和多数桌面软件 |
真正转换的时候发生了什么
转换不是免费的，而且值得知道哪个方向会让你付代价。
JPEG → PNG 安全但没意义。得到的 PNG 是精确副本，包括原本就烙在里面的每一处 JPEG 瑕疵。 文件变大很多，唯一多出来的是透明支持 —— 而原图本来也没有透明。
PNG → JPEG 会永久丢信息。文字和线条的硬边缘会被有损这一步磨圆，而且找不回来。 之后再转回 PNG，你只会得到一个大文件，里面照样带着那些 JPEG 瑕疵。
任意 → WebP 无损模式是安全的。结果与输入完全等价，只是存得更紧凑。 这是唯一没有副作用的转换。
任意 → WebP 有损模式就是一次正常的有损步骤。把它当成「另存为 JPEG」来对待： 从原始文件出发做一次没问题；反复做就是浪费且不断劣化。
一个实际可用的默认方案
如果你不想动脑：什么都用 WebP，截图上无损模式，照片上有损模式、质量 80。
只有当某个系统明确要求 .jpg 时，才转成 JPEG。
格式转换工具在浏览器里批量完成这些转换，不上传任何文件 —— 这一条在图片是客户交付物、未发布的设计稿或文档扫描件时就很重要。如果你的目标是文件大小而不是格式， 压缩工具能帮上更多忙；要动尺寸的话， 尺寸调整工具更直接。