概览
图片优化的目标不是把所有图片压到最小,而是为实际显示尺寸与内容类型提供合适的文件。WAFGO 的交付思路强调素材、页面和缓存一起验证。
这里介绍图片处理与 CDN 的集成方法。自动处理能力、格式范围和计费方式需按实际方案确认;本页不提供图片变换 API。
先解决尺寸不匹配
手机缩略图通常不需要下载展示大图所需的像素。根据真实布局准备有限且可复用的尺寸档位,避免每个请求生成一个新规格。
响应式尺寸
结合视口、像素密度和显示宽度选择资源,保留合理的高分屏清晰度。
内容裁切
为人物、产品和文字图片检查焦点与边缘,避免自动裁切丢失重要信息。
稳定布局
在页面预留图片比例与尺寸,让图片加载不推动周围内容。
格式与质量应按素材判断
照片、透明图、图标和含文字的截图有不同需求。用代表性素材比较质量与体积,并检查实际终端的兼容结果。
| 素材 | 重点检查 |
|---|---|
| 照片 | 细节、色彩、渐变和压缩痕迹 |
| 透明图片 | 透明边缘、背景适配和文件体积 |
| 文字截图 | 小字清晰度与边缘锐利程度 |
| 品牌图标 | 矢量优先、比例正确与授权范围 |
把图片处理组织成可复查的发布流程
保留原图,先确定展示用途,再生成有限的发布变体。尺寸、裁切、格式与效果需要一起检查;处理工具可以替换,但版本与验收记录应保持清楚。
缩放与裁切
按页面比例和焦点生成尺寸档位,避免把原图拉伸变形;检查人物、商品和文字是否完整保留。
格式与质量
依据透明度、色彩和终端兼容要求选择输出,在代表性图片上比较视觉质量与文件体积。
锐化与水印
需要锐化时检查边缘和噪点;加入水印时确认内容权利、摆放位置与可读性,水印不能替代访问授权。
受控发布
只发布确认过的规格与版本,为受限原图设置访问权限;避免公开任意处理入口造成无约束的变体和资源消耗。
让处理结果可以稳定复用
图片版本、尺寸和格式决定了缓存对象。控制变体数量,避免无约束参数导致缓存碎片和额外处理。
- 保留原图并为处理结果使用可追踪的版本标识。
- 检查不同格式与尺寸是否得到正确的缓存内容。
- 首屏关键图适度优先加载,屏幕之外的图片按需加载。
- 替换素材时验证旧版本清理与回滚路径。