JPG、PNG、WebP 怎么选：网页图片格式完全指南

先看结论：四种格式的横向对比

选格式不是选最好的那个，而是选代价最小的那个。同样一张图，装进不同容器后的体积、画质、兼容性差别很大。

一句话概括：照片优先 JPEG 或 WebP，需要透明与锐利边缘优先 PNG，追求极致体积且能接受兼容性代价时考虑 AVIF。

JPEG：照片的默认答案

JPEG 诞生时间最早，生态最成熟，几乎任何设备、任何软件都能打开。它用离散余弦变换加量化来丢弃高频细节，因此对连续色调的摄影内容效率很高，对纯色块和文字则相当不友好。

真正让 JPEG 到今天仍然不可替代的是兼容性。邮件客户端、政务系统、证件照上传、老旧的 CMS 后台，默认接受的往往就是 JPEG。当你不知道对面是什么环境时，JPEG 是风险最低的选择。

它的代价也很明确：没有透明通道，不支持动画，每次重新保存都会再损失一次画质。所以 JPEG 适合作为交付的终点，不适合作为反复编辑的中间格式。

PNG：透明与锐利边缘的守护者

PNG 是无损格式，压缩靠的是行滤波加 DEFLATE，不丢任何像素。它有两种常见形态：24 位真彩加 alpha，和 8 位调色板加 alpha。后者最多只保留 256 种颜色，体积能大幅下降。

PNG 的优势场景非常清楚：

• 需要透明背景的图标、logo、贴纸
• 界面截图、代码截图、含大量文字的长图
• 线条、色块、扁平插画等颜色数量有限的图形
• 需要反复编辑、不希望在保存中损失画质的中间素材

PNG 的劣势同样清楚：直接存一张照片会得到比 JPEG 大好几倍的文件。因为照片的相邻像素几乎不重复，无损压缩找不到多少冗余可去掉。对照片用 PNG，相当于放弃了压缩这件事本身。

如果必须用 PNG 交付照片，唯一有效的做法是减少颜色数量。在 图片压缩工具 里，颜色数滑杆可以在 2 到 256 之间调整，配合无损模式，能在肉眼看不太出来的前提下省下可观体积。但请记住，PNG 本身是无损格式，调质量参数没有意义，能动的只有颜色数量。

WebP：兼容性与体积的平衡点

WebP 是当前网页场景里性价比最高的格式。它同时支持有损、无损、透明和动画，有损模式在同等观感下通常比 JPEG 更小，无损模式通常比 PNG 更小。

它还有两个实用特性。一是对透明区域的处理比 PNG 更高效，带透明背景的图形往往能明显瘦身。二是支持把多个帧打包成动画，用来替代体积偏大的 GIF 动图。

需要留意的边界有两个。一是极老的浏览器不支持 WebP，如果你的站点还有相当比例的旧环境用户，应该配合 <picture> 标签做回退，而不是把 JPEG 全量替换掉。二是把已经压过头的 JPEG 转成 WebP，收益常常有限，原因在下一节展开。

用 图片压缩工具 可以一次性完成两件事：把 JPG 或 PNG 转成 WebP，或者对已有的 WebP 继续调整质量。质量滑杆范围是 1 到 100，默认 80，工具会读取原图量化表估算原本的质量，原图已经低于 80 时不会继续降质。

AVIF：更小，但现实约束更多

AVIF 基于更新的视频编码技术，在相同观感下通常能比 WebP 再小一截，在低码率下的表现尤其突出，同时支持透明与动画。

但它目前的现实约束也很明显：浏览器支持范围比 WebP 窄，编码速度慢，遇到不支持的客户端需要准备回退方案。对于一个还能用 WebP 满足需求的站点，AVIF 带来的收益往往抵不过新增的兼容性维护成本。合理的做法是把它当作渐进增强的一层，而不是唯一格式。

什么时候应该转换格式

转换格式有收益的前提是，目标格式能在同等观感下真正减小体积。以下情况值得转：

• PNG 照片转 JPEG 或 WebP：从无损容器换到有损容器，体积下降最明显
• 带透明的图形转 WebP：透明区域编码效率更高
• 动态 GIF 转 WebP 或 AVIF：动图体积通常能大幅下降
• 网页首屏大图转 WebP：在支持范围内换取更快的加载速度

什么时候不该转换

格式转换不是免费的午餐，以下几种情况转了大概率是白费力气，甚至更糟。

已经深度压缩过的 JPEG 再转 WebP。原图在保存成 JPEG 时已经丢掉了高频细节，剩下的信息量本来就少，WebP 能榨出的额外空间有限，通常只有几个百分点到一成左右。而这一次重新编码又会引入新的有损损失，属于典型的得不偿失。判断依据很简单：如果一张 1600 像素宽的照片已经只有 150KB 左右，就不要再折腾格式了。

图标、截图为了省体积转成有损格式。省下的那点体积会以肉眼可见的脏边和色斑为代价，观感下降远大于收益。

为了统一而统一。把站点所有图片都转成同一个格式，看起来很整洁，但如果原图已经是最优解，这次转换只会增加一次画质损失。

忽略了服务器侧已有的自动优化。如果托管平台已经在边缘节点做了格式协商，手工再转一遍可能完全重复。

判断是否值得转格式，可以先问自己：原图现在的体积是多少，目标体积是多少，中间差的那部分是不是真的有价值。答不上来就先别转。

中国大陆浏览器环境的现实考量

技术选型要落地，就得考虑实际用户的浏览器分布。实际情况大致是这样的：

• 桌面端主流浏览器的新版本都已支持 WebP，微信内置浏览器、手机厂商自带浏览器的新版本也普遍支持。
• 不支持 WebP 的主要是较老的 Android 系统浏览器、老版本 IE 内核，以及部分定制的老旧内核。
• AVIF 的支持面明显更窄，不建议在面向大众的中文站点上作为唯一格式。

因此比较稳妥的策略是：

1. 生成 WebP 与 JPEG（或 PNG）两份，通过 <picture> 或内容协商按浏览器能力分发。
2. 主图、封面这类影响首屏的图片优先用 WebP。
3. 需要用户下载、转发、打印、上传到第三方系统的图片，输出 JPEG 或 PNG，因为那些系统很可能不认 WebP。
4. 证件照、报名照、发票、合同扫描件等业务场景，严格按对方要求提交，不要自作主张换格式。

一份可落地的选择清单

面对一张具体的图片时，可以按下面的顺序判断：

• 需要透明通道？需要就排除 JPEG，选 PNG 或 WebP。
• 是文字、界面、图标类内容？选 PNG 或无损 WebP，不要用有损压缩。
• 是照片，且不确定使用环境？输出 JPEG，质量 80 到 85。
• 是照片，用在自家网页且已确认兼容性？输出 WebP，质量 75 到 82。
• 是动图？优先 WebP，需要兼顾老环境时保留 GIF。
• 是矢量图形？保留 SVG，用坐标精度控制体积，不要转成位图。
• 原图已经很小、已经压过？不要再转格式。

把清单落到操作上，照片可以从 JPG 图片压缩 或 WebP 图片压缩 开始，截图与图标可以使用 PNG 图片压缩，再用 图片压缩完整教程 里的对比预览功能确认画质，最后决定是否采用。