先看四大差异
| 格式 | 是否无损 | 透明 | 动画 | 典型用途 |
|---|---|---|---|---|
| JPEG | 有损 | 否 | 否 | 照片、连续色调 |
| PNG | 无损 | 是 | 否 | 截图、线条、图标、需透明 |
| WebP | 两者皆可 | 是 | 是 | 网页通用，体积更小 |
| AVIF | 两者皆可 | 是 | 是 | 追求最小体积，编码较慢 |
| GIF | 有损（256 色） | 是 | 是 | 简单动图，色域低 |
| SVG | 矢量 | 是 | 是 | 图标、Logo、线条图 |
质量参数怎么设
- 照片：JPEG 质量 75–85 通常肉眼无损；同样观感下 WebP 比 JPEG 小约 25–35%，AVIF 再小 20–30%；
- 截图 / UI：用 PNG 或 WebP 无损，文字边缘才清晰；
- 图标 / 线条图：优先 SVG，任意缩放不糊；
- 动图：能用视频就别用 GIF，体积和清晰度都更好。
常见坑
- 二次压缩累积损失：反复存 JPEG 会一代代变差，原图务必留无损；
- 透明通道转 JPEG：JPEG 不支持透明，透明区域会变黑底或白底；
- 忽略 EXIF：照片里的拍摄时间、定位可能随文件外泄，发布前建议清除；
- AVIF 编码慢：适合构建期预处理，不适合用户实时上传即时转换。
动手试试
给图片加水印并控制导出质量：图片水印。