JPG、PNG、WebP 都是常见图片格式，但它们的核心差异主要在三个点：
- 压缩方式
- 是否支持透明
- 在“画质 / 体积 / 兼容性”之间怎么取舍
先说结论
- 照片类图片：优先
JPG或WebP - 图标、Logo、截图、带透明背景：优先
PNG或WebP - 做网页性能优化：优先考虑
WebP
三者的本质区别
| 格式 | 压缩方式 | 是否支持透明 | 体积特点 | 适合什么 |
|---|---|---|---|---|
JPG / JPEG | 有损压缩 | 不支持 | 通常较小 | 照片、色彩丰富的大图 |
PNG | 无损压缩 | 支持 | 通常较大 | 图标、Logo、截图、文字图、透明图 |
WebP | 支持有损和无损 | 支持 | 通常比 JPG / PNG 更小 | 网页图片、性能优化场景 |
1. JPG 是什么
JPG 本质上是有损压缩格式。
它会在压缩时牺牲一部分细节，换来更小的体积，所以非常适合：
- 风景照
- 人像照片
- 商品照片
- 社交媒体图片
JPG 的优点
- 体积通常比较小
- 色彩表现很好
- 很适合照片这种“细节很多、颜色渐变丰富”的图
JPG 的缺点
- 不支持透明背景
- 压缩后会丢失细节
- 不适合边缘锐利的内容，比如：
- 文字截图
- 图标
- UI 界面图
因为这些内容一旦被有损压缩，很容易发糊、发虚、出现边缘脏点。
2. PNG 是什么
PNG 本质上是无损压缩格式。
这意味着它在压缩后不会像 JPG 那样明显牺牲画质，所以特别适合：
- 图标
- Logo
- 截图
- 带透明背景的图片
- 含有大面积纯色和清晰文字的图片
PNG 的优点
- 支持透明通道（alpha）
- 清晰度高
- 对线条、文字、界面元素很友好
PNG 的缺点
- 体积通常比 JPG 大
- 如果拿它存照片，往往会显得“没必要地大”
所以 PNG 不是“更高级”，而是“更适合某些场景”。
3. WebP 是什么
WebP 是 Google 推出的图片格式，可以看作是更偏网页优化的一代格式。
它的特点是：
- 支持有损压缩
- 也支持无损压缩
- 支持透明
- 还支持动画
所以它很像把 JPG 和 PNG 的一部分优点揉在了一起。
WebP 的优点
- 同样视觉质量下，体积通常比 JPG 更小
- 同样支持透明时，体积通常比 PNG 更小
- 很适合网页加载优化
WebP 的缺点
- 某些老旧环境兼容性不如 JPG / PNG
- 在一些设计、编辑、导出工作流里，不如 JPG / PNG 那么“传统通用”
不过在现代浏览器里，WebP 兼容性已经很好了，所以前端网页场景里非常常见。
为什么照片更适合 JPG，而截图更适合 PNG
这是面试里很常见的点。
照片适合 JPG
因为照片通常有这些特点：
- 颜色多
- 渐变多
- 细节丰富
- 对“轻微失真”不太敏感
所以用有损压缩换体积，很划算。
截图适合 PNG
因为截图、图标、界面图通常有这些特点：
- 线条清晰
- 纯色块多
- 字体边缘锐利
- 对压缩噪点非常敏感
这种内容一旦用 JPG，很容易出现发糊和边缘脏的问题，所以更适合用 PNG。
WebP 和 JPG / PNG 的关系
可以粗暴理解成：
JPG：擅长照片PNG：擅长透明和清晰线条WebP：想同时兼顾“体积”和“效果”
所以在现代前端项目里，经常会出现这样的策略：
- 老格式资源继续保留 JPG / PNG
- 新上网页资源尽量转成 WebP
- 对兼容性要求特别高时，再保留 JPG / PNG 兜底
实际开发怎么选
场景 1：商品详情页的大图
优先：
JPG- 或
WebP
因为这是照片类资源，重点是体积和加载速度。
场景 2：网站 Logo
优先：
PNG- 或
WebP
因为 Logo 往往要求清晰，且经常需要透明背景。
场景 3：界面截图
优先：
PNG
因为截图里的文字、边框、纯色区域很多，PNG 更清晰。
场景 4：网页性能优化
优先：
WebP
因为它通常能在保证质量的同时进一步减小体积。
一个容易记的选择口诀
- 照片选 JPG
- 透明选 PNG
- 网页优化优先 WebP
关于 PNG 的一个补充点
PNG 除了存图片像素数据，还可以携带一部分元数据。
比如一些场景里会在 PNG 的文本块中写入附加信息，常见字段有：
tEXtzTXtiTXt
这些字段可以用来存额外文本信息。
你之前提到的那种“在酒馆角色卡里把角色 JSON 写进 PNG”的做法，本质上就是利用了 PNG 可以附带元数据这一点。
所以有时候 PNG 不只是“图片”，还可能是“图片 + 附加信息容器”。
面试里可以怎么答
如果别人问 jpg、png、webp 的区别，可以简洁回答成：
JPG是有损压缩，体积小，适合照片，但不支持透明；PNG是无损压缩，支持透明，适合图标、Logo、截图这类对清晰度要求高的图；WebP同时支持有损和无损，也支持透明，通常体积更小，更适合网页性能优化场景。