有次帮朋友看商品图为啥淘宝总拒收,翻开他的素材文件夹, 一堆 600KB 的 JPG。淘宝主图要求 PNG 或者高质量 JPG。他直接拿微信传过来的图(微信自动压缩到 JPG 60% 质量)上传, 色块边缘色斑严重,审核机器直接拒。
我跟他讲完图片格式区别后,他说"我做了 5 年微商,一直以为图片格式没差"。 其实图片格式选型不是技术活,但选错的代价是商品图被拒、网页加载慢、微信发图被压糊。 这篇把 4 种主流格式讲清楚,以及 5 类场景该选哪个直接给到。
4 种格式核心差别(一张表说清)
下面这张对照表你看完基本就够用了:
- JPG (JPEG):有损压缩,体积小,无透明,1992 年标准,所有软件支持
- PNG:无损压缩,体积大,有透明,1996 年标准,所有软件支持
- WebP:有损 + 无损双模式,体积比 JPG 小 25-35%,有透明,2010 年 Google 推出, 2026 年浏览器兼容 95%+,部分老软件不支持
- AVIF:有损 + 无损,体积比 WebP 还小 30-50%,有透明,2020 年标准, 浏览器兼容率 85%+,设计软件兼容差
关键差异在 3 个维度:体积、透明度、兼容性。下面拆开看:
维度 1:体积大小(从小到大)
同一张图(1080×1920,普通照片,目标"屏幕显示画质足够"):
- AVIF:~80KB
- WebP:~120KB
- JPG 75%:~150KB
- PNG:~1.2MB(无损,体积是其他几个 10 倍)
结论:
- 对体积极致追求 → AVIF
- 体积 + 兼容性平衡 → WebP
- 追求兼容性 → JPG
- 必须无损 / 透明 → PNG(没得选)
维度 2:透明度支持
JPG 不支持透明,带透明的 JPG 会自动填白底。 其他 3 种(PNG / WebP / AVIF)都支持。
什么时候需要透明:
- logo / 图标(浮在不同背景色上)
- 商品图(去背景的"白底图")
- 表情包 / 装饰元素(嵌入其他设计)
- UI 切图(网页 / App 用)
所以这些场景不能用 JPG。
维度 3:兼容性(2026 年)
- JPG / PNG:所有软件、所有平台、所有浏览器,100% 兼容
- WebP:浏览器 95%+ 兼容;主流软件支持(微信、PS、Sketch、Figma),但 Windows 自带"画图"和老版 PowerPoint 不识别
- AVIF:浏览器 85%+ 兼容;设计软件普遍不支持,目前只适合网页前端展示
5 类场景的选型实战
场景 1:网站 / App 内的图片(用户在浏览器看)
用 WebP。理由:浏览器兼容 95%+、比 JPG 小 25-35% 加载更快、影响 SEO 排名。
例外:logo / 透明 PNG 用 WebP 无损模式或继续 PNG; 需要 IE 11 兼容(银行 / 政府站)用 JPG。
场景 2:发微信 / QQ 给别人
用 JPG。理由:微信本身会压缩,你给它 PNG 也会压成 JPG; iOS 的 HEIC 在 Android 部分软件打不开;WebP 老安卓手机偶尔有兼容问题。
例外:朋友圈九宫格用 JPG 90% 质量(微信压缩前留余量); 聊天里发原图用 JPG 100% 质量,微信压缩后仍清晰。
场景 3:电商上传商品图(淘宝 / 京东 / 拼多多)
用 PNG 或者 JPG 高质量。理由:平台审核严格,PNG 保白底纯净度; JPG 必须 95%+ 质量,否则白底边缘可能有色斑。
关键:抠图后的商品图必须 PNG 保透明,直接发 JPG 会自动加白底, 变成不能复用的成品图。
场景 4:印刷(海报 / 名片 / 画册)
用 PNG 或者 TIFF(印刷专用),不要 WebP / AVIF。 印刷厂用的设计软件(PS / AI / InDesign)对 WebP 支持差,提交的 WebP 文件可能被拒。
印刷一定要无损 + 300 DPI:PNG 是无损,设 300 DPI 就是印刷可用。
场景 5:长期备份 / 存档
保留原始格式 + 多份:相机拍的 RAW、HEIC、PNG 都保留原版, 不要为了省空间转成 JPG(JPG 是有损,转一次画质丢一点)。
网盘 / 移动硬盘存档建议:原始 RAW / HEIC 一份 + WebP 高质量一份(浏览方便)。
转换的几个常见陷阱
转换过程容易踩的 3 个坑:
陷阱 1:多次 JPG 转换画质下降
JPG → PNG → JPG → PNG 这种来回转,每次 JPG 编码都丢一点细节。 正确做法:原图保留,只做一次"原图 → 目标格式"的转换。
陷阱 2:JPG 转 PNG 体积爆炸
200KB 的 JPG 转 PNG 后变成 2MB。没意义。JPG 转 PNG 不会变清晰, 只是体积大了。除非你需要透明背景,否则不要做这个转换。
陷阱 3:PNG 转 WebP 用了有损模式
转换工具如果默认"WebP 有损",PNG 的精确细节会丢失。 logo / 透明 PNG 转 WebP 必须用"WebP 无损"模式。
总结
4 种格式各有应用场景,记住这个简化原则:需要透明用 PNG / WebP 无损, 网页展示用 WebP,发别人用 JPG,印刷用 PNG / TIFF。
站里的图片格式转换工具 支持 JPG / PNG / WebP / AVIF / HEIC 互转,带画质参数和透明度处理。 转完想压缩到指定体积,接图片压缩 调整 JPG 质量参数。