这是 Beta 探索课程,内容结构、实验步骤和示例可能会继续调整。
图片基础
做图片系统前,必须理解图片本身。格式、分辨率、元数据、压缩参数都会影响存储、带宽、加载速度和处理成本。
本章主线
本章包括三个基础点:
- 图片格式:JPEG、PNG、WebP、AVIF 各自适合什么场景。
- 图片参数:宽高、分辨率、质量系数如何影响体积和显示。
- 元数据:EXIF、方向、地理位置等信息如何处理。
格式选择
不同格式有不同取舍:
| 格式 | 特点 | 适用场景 |
|---|---|---|
| JPEG | 有损压缩,体积小 | 照片 |
| PNG | 支持透明,无损 | 图标、截图 |
| WebP | 压缩率好,兼容较广 | Web 图片 |
| AVIF | 压缩率更高,编码成本高 | 高流量图片 |
系统可以保存原图,同时按客户端能力生成不同格式的派生图。
尺寸与质量
移动端只需要 750px 宽的图,就没有必要下发 4000px 原图。图片系统要支持按需裁剪和缩放:
/image.jpg?w=750&q=80&format=webp但动态参数不能无限制开放,否则会产生大量派生图,增加存储和计算成本。
元数据治理
图片元数据可能包含拍摄时间、设备、方向和地理位置。系统要决定:
- 是否保留 EXIF。
- 是否自动修正方向。
- 是否删除敏感元数据。
- 是否记录图片宽高和 hash。
理解这些基础后,上传存储方案才有设计依据。