缩略图的比例混乱表现得很明显：同一张列表中卡片的高度参差不齐，在手机上裁剪掉主体部分，在分享到其他地方的时候会出现大面积留白。主要原因是在上传的时候没有进行限制，前端又用对象填充的方式强行裁剪，最后只能任由内容被删减。
第一步就是确定基准比例，然后按照场景进行分类。资讯流和视频封面采用 16:9 的比例，商品和作品卡片使用 4:3 或者 1:1 的比例，人物头像固定为 1:1，移动端竖版场景补充 4:5。同一位置只能有一种比例，不能维护多套模板。确定好比例之后倒推像素尺寸，设置 1 倍、2 倍两种输出方式，兼顾高分屏和流量成本。
裁剪规则应该写入规范中，不能交给渲染层来处理。中心裁切适用于构图对称的素材，人脸、商品主体、文字区域偏向一侧时要留安全区，或者在上传时由编辑确认焦点位置，把坐标随图存储。缩略图按照焦点向外扩展的方式生成，不是机械地取中间点。
上传端进行强制约束比事后修改要好得多。编辑器自带裁剪框，锁定目标比例，超出部分不能提交；服务端收到原图之后统一推导多档尺寸，命名带上规格标识，格式优先使用压缩率更高的编码，并且设置单文件体积上限。存量图片用脚本批量重算，先抽检一批确认裁切效果再全量执行。
前端配合三点。容器使用固定宽高比来占位，在图片加载完成之前不会产生布局跳动；根据屏幕宽度选择不同的档位，防止小屏加载大图；懒加载和占位底色一起设置。列表滚动的时候高度是稳定的，视觉上的节奏才会统一。