PNG、JPG、WebP、SVG 怎么选：每次都选对图片格式的方法

Web 开发里很少有哪个决定像选图片格式这样随意——也很少有哪个决定对页面体积影响这么大。一张头图存成 PNG 可能比同样内容的 WebP 重十倍；一个 logo 存成 JPG 会又糊又胖。好消息是：这个选择不是口味问题。每种格式都建立在一种特定的压缩思想上，理解了这些思想，正确答案通常几秒钟就显而易见。这篇文章讲清覆盖约 99% Web 场景的四种格式，并给你一套配套的决策流程。

决定大部分问题的分野：有损 vs 无损

每种位图格式都建立在两种交易之一上：

无损压缩（PNG，以及 WebP 的无损模式）缩小体积的同时保证每个像素都能精确还原。它的原理是找统计冗余——连续相同颜色、重复的图案——所以在纯色和锐利边缘的图片上表现出色，在噪点丰富的照片数据上浪费字节。
有损压缩（JPG、WebP 默认模式）永久丢弃人眼最不容易察觉的信息——主要是细腻的颜色细节——换取体积的大幅削减。质量是一个旋钮：压得越狠，伪影越多。

第三类根本不是压缩：SVG 是矢量格式——一个描述形状的文本文件（“这里一个圆，那里一条路径”）而不是像素。它在任何尺寸下都完美清晰，对几何图形来说体积小得惊人，但完全无法表示照片。

JPG：照片专家

JPG 的压缩算法（对好奇的人：基于 8×8 块的 DCT 变换）在 90 年代专为连续色调的摄影内容设计，至今在这一点上依然出色。它的弱点是设计的另一面：

锐利边缘和文字会出现可见的”蚊噪声”——截图存成 JPG 后字母周围的光晕就是它。
反复保存会劣化：每次重新编码都再丢一次数据，所以永远不要把 JPG 当工作格式用。
不支持透明——JPG 里没有 alpha 通道。

JPG 的适用场景：照片、渐变、任何连续色调丰富的图片，以及需要最大兼容性的场合（有史以来所有客户端都认识它）。

PNG：像素级精确，代价不菲

PNG 无损、支持完整的 alpha 透明，渲染文字、UI 元素和线条画时边缘锐利如刀。截图、图表、必须保持清晰的图标、任何需要透明背景的东西，PNG 都是经典答案。

代价是照片类内容的体积：一张 PNG 照片通常是等效 JPG 的 5–10 倍，因为噪点数据里统计冗余稀缺。PNG 还有调色板模式（PNG-8，最多 256 色），能把简单图形压缩得非常小——在默认认为”PNG 就是大”之前值得了解一下。

WebP：当代默认

WebP（Google，2010）同时支持有損和无损压缩，两种模式下都支持 alpha，甚至支持动画——而且在前辈们各自的主场击败它们：同等视觉质量下比 JPG 小约 25–35%，无损模式比 PNG 小约 25%。浏览器支持从 2020 年起已经全面普及。

实践结论：今天 WebP 应该是 Web 位图的默认格式。 还在用 JPG 或 PNG 的理由只剩：遗留工具链、邮件客户端（兼容性雷区——那里坚持用 JPG/PNG）、以及确实古老的浏览器受众。转换现有图库用图片格式转换器每个文件一次操作就能完成；如果问题出在体积而不是格式，图片压缩器可以交互式地在质量和字节数之间做权衡，让你亲眼看到伪影的临界点。

SVG：几何图形的无限分辨率

Logo、图标、图表、插画：只要图形是由形状而不是光线构成的，SVG 在所有维度都赢——2 KB 的矢量 logo 在 5K 屏上依然锐利，还能用 CSS 改样式、用 JS 做动画。需要注意的是 SVG 本质是代码：来源不可信的 SVG 可以携带脚本，内联第三方文件前要做净化，更不要直接接受未过滤的 SVG 上传。

确实需要像素的场合——社交分享预览图、PNG 兜底、设计交付——SVG 转 PNG 工具可以把矢量渲染成任意分辨率的位图。

（补充说明：AVIF 压缩率比 WebP 更好且现代支持不错，但编码更慢、边缘支持更薄——在 WebP 就位之后，值得通过 <picture> 回退机制逐步采用。）

十秒决策流程

是形状构成的（logo、图标、图表、插画）？→ SVG。
是照片或浓郁渐变？→ WebP（只有兼容性/邮件场景才用 JPG）。
需要透明？→ WebP 或 PNG；矢量的用 SVG。
是截图、图表或文字为主的图片？→ PNG（或无损 WebP）。
发邮件或服务上古浏览器？→ 照片用 JPG，其余要清晰的用 PNG。

最后两条经验法则：先让格式匹配内容，再调压缩参数——把错误格式压得更狠，只会得到一个更小但更丑的文件。还有，永远保留一份无损母版：完美的原图随时可以导出更小的衍生品，反过来永远不行。

速查表

照片/渐变：WebP，兜底 JPG。
截图、文字、线条画：PNG 或无损 WebP。
Logo/图标/图表：SVG——无限缩放、体积极小；不可信文件要净化。
透明需求：PNG、WebP（两种模式）、SVG——永远不是 JPG。
JPG 每次重编码都有损——不要用它当工作格式。
新 Web 项目默认：WebP；邮件场景：JPG/PNG。