常见图片格式的核心区别，主要在于 **是否压缩、是否支持透明、是否支持矢量、文件大小、适合什么场景**

| 格式           | 类型 | 透明背景   | 动画   | 放大是否模糊 | 文件大小 | 常见用途                 |
| -------------- | ---- | ---------- | ------ | ------------ | -------- | ------------------------ |
| **JPG / JPEG** | 位图 | ❌          | ❌      | ✅ 会模糊     | 小       | 照片、摄影、电商图       |
| **PNG**        | 位图 | ✅          | ❌      | ✅ 会模糊     | 中～大   | Logo、截图、透明图片、UI |
| **SVG**        | 矢量 | ✅          | 可实现 | ❌ 不模糊     | 通常很小 | Logo、图标、网页插画     |
| **WebP**       | 位图 | ✅          | ✅      | ✅ 会模糊     | 很小     | 网站图片、App 图片       |
| **GIF**        | 位图 | ✅但有限    | ✅      | ✅ 会模糊     | 通常较大 | 简单动图、表情包         |
| **AVIF**       | 位图 | ✅          | ✅      | ✅ 会模糊     | 很小     | 新一代网页图片           |
| **BMP**        | 位图 | 通常不支持 | ❌      | ✅ 会模糊     | 非常大   | 较少使用                 |
| **TIFF**       | 位图 | 视情况     | ❌      | ✅ 会模糊     | 很大     | 印刷、扫描、专业摄影     |