一句话决策:交给别人的图存 JPG,自己网站的图用 WebP,AVIF 只在你能同时提供回退时才上。 三种格式的差别不在"谁更先进",而在谁保证对方打得开。图片格式的基础差别先看 JPG、PNG、WebP、HEIC 有什么区别,这篇讲的是在真实交付场景里怎么落地。
三种格式各自的位置
- JPG:有损、不支持透明、历史最久。几乎所有系统、打印机、办公软件、报名网站都认,缺点是每次另存都会再损一次
- WebP:有损和无损都支持、能带透明通道。现代浏览器原生支持,体积在同观感下通常比 JPG 更小,但很多非浏览器环境(旧看图软件、部分办公套件、老系统上传校验)支持不完整
- AVIF:压缩效率新一代,同观感下通常比 WebP 还小,支持宽色域和透明。代价是旧设备、旧浏览器可能根本解不出来,编码也更耗时间,不少图片处理链路目前不接受它
- PNG(对照组):无损、支持透明,照片类会明显偏大,但截图和小字边缘比 JPG 干净
体积排序是趋势,不是承诺
同图同观感下的常见排序:PNG 最大,JPG 次之,WebP 更小,AVIF 通常最小。但这句话不能当验收标准,原因有三:
- 取决于内容:照片类差距明显,纯色块、线条图、带大量文字的截图差距很小,甚至反过来
- 取决于参数:JPG 质量拉到 95、WebP 拉到 30,谁大都可能
- 取决于来源:从别的格式转来的一次转换就会引入损失,体积数字失真
正确做法是在你自己的三五张代表图上各存一份,把体积和放大 100% 的观感一起比,别拿别人的结论直接套。有损与无损的机制差别决定了重复另存会不会继续掉画质,这一点在选交付格式前要先想清楚。
兼容性现实:谁只稳认 JPG
三类场景请一律先交 JPG:
- 报名、申报、审核系统:白名单常只写 .jpg .jpeg .png,WebP 会被判"格式不支持",AVIF 基本没戏。报错通常是"文件格式不被支持"或"文件已损坏"
- 打印店、图文社:店里机器系统旧、看图软件杂,WebP 打不开或插件缺失很常见,最终还要回头转 JPG
- 老版本 Office:把 WebP 插进 Word 或 PPT 可能失败或显示空白,需要先转成 PNG 或 JPG 再插入
手机侧还有第四类:iPhone 默认 HEIC,别人电脑上打不开,先在 HEIC 转 JPG 这类入口转成通用格式再谈交付。
需要透明和小字锐利时怎么选
- 要透明背景:JPG 出局,它没有透明通道。留 PNG 或带透明的 WebP
- 透明图必须交 JPG:透明区会被铺成实色(常见白底),叠加在深色页面上就是一圈白框。这种情况要么留 PNG,要么先把背景铺成目标色再导出;反过来把 JPG 转成 PNG 也不会凭空出现透明
- 文字、表格、代码截图:JPG 的色度抽样会让彩色小字边缘发毛,优先 PNG 或 WebP 无损
- 商品主图、照片:JPG 或 WebP 有损,按平台给的像素与体积上限控制,规格要求逐项抄下来再动手
已经存成 WebP 的图怎么变成交付用 JPG
- 先确认对方要求:格式、体积上限、像素尺寸,三项抄下来
- 批量转成 JPG:站内入口 PNG / WEBP 转 JPG
- 有透明的图先想清楚底色,转 JPG 会带白底,需要别的底色就先铺再转
- 检查转完的宽高是否还在要求区间内,不够的先用站内图片调整尺寸改到位,注意放大不会变清晰
- 体积仍超标再压一次,入口 图片压缩
- 换 png 后缀假装成 PNG 是错的,扩展名和真实编码不一致会导致对方打不开,见 改了扩展名文件打不开
需要保画质做无损中转时,转成 PNG 再交付;如果只是别人打不开,转到 JPG 或 PNG 这类通用格式即可,不必追求最优体积。
网页侧怎么做才不吃亏
自己控制的页面可以两套并行:主推 WebP,同时保留 JPG 回退。实现方式请让开发同事处理,思路是页面里为同一张图准备多个来源并按支持情况选择,图片地址里的扩展名要与真实编码一致。AVIF 上生产环境前务必先查你目标用户群的设备和浏览器版本分布,不能只在自己手机上试。另外两件事经常被忽略:
- 网页图片的尺寸门槛和体积门槛要分开满足,平台写"800×800 且 2M 以内"时,先把像素改对,再压体积,顺序反过来会二次损失
- 上传后系统会二次压缩,你上传 WebP 但系统只输出 JPG,等于白做
参数起点的经验值
- 正文照片类:宽度按显示容器给足像素,JPG 质量从 75 到 85 起试,先看清再降
- 高分屏适配:按显示尺寸的两倍准备像素,交给页面缩放,不要直接拉伸
- 文字与界面截图:PNG 或 WebP 无损,走 JPG 一定在彩色小字边缘发毛
- 列表缩略图:单独导一套小尺寸原图,不要把大图交给前端缩放,加载和清晰度都吃亏
- 首页大图:宽度控制在 1920 像素以内,并留出余量给平台二次压缩
- 通用一条:不要拿一张原图喂所有位置,每个位置各出各的尺寸
三步决定这张图存什么
- 接收方你能不能控制:不能控制(报名系统、打印店、客户电脑)就回到 JPG 或 PNG
- 内容有没有透明和小字:有透明走 PNG 或带透明的 WebP;小字密集走无损
- 有没有体积上限:先满足像素,再压强度,最后核对格式与扩展名
三问答完,格式基本就唯一了。剩下的都是参数微调,不要在一开始就纠结"哪个格式更先进"。
分场景决策
- 提交材料、证件照、票据:JPG,透明需求不存在,通用性优先
- 自建商城、内容站:WebP 为主,JPG 兜底
- 要在页面里放高清大画幅、且面向较新设备:可评估 AVIF,同时保留 WebP 与 JPG 两级回退
- 要发给客户或打印:JPG 或 PNG,别给对方一个打不开的格式
- 设计稿、需要反复改版:留 PNG 或源文件,定稿后再导出交付格式
按交付通道再过一遍
- 报名与申报系统:JPG 或它白名单里明确写出的格式,透明需求几乎不存在,别硬上 WebP
- 邮件附件:JPG 最稳,各类客户端与网页邮箱的预览都认;PNG 体积容易过大被挡
- 即时通讯发送:对方要的是"能看清",发原图或直接给 PDF;压缩通道会自动降质,同一张反复转发每转一次损一次
- 自建网站:WebP 为主,JPG 兜底,AVIF 视用户设备分布决定
- 打印店与图文社:JPG 或 PNG,并附上"按实际大小打印"的说明,格式选错会被对方退回并加收处理时间
- 长期存档:优先无损或低压缩强度版本,另存一份原始文件;不要为了省空间把唯一一份存成自己都不确定五年后还能解开的格式
- 设计交付:源文件加定版导出件,定版件用 PNG 或 JPG,并在文件名或说明页写清以哪份为准
四个高频误判
- "WebP 一定比 JPG 小":同观感下通常成立,但参数给错、内容以线条和纯色为主时可能反过来,最终以你自己的三五张实测为准
- "AVIF 更先进,全站换掉":先进不等于对方能解,换全站之前先看设备与浏览器分布、回退是否配齐、后台转码链路是否接受它
- "转一次格式画质不变":有损转无损只变体积不变画质,有损再转有损会再损一次,转格式前先确认后面还要不要继续另存
- "透明图交 PNG 就一定安全":照片类 PNG 体积很大,常卡体积门槛;过不了时改用带透明的 WebP,或先确定底色再交 JPG
排查清单
- 上传提示格式不支持:不是体积问题,是白名单,转成 JPG 再传
- WebP 转 JPG 后出现白底:原图有透明通道,先定底色
- 图片在浏览器正常、下载后打不开:对方解码器版本过旧,改交 JPG 或 PNG
- AVIF 传到某平台后变模糊:平台做了二次转码且不支持该格式,改交 JPG
- 转完体积反而变大:有损图转无损 PNG 属正常,画质不会提升
- 颜色偏灰:来源是宽色域、导出时被压成普通色域,导出时确认色彩配置
常见提示原文与含义
- "不支持的文件类型""file type not allowed":白名单拦你,与体积画质无关,转成要求的编码即可
- "文件已损坏或无法读取":最常见是扩展名与真实编码不一致,或用改后缀的方式伪转
- "图片过大""exceeds maximum upload size":体积门槛,压强度而不是换格式,换到无损反而更大
- "预览显示不出,上传后却成功":系统的预览组件缺解码器,正式环境仍可能取不到图,交付场景不要冒这个险
- "打开是纯色块或半屏灰":解码中断,典型出现在旧设备读新格式,重存成 JPG 或 PNG
- "微信发送后变糊":没走原图,被通道二次压缩,与格式选择无关,重新发原图或改交 PDF
别做这几件事
不要为了"看起来新"把交付图存成 AVIF;不要用改后缀代替真转换;不要把同一张 JPG 反复另存,每存一次都在掉细节;不要拿无损格式去凑体积下限,格式选错只会更大;不要在没测过目标系统的情况下批量替换全站图片格式。
本站能力边界说明
站内支持 JPG、PNG、WebP 之间的常见互转(含 WebP 转 PNG、PNG 与 WebP 转 JPG、JPG 与 PNG 转 WebP)、图片压缩、改尺寸、裁剪、去背景,以及 HEIC 转 JPG。站内不提供 AVIF 的读取与输出,AVIF 需求请用专业图像软件或开发侧转码服务;也不提供图像超分与画质修复,糊图救不回来;格式转换不做 OCR,图片里的文字要取走 图片转文字(每页扣 1 点);转格式与压缩不承诺保留元数据。
限额口径:游客与未充值注册用户单文件上限 8MB、每天 5 次成功转换;会员按档位可到 20MB、30MB、50MB,次数不限。转换在服务器端完成,涉密图片请自行评估;文件保留 24 小时后自动清理,成品当天下载。