这是 Beta 探索课程，内容结构、实验步骤和示例可能会继续调整。
分辨率与质量：看不见的 trade-off
一个让我纠结的数字
小李上传了一张 6000×4000 的照片，浏览器只需要显示 800px 宽。
800×533，看起来很简单。但质量参数设多少？
结果：
quality=50: 18 KB ← 色块明显，像油画
quality=60: 24 KB ← 细节模糊
quality=70: 34 KB ← 可接受，但放大能看出差异
quality=75: 42 KB ← 边缘略有柔和
quality=80: 52 KB ← 肉眼几乎看不出和原图的区别 ← 我选了这个
quality=85: 68 KB ← 和 80 几乎一样
quality=90: 92 KB ← 多出的 40KB 几乎无意义
quality=95: 138 KB ← 浪费存储quality=80 是甜蜜点。但”肉眼几乎看不出”是主观判断——我需要一个客观指标。
用 SSIM 量化质量差异
SSIM（结构相似性）是衡量两张图片相似度的标准指标，范围 0~1，1 表示完全相同。
结果：
quality=50: SSIM=0.8521, size=18 KB ← 差异明显
quality=60: SSIM=0.8934, size=24 KB ← 可感知差异
quality=70: SSIM=0.9312, size=34 KB ← 轻微差异
quality=75: SSIM=0.9523, size=42 KB ← 接近阈值
quality=80: SSIM=0.9678, size=52 KB ← 高质量 ← 最佳平衡
quality=85: SSIM=0.9789, size=68 KB ← 边际收益递减
quality=90: SSIM=0.9876, size=92 KB ← 几乎无损
quality=95: SSIM=0.9934, size=138 KB ← 浪费质量-体积曲线有一个拐点：quality=80 之后，文件大小增长很快，但 SSIM 提升很慢。
SSIM
1.00 ┤
│ · quality=95
0.99 ┤ ·
│ ·
0.98 ┤ · quality=90
│ ·
0.97 ┤ · ← quality=80 (拐点)
│ ·
0.96 ┤ ·
│·
0.95 ┤ quality=75
│
0.90 ┤
│
0.85 ┤ quality=50
└───┬────┬────┬────┬────┬──→ size
20 50 70 100 140 KB不同场景的最佳参数
基于 SSIM 分析和业务需求，我制定了不同场景的质量策略：
分辨率与设备适配
不同设备的屏幕分辨率差异巨大：
最佳实践：按 逻辑像素 × 2 来生成图片——在绝大多数设备上够清晰，体积也不会太大。
我的思考
思考 1
如果你发现 quality=75 和 quality=80 的图片在文件大小上差了 10KB，但 SSIM 只差 0.015。在什么情况下应该选择 75？什么情况下选择 80？
参考答案
选 75 的场景：
列表页/缩略图：用户快速滑动浏览，不会停留看细节。10KB × 20 张图 = 200KB 的差异，直接影响首屏加载速度。
移动端弱网环境：3G 网络下 200KB 需要约 0.3 秒加载。节省 200KB = 快 0.3 秒。
高流量页面：首页每天 100 万 PV，每张图节省 10KB = 每天节省 10GB 流量 = 每月节省 2,400 元 CDN 成本。
选 80 的场景：
详情页/全屏查看：用户会仔细看图片内容，质量差异会被注意到。
付费内容/专业用户：摄影师的作品展示，质量是核心价值。
低流量页面：用户相册页每天只有 1000 PV，10KB 的差异微不足道。
决策框架：
是"扫一眼就走"还是"仔细看"？
├─ 扫一眼（列表/卡片） → quality=70~75
└─ 仔细看（详情/全屏） → quality=80~85
用户付费了吗？
├─ 免费/广告支持 → 可以适当降低质量节省成本
└─ 付费/专业用户 → 质量优先，不惜多花存储和带宽
流量级别？
├─ 高流量（日 PV > 10 万） → 每KB都值得优化
└─ 低流量（日 PV < 1 万） → 质量优先