1. 格式混乱是真实存在的
不久前我在清理一个客户的 WordPress 网站。首页上每一张图片都是 PNG。不是图标或 Logo——我说的是全宽的首屏大图、几百种颜色的产品图，全都是。整个页面 14 MB。加载起来就像在用拨号上网。
我把那些 PNG 转成了合适的格式，页面体积降到了 2 MB。画质完全一样。没人注意到任何变化——只是页面加载从十二秒变成了不到两秒。
事情是这样的：图像格式并不复杂。做网页工作真正需要关心的只有四种，加上少数几种用于特定场景的格式。但我接触到的大多数人要么靠猜，要么就用手机或设计工具默认吐出来的格式。这就是为什么你会看到一张 5 MB 的截图被存成 PNG，而一张 200 KB 的 JPEG 看起来完全一样。
下面我就讲讲我用惨痛代价换来的经验。没有深奥的技术解释——只讲每种格式擅长什么、不擅长什么，以及什么时候该换一种试试。
2. JPEG：永不退场的主力军
JPEG 从 1992 年就存在了。按科技圈的纪年法，这算得上古老。每年都有人宣布它已死，每年它都继续活着。原因很简单：对于照片来说，它在自己的本职上依然做得非常、非常出色。
JPEG 到底擅长什么
JPEG 压缩的原理是丢弃你眼睛注意不到的细节。它把附近颜色相近的像素归为一组，当作一个块来处理。压缩得越狠，这些块就越大。在 60-80% 质量下，屏幕上几乎看不出损失。到了 40%，你会在高对比度边缘看到那些马赛克般的伪影。低于 30%，一切看起来就像印在土豆上一样。
这个取舍很残酷但很公平：对于拥有数百万种颜色的照片，能得到极小的文件体积。一张 4000×3000 的照片存成 PNG 是 6 MB，存成 85% 质量的 JPEG 大约只要 400 KB。这是 15 倍的缩减，我倒要看看谁能在手机屏幕上看出区别。
基本上任何要放到网站上的照片我都用 JPEG。博客文章头图、产品图（除非需要透明）、团队头像、落地页的首屏大图——JPEG 全能搞定。文件体积小太多了，根本没什么好争论的。
JPEG 在哪里栽跟头
文字。天哪，文字是 JPEG 的克星。因为 JPEG 压缩是把颜色按块取平均，锐利的边缘——比如一个字母清晰的边缘——会被抹糊。带文字的截图存成 JPEG，看起来就像有人在屏幕上抹了层凡士林。
带有大块纯色和清晰边界的图形（Logo、图标、图表、示意图）也会变成一坨。图表里红色色块和白色背景之间的边界？JPEG 会在周围加一圈粉红色的模糊光晕。这可不是你想要的。
而且 JPEG 不支持透明。如果你需要那种棋盘格背景，JPEG 不是你的菜。
我定 JPEG 画质的经验法则
网页上的照片：80-85% 质量。低于 70% 时我通常能在显示器上看出差别。高于 90% 几乎不会再带来额外的视觉质量提升，文件体积却会膨胀。对于想要像素级细节的产品图，我也不会超过 90%——如果顾客需要看到那种程度的细节，他们应该能放大查看，而一张稍大一点的 JPEG 仍然胜过一个巨大的 PNG。
2. PNG：透明以及你真正需要它的时候
PNG 是我以前默认用的格式，我现在还看到很多人在做同样的事。表面上看很有道理：PNG 是无损的，听起来比有损的 JPEG 更好。但“无损”不等于“更好”——它的意思是“更大，而且常常没有充分的理由”。
PNG 有一件事做得比其他任何格式都好
透明。就这么简单。如果你需要图片的某些部分是透过的——放在不同背景上的 Logo、抠出来的产品图、叠加的图形——PNG 就是你的格式。PNG 的 Alpha 通道支持 256 级透明度，所以你能得到平滑的边缘、柔和的阴影和半透明的叠加层。其他任何被广泛支持的网页格式都无法把透明处理得这么干净。
另一个用途是带有大块纯色和锐利边缘的图形。截图、UI 原型图、图表、示意图——任何不希望出现 JPEG 那种文字和边框周围压缩污渍的场景。对于这些，PNG 看起来很清晰，文件体积也合理，因为没有几百万种不同的颜色需要存储。
PNG 隐藏的代价
“无损”这个标签不会告诉你的是：一张照片存成 PNG 通常比存成 JPEG 大 5-15 倍。我刚测试过——一张我桌面的照片 2000×1500，存成 PNG 是 4.7 MB，存成 85% 质量的 JPEG 是 380 KB。即使在 27 寸显示器上全屏放大，我也真的分不出哪个是哪个。
更关键的是：PNG 用的是 DEFLATE 压缩，它对图案和重复数据效果很好，但处理照片中的噪点和变化就力不从心了。这就是为什么一张 PNG 截图可能只有 300 KB，而一张 PNG 照片却有 5 MB——截图有大块相同的颜色，压缩效果好，但照片对压缩算法来说就是一堆噪点。
我什么时候还会用 PNG
带透明的 Logo 和图标。需要文字清晰可读的截图。颜色少于 256 种的图形（这种情况用 PNG-8 极佳——文件极小，画质无损）。用抠图工具把产品或人物抠出来之后，PNG 是自然的输出格式，因为你需要那个 Alpha 通道。但看在页面速度的份上，别把照片存成 PNG。让它们过一遍压缩器，或者转成更聪明的格式。
3. WebP：用得远远不够的最佳格式
我忽视了 WebP 很多年。它感觉就像那种“技术上更先进”但永远流行不起来的格式。后来 Google 把它列为了页面速度的排名因素，我突然就不得不关心它了。
事实证明我早该换过来。
WebP 有什么不同
WebP 同时支持有损和无损压缩——基本上，它可以用一种格式同时替代 JPEG 和 PNG。对于有损照片，WebP 文件在相同视觉质量下通常比 JPEG 小 25-35%。对于无损图形和透明，WebP 文件比 PNG 小约 26%。当一页上有几十张图时，这些数字很快就会累积起来。
它的压缩也更聪明。JPEG 用的是基于分块的方式（会在严重压缩的照片里产生那些方块状伪影），而 WebP 用的是基于预测的压缩。它根据周围像素来猜测每个像素应该是什么，然后只存储差异。结果是可见的伪影更少、渐变更平滑。
但有个问题（总会有问题的）
浏览器支持曾经是个问题。Safari 直到 2020 年才支持 WebP——比 Chrome 和 Firefox 晚了好几年。不过那已经是老黄历了。到 2026 年，所有主流浏览器都支持 WebP：Chrome、Firefox、Safari、Edge，甚至三星浏览器。那些不支持的要么已经死了，要么无关紧要。
现在更大的问题在于工具链。不是每个 CMS 都能优雅地处理 WebP 上传。一些图像编辑器仍然不提供 WebP 导出选项。如果你把图片发给使用旧软件的客户，他们打开你的 WebP 可能什么都看不到。
对于我自己的项目，我已经把几乎一切都迁到了 WebP。产品图、博客配图、图标——WebP 都能搞定。文件体积的节省实在太显著了，无法忽视。当客户需要 JPEG 时，我再转回去，但只要是在网页上提供的任何东西，WebP 都是我的默认选择。
WebP 对比 JPEG：快速的现实检验
我拿同一张照片用五种方式导出。结果如下：
- JPEG 100% 质量：1.2 MB
- JPEG 85% 质量：380 KB——视觉上与第 1 项完全一致
- WebP 默认质量：210 KB——同样视觉上完全一致
- PNG（无损）：4.7 MB——与以上各项完全一致，比 WebP 大 22 倍
- JPEG 40% 质量：120 KB——能看出马赛克块
第 2 项和第 3 项在我看来是一样的。第 3 项小了 45%。这可不是什么小众优化——在一页有 10 张产品图的页面上，这就是 3.8 MB 和 2.1 MB 的区别。你的访客能感受到。
如果你想转换现有的图片，格式转换器可以一次性处理 JPEG 转 WebP 和 PNG 转 WebP。无需纠结质量设置——它会选好合理的默认值，你想要的话也可以微调。
4. SVG：被误解的那一个
SVG 与 JPEG、PNG 和 WebP 有本质区别。那些是位图格式——它们存储的是彩色像素网格。SVG 是矢量格式——它存储的是形状的数学描述。一个圆不是一堆排列成圆形的像素，它就是字面意义上的“画一个圆心在 (50,50)、半径为 40 的圆”。
这个差异改变了一切——关于你何时该用 SVG。
SVG 在哪里完胜其他所有格式
Logo。图标。简单的插画。示意图。任何由形状、线条和文字构成的图形。因为 SVG 描述的是几何而非像素，它可以缩放到任何尺寸而不损失质量。一个 50×50 的 SVG 图标和一个 5000×5000 的版本，就是同一个文件。没有模糊、没有马赛克、不用“让我重新做一个更高分辨率的版本”。
文件体积通常也小得多。一个 64×64 的简单图标存成 PNG 可能要 2-4 KB，存成 SVG 可能只要 500 字节。而且那个 SVG 适用于任何尺寸。我见过整套图标从 PNG 转成 SVG 后，总体积从 200 KB 缩到 15 KB。
SVG 在哪里不是合适的工具
照片。别试图把照片表示成 SVG。技术上是可以的——SVG 支持嵌入位图——但那样你只是把一张位图包在 SVG 容器里，毫无意义还增加了开销。
带有渐变、阴影和大量曲线的复杂插画也会产生巨大的 SVG 文件。一张全是路径和渐变的高度精细插画，存成 SVG 可能是 500 KB，但存成优化良好的 WebP 只要 80 KB。对于这些情况，位图格式在文件体积和渲染速度上都更胜一筹。
我画的实际分界线
如果我能把图像描述为“它基本上就是一些形状，可能还有点文字” → SVG。如果我会描述为“它是一张某东西的照片” → 位图（WebP 或 JPEG）。
当需要为某个对 SVG 支持不好的平台提供特定分辨率时，我也会把 SVG 转成 PNG——一些邮件客户端、社交媒体预览、老旧的演示软件。转换器可以把 SVG 转成任意分辨率的 PNG，包括用于视网膜屏幕的 2 倍和 3 倍。
5. 正面交锋：谁在哪里胜出
前阵子我给自己做了一张速查表，因为我老是在自我怀疑自己的选择。就是这张——没有废话，只有每个场景我实际会选的格式：
这张表里有几点很显眼。对于大多数以照片为主的网页内容，答案都是 WebP——如果你还没用，你就是在白白浪费页面速度。SVG 对于任何本质上是形状的东西（尤其是 Logo 和图标）好得离谱。PNG 仍然有它的位置，但比大多数人以为的要窄：截图，以及把广泛兼容性看得高于一切的场合。
6. 真实场景：我实际用什么
理论是不错，但下面我来讲几个格式选择产生了可衡量差异的真实场景。
运营在线商店
去年我帮一个朋友搭了 Shopify 店铺。他们有大约 60 张产品图，全是从相机直接导出的 PNG。产品页加载要 4.2 秒——对转化率很不利。
我们这样做：把所有产品图转成 WebP（用转换器），缩放到 1200×1200（Shopify 产品页显示的最大尺寸），只对 Logo 和几个需要透明的徽章图标用 PNG。页面加载降到了 1.6 秒。跳出率下降了 11%。这就是钱，实打实的。
搭建一个带大量截图的博客
你正在读的这个博客——我插入的每一张截图都是 PNG。我试过 WebP 无损，也挺好，但 PNG 对那些从博客保存图片的人来说兼容性更广。文件体积是不太理想，但截图通常足够小（300-600 KB），不会拖垮页面速度。如果博客每篇文章有几百张截图，我会毫不犹豫地换成 WebP。
制作社交媒体图形
对于 Instagram、Twitter 和 Facebook 的帖子，我默认用 90% 质量的 JPEG。社交平台反正都会对所有东西重新压缩，所以在无损 PNG 上多花字节点毫无意义——平台只会把它压成自己的格式。对于带文字叠加的内容（语录、公告），我先导出为 PNG，检查文字是否清晰，再转成 JPEG。文字需要这种最初的清晰度，哪怕平台会稍微把它弄模糊。
邮件通讯
这是唯一一个我所有东西都坚持用 PNG 的地方。邮件客户端——尤其是 Outlook——的图片渲染出了名的糟糕。邮件里对 WebP 的支持基本不存在。SVG 的支持也时好时坏。PNG 至少能在所有地方一致地渲染，而邮件里的图片通常是小小的页眉图和 Logo，所以文件体积的惩罚可以忽略不计。
给客户的交付物
当我要把最终素材发给客户时，我总会问他们需要什么。有些人想要他们设计师所用格式的源文件。另一些人只想要能直接上传到 CMS 的图片。如果我不确定，我就都发：一个用于网页的优化版 WebP、一个用于存档的 PNG，还有原始文件。前期是多了点活，但能省掉三周后那封“嘿，能不能把这个发成另一种格式”的邮件。
7. 能帮你省心的转换技巧
在格式之间转换听起来是小事。大多数情况下也确实是。但大概有 3、4 件事在我刚入门时绊倒过我。
JPEG 转 WebP：小心代际损失
如果你拿一张 JPEG（已经有损），转成 WebP（再次有损），然后有人之后又把那张 WebP 转回 JPEG，你就叠加了多轮压缩伪影。每一代都会损失细节。永远从你能拿到的最高质量源文件开始转换。如果你手上只有一张 JPEG，那就是这样——但至少在一个不会在已有伪影之上引入可见新伪影的质量级别上转换。
PNG 转 JPEG：透明度问题
JPEG 不支持透明，所以当你把一张透明的 PNG 转成 JPEG 时，透明区域会被填成白色或黑色（取决于转换器）。如果你要转换一个带透明背景的 Logo，先把它放在预期的背景色上——比如白色——再导出为 JPEG。否则你会得到一个黑矩形上的 Logo，然后纳闷哪里出了问题。
SVG 转 PNG：选好分辨率
既然 SVG 能无限缩放，你就需要决定以什么分辨率光栅化。对于普通显示器的网页用途，1 倍（SVG 的原始尺寸）就可以。对于视网膜/HiDPI 显示器，导出 2 倍或 3 倍。一个 24×24 的图标以 3 倍导出就变成 72×72。文件会更大，但在现代屏幕上看起来很锐利。
批量转换：别凭感觉设置参数
有一次我把 200 张产品图从 PNG 批量转成 JPEG，用了我自认为“够好”的质量——70%。它们看起来都比原图稍微差一点。缩略图里看不出什么，但并排对比时，细节损失是存在的。我只好以 85% 的质量把整批重做一遍。教训是：在跑批量之前，先用 2-3 张图测试你的设置。全尺寸检查一下。然后再提交。
如果你要处理一堆图片，格式转换器可以处理批量操作。拖入一个文件夹，选好目标格式，搞定。它不是最令人兴奋的工具，但它是用得最多的一个——和压缩器不相上下。
什么时候要保留原图
永远保留原始文件。永远。如果你要从 RAW 或高分辨率 PNG 转换成用于网页的压缩版 WebP，把原图存到某个地方。存储很便宜。重新拍摄或重新制作一个素材很贵。我在每个项目里都有一个叫“originals”的文件夹，我回过头去找它的次数比我预想的多得多。
什么时候不必纠结图像格式
如果你在为高分辨率的专业印刷准备图片，JPEG 和 WebP 可能不够用——问问你的印刷商他们要什么。本指南面向的是网页和数字用途，不是商业胶印。
另外，如果你在和一位对格式有非常具体要求的设计师合作，不要去质疑他们。他们要什么就发什么。你的情况可能不同，但如果别人在负责印刷制作，就让他们来定夺。