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