PNG、JPG、WebP、AVIF 怎么选？格式选择完全指南

「这张图存成 PNG 还是 JPG？」这个问题看似简单，但答错会带来两种后果：要么体积臃肿加载缓慢，要么文字边缘全是噪点。

再加上 WebP 和 AVIF 这两个新格式，很多人更困惑了。这篇从压缩原理讲起，最后给一张直接可用的决策表。

一、先理解两种压缩：有损与无损

所有图片格式的区别，本质上都是在「画质 / 体积 / 特性」三者之间做取舍。理解这一点，就不需要死记硬背规则了。

无损压缩

解压后与原始数据完全一致，反复保存不会累积画质损失。代表：PNG、GIF、BMP、WebP（无损模式）、AVIF（无损模式）。

• 优点：画质零损失，边缘锐利
• 缺点：体积大，尤其对照片类图像

有损压缩

丢弃人眼不易察觉的信息换取体积。代表：JPG、WebP（有损模式）、AVIF（有损模式）、HEIC。

• 优点：体积小，可控（质量参数）
• 缺点：不可逆，反复编辑保存会累积劣化

关键结论

有损压缩怕高频细节。文字边缘、线条、纯色块交界处都是高频区域，有损压缩会在这里产生振铃效应和色块（就是那种「糊边」和「马赛克」）。照片的渐变和纹理是低频信息，压缩后肉眼很难察觉。

这就是「照片用 JPG、截图用 PNG」这条经验法则的物理基础。

二、逐个拆解四种格式

JPG / JPEG

• 类型：有损
• 透明通道：❌ 不支持（透明区域会被填成黑色或白色）
• 动画：❌
• 兼容性：✅ 全部平台、全部浏览器、全部软件
• 最佳场景：照片、渐变丰富的图像、电商实物图、需要控制体积的大图
• 质量建议：80–85。低于 75 开始出现可见色块，高于 90 体积翻倍但肉眼几乎无提升
• 坑：不适合带文字、线条图、纯色 UI 截图；每次保存都会重新损失一次画质

PNG

• 类型：无损
• 透明通道：✅ 完整支持（含半透明渐变）
• 动画：❌（APNG 支持但兼容性差）
• 兼容性：✅ 全部平台
• 最佳场景：截图、图表、Logo、图标、带文字的图、需要透明背景的素材、需要反复编辑的中间文件
• 变体：PNG-8（256 色，适合简单图形，体积小）／ PNG-24（真彩色，适合截图）
• 坑：存照片会让体积爆炸。一张 4000 × 3000 的照片存 PNG 可能有 15 MB，存 JPG 质量 85 只有 1.5 MB

WebP

• 类型：同时支持有损与无损
• 透明通道：✅ 支持（有损模式下也能保留透明）
• 动画：✅ 支持（可替代 GIF）
• 兼容性：✅ 现代浏览器全部支持（Chrome / Edge / Firefox / Safari 14+）；Windows 自带看图、部分老旧软件可能不支持
• 体积：同等画质下比 JPG 小 25%–35%，比 PNG 小 26% 左右
• 最佳场景：网站图片、需要兼顾体积与画质的场景、动图替代 GIF
• 坑：极少数平台上传时不支持；作为交付物给他人前先确认对方能打开

AVIF

• 类型：有损 / 无损
• 透明通道：✅ 支持
• 动画：✅ 支持
• 兼容性：⚠️ 主流浏览器新版已支持（Chrome 85+ / Firefox 93+ / Safari 16.4+），但设计软件与平台上传支持度不如 WebP
• 体积：同等画质下比 JPG 小 40%–50%，比 WebP 再小约 20%
• 最佳场景：对体积极度敏感的网站、HDR 图像
• 坑：编码速度慢（比 WebP 慢数倍到数十倍），大图可能要等几秒；兼容性仍是短板

三、体积实测参考

以下为常见场景下的典型量级对比（同一张图，肉眼画质接近）：

