- 主要思想
按需加载：根据实际显示需求裁切适当大小和质量的图片
- 实现手段
阿里云图片处理服务
- 质量压缩
- 格式转换
- 裁剪处理
这些处理完全在CDN层完成，不需要修改原始图片，也不需要额外的服务器资源。
1 根据不同应用场景区分
例如背景图片，有背景列表、预览框、对话框、卡片，预览框、对话框呈现原图，而背景列表和卡片都是小图，就会进行裁切并压缩质量。
2 创建图片处理工具
为不同场景设置不同的处理参数
技术深度解析
1. 缩放模式的选择
阿里云OSS提供了多种缩放模式，我们选择了m_lfit，原因是：等比缩放，限制在指定尺寸内
- 保持图片原始比例，不会变形
- 在不知道图片原始尺寸的情况下也能安全使用
其他可选的缩放模式包括：
m_mfit：等比缩放，延伸到指定尺寸外m_fill：等比缩放并裁剪，填满指定尺寸m_pad：等比缩放，不足部分用背景色填充m_fixed：强制缩放到指定尺寸，可能变形
2. 质量参数的平衡点
影响图片质量和文件大小的主要参数是quality：
- 质量 100%：几乎无损，但文件大小接近原图
- 质量 90-95%：肉眼几乎无法分辨差异，但可减小 30-50% 文件大小
- 质量 80-85%：轻微可见质量损失，可减小 60-70% 文件大小
- 质量 70% 以下：明显的质量损失
3. 图片宽度的选择依据
图片宽度设置基于以下原则：基本宽度应略大于组件实际宽度
例如，对于宽度为300px的卡片组件：
- 在标准屏幕上，提供400-500px宽图片
- 在2倍屏上，提供800-1000px宽图片
在CDN层完成的优缺点
优点：节省存储，只需存储一份高质量原图，即时生成需要的，无需对源文件作处理
缺点： 第一次请求特定参数的图片时会有额外处理时间
解决：可以对首页图片预热加载
