选图片格式，本质是在"画质、体积、透明、兼容"四件事之间做权衡，而且答案取决于图里装的是什么，不是格式新不新。一张线条文字的截图，和一张风光照片，结论可以完全相反。这篇把四种常见格式讲透，给一张能照抄的表。
有损 vs 无损：分水岭
所有格式先分成两类：
- 有损（JPG、WebP 有损、AVIF、HEIC）：编码时丢掉一些不易察觉的信息换体积，体积小，但反复保存会逐次劣化。
- 无损（PNG）：完整保留每个像素，多编多存不劣化，但体积大。
一句话：有损拿画质换体积，无损拿体积换保真。
四种格式的性格
| 格式 | 压缩 | 透明 | 主要用途 |
|---|---|---|---|
| JPG / JPEG | 有损 | 不支持 | 照片、人像、风景 |
| PNG | 无损 | 支持（PNG-24/32） | 图标、截图、透明、文字 |
| WebP | 有损 + 无损 | 支持 | 网页配图，体积比 JPG 小 |
| AVIF | 有损 | 支持 | 更高压缩的网页图 |
几个关键差异：
- JPG 不给透明，这是硬伤。想要透明只能用 PNG / WebP / AVIF。
- JPG 对线条、文字、纯色很残忍——压缩产生的噪点和色块集中在边缘，logo、代码截图用 JPG 会糊。PNG 对这类内容近乎完美。
- WebP 同画质一般比 JPG 小 25%–35%，支持有损和无损、也能透明，是现代网页主流。
- AVIF 比 WebP 还能压，但解码耗时明显，浏览器支持也弱一些，想用要先准备好回退格式。
按内容选，别只看格式新旧
来自真实测试的经验，不少地方跟直觉相反：
- 高纹理照片（人像、风景、粒子）：WebP / AVIF 优势大。一张 1600×1000 的高纹理图，PNG 3.25MB → WebP 318KB，省了 90%。
- 大面积纯色的截图 / 图文 / UI：别迷信新格式。同样一张图文混排，WebP 494KB、AVIF 反而 552KB（还慢 3 倍），而 PNG 1.28MB、JPG 1.36MB——PNG 居然比 JPG 还小。原因是纯色区域对无损格式天然友好，有损编码在这种图上省不出多少。
- 需要透明（图标、抠图素材）：优先 PNG，颜色简单可以走 PNG-8 减到 256 色内再压一截。
- 给老设备、老系统看：JPG 兼容性最好，基本没有打不开的问题。
所以：照片用有损（JPG / WebP），文字截图和透明图用 PNG，网页追求体积用 WebP（AVIF 看兼容），这条能覆盖 90% 的场景。
JPEG 质量档位怎么调
JPG 的"质量"参数（各导出工具 0–100，数值含义彼此不同，认效果不认数字）经验区间：
- 网页发布：80–85
- 高清展示：90–95
- 低于 70：边缘开始发毛、出现色块，一般不做正经用途
从 100 降到 70，体积能差好几倍，而眼睛几乎看不出区别——这就是"质量档"作为压缩刻度的意义。先根据目标体积（邮件 10MB 内、公众号配图 300KB 内…）定位，再往下调质量，是比盲猜更靠谱的做法。
压缩的几个常见误区
- 改后缀名不等于压缩：把 photo.png 改成 photo.jpg，字节数一个不变，只是骗过了系统识别。
- 反复截图 / 互传会层层劣化：每压一次有损一次，还没法精确控制目标大小。
- 压缩 ≠ 打包：ZIP / RAR 只是把文件捆在一起，解决不了单张超限的问题。图片压缩是重新编码。
动手试
站内图片压缩和格式转换把 JPG / PNG / WebP / AVIF 之间的转换和瘦身做成了界面操作，浏览器本地处理、文件不上传，可以直接实测不同格式的体积差。
FAQ
Q：WebP 一定比 JPG 小吗？ A：对照片类通常是；但对大面积纯色 / 文字内容可能反而不如（本文的图文混排例子就是反例）。判断标准是图的内容，不是格式新旧。
Q：PNG 什么时候值得用？ A：需要透明、或是截图 / 文字 / 简单色块、或要反复编辑的无损往返。给实拍照片用 PNG 会非常大，那种情况选有损更合理。
Q：AVIF 能用吗？
A：能用，但要注意两点：解码比 WebP 慢，浏览器支持没那么全。面向现代浏览器并做好 JPG / PNG 回退（<picture> 元素）才安全。