图像类型	PNG	JPG (q85)	WebP (q80)	AVIF (q60)
4000×3000 风景照片	约 15 MB	约 1.5 MB	约 1.0 MB	约 0.7 MB
1920×1080 软件截图	约 400 KB	约 180 KB（文字糊）	约 120 KB	约 90 KB
512×512 Logo（透明）	约 30 KB	不支持透明	约 12 KB	约 10 KB
1080×1080 带字海报	约 1.2 MB	约 200 KB（边缘噪点）	约 150 KB	约 110 KB

注意：实际数值取决于图像内容，上表仅用于理解量级差异。

四、决策表：直接查这张表就够了

你的图是什么	首选格式	备选	理由
照片 / 人像 / 风景	JPG q85	WebP	体积可控，兼容性最好
软件截图 / 界面图	PNG	WebP 无损	文字边缘必须锐利
带文字的海报 / 长图	PNG	WebP q90	JPG 会让文字糊边
Logo / 图标	PNG（需透明）或 SVG	WebP	透明通道 + 无损
需要透明背景的素材	PNG	WebP	JPG 不支持透明
网站 / 博客配图	WebP	AVIF（配 WebP 回退）	加载速度优先
电商商品图	JPG q85（白底图）	WebP	平台兼容性优先
动图 / 表情包	WebP 动图	GIF	体积仅为 GIF 的 1/5 左右
中间文件（还要继续编辑）	PNG 或 PSD	TIFF	避免累积劣化
需要打印	PNG / TIFF	高质量 JPG	避免压缩痕迹

五、一条容易忽略的原则：区分「源文件」和「发布文件」

这是专业工作流和随手保存的最大区别。

• 源文件：用无损格式（PNG / PSD / TIFF）保存，用于后续编辑。哪怕体积大也没关系，因为不对外发布
• 发布文件：从源文件导出一份有损压缩版本（JPG q85 / WebP q80），用于上传和分享

这样做的好处是：你的画质损失只发生一次。如果每次都直接覆盖保存 JPG，改十次就等于压缩十次，画质会明显崩坏。

六、常见误区

误区 1：「PNG 一定比 JPG 清晰」

不完全对。PNG 是无损，对文字和线条确实更锐利。但对于照片，JPG q90 与 PNG 的肉眼差异几乎不可见，而体积相差 10 倍。清晰度要看内容类型，不是看格式。

误区 2：「WebP 不兼容，不敢用」

2026 年的实际情况是：所有现代浏览器都支持 WebP，主流社交与电商平台也基本支持上传。真正需要注意的是交付给他人的场景 —— 对方如果用老旧软件可能打不开。发布到网上用 WebP 是安全的。

误区 3：「AVIF 最好，全站换 AVIF」

AVIF 压缩率确实最强，但编码速度慢是硬伤。用浏览器本地处理一张大图，WebP 可能 200 ms，AVIF 要 2–5 秒。对在线工具来说体验差距巨大。建议：AVIF 用于体积敏感且可预处理的场景，实时处理优先 WebP。

误区 4：「把 JPG 改成 PNG 就能提升画质」

不能。格式转换不会凭空恢复已经被丢弃的信息。JPG 转 PNG 只会让体积变大，画质纹丝不动。画质在第一次保存为 JPG 的那一刻就定死了。

七、在刃图里怎么选

刃图 FrameLab 的导出支持 PNG、JPG、WebP 三种格式，选择建议：

• PNG：切图结果带文字、做 Logo 切片、需要透明背景 —— 默认选它
• JPG：切照片、做电商主图、需要控制体积 —— 质量调到 85
• WebP：用于网页发布、需要兼顾体积和画质 —— 首选推荐

另外两个影响画质的导出参数：

• DPR（设备像素比）：1× 为原尺寸；2× 或 3× 会放大输出，适配高清屏，但体积按平方增长。网页用途 1× 足够，需要打印或高清展示再调 2×
• 长边限制：设定输出最大边长，避免导出超大文件。网页用途建议长边 2000–3000 px

所有格式转换都在浏览器本地完成，图片不上传服务器 —— 这对未发布的商业素材尤其重要。