一句话区别
JPG 适合照片（压得小，但不透明）；PNG 适合图形、logo、要透明的图（无损，但文件大）。
- JPG：照片、复杂图，文件小
- PNG：logo、图形、透明，文件大
什么时候用 JPG
凡是照片、渐变、复杂细节，通通 JPG。它把不重要的人眼不敏感的数据丢掉，文件小很多。
- 人物照、风景照
- 电商产品实拍
- 博客配图里的照片
什么时候用 PNG
要透明、要清晰边缘、要文字，用 PNG。logo 放彩底、图标、截图，PNG 不会糊边。
- logo 和品牌图
- 图标、按钮
- 带文字的截图
能不能两个都别用？
能。WebP 对照片和透明都好，体积更小。新项目直接上 WebP 最省事；要兼容老环境再留 JPG/PNG 兜底。
- 照片 → WebP
- 透明 → WebP（也支持）
- 老浏览器 → 留 JPG/PNG