动态缩略图清晰度优化

为了提升动态页的打开速度，动态相片或视频封面（简称：图片）都会生成缩略图：

1. 动态图片上传至腾讯云对象存储；
2. 使用对象存储提供的图片缩放服务生成缩略图；
3. 渲染动态图片时使用缩略图；
4. 点击缩略图时渲染原图；

动态图片是按照典型的九宫格布局的，图片的渲染宽高会根据图片数目和屏幕大小会进行微调：
如果是一张图片，横版的默认宽度为320，宽高比为4:3；竖版的默认高度为320，宽高比为3:4；
如果是多张图片，默认的宽高为100。

图片的渲染模式是 aspectFull，它的工作原理：

• 如果原图（宽高）大于渲染框（宽高），把渲染框的中心点与原图的中心点重合；然后，不断等比放大渲染框，直到渲染框超出原图为止；此时，渲染框覆盖的原图部分就是需要显示的图片内容，显示时图片内容会等比缩小至指定宽高。

• 如果原图小于渲染框，把渲染框的中心点与原图的中心点重合；然后，不断等比放大原图，直到渲染框被完全填满；此时，渲染框中的原图部分就是需要显示的图片内容。

考虑到图片显示时可以被自动的等比拉伸填满渲染框，选取的缩放策略也比较简单：/thumbnail/x>，图片等比缩放至指定的宽高区域内，显示时自动拉伸填充。

服务上线之后很快发现：缩略图的大小非常符合预期：很小，几KB左右；但是，图片看起来很不清楚，属于一眼看上去就很糊的感觉。

问题的原因很简单：图片的缩放策略有问题！

• 如果原图大于渲染框，只要原图的比例与渲染框的比例不一致，原图整个被缩放至渲染框内时，形成的缩略图一定是小于渲染框的，显示时会被拉伸。缩略图本身比较小，像素不高，拉伸时很容易“糊”。

• 如果原图本身小于渲染框，缩放本来就是拉伸，“糊”的可能性也很高。
  大多数时候，原图整体被缩小，然后局部被拉伸显示，图片小，像素不足时就会糊。

更好的缩放方式：

• 如果原图大于渲染框，两者中心点重合，等比放大渲染框直到超出原图，然后将渲染框覆盖的原图部分等比缩小至指定宽高即可。

• 如果原图小于渲染框，两者中心点重合，等比缩小渲染框直到被原图完全包含，然后渲染框覆盖的原图部分等比放大至指定宽高即可。

相当于先裁剪再缩放，裁剪就是在原图中根据渲染框的宽高比尽可能地圈出更多的内容用于显示；缩放就是把需要现实的内容缩小或放大至指定的宽高。

实际上，大多数情况下用户上传的图片是远大于渲染框大小的，图片经裁剪缩放之后，渲染直接显示就可以，图片大小和渲染大小是完全相同的，糊的可能性就比较小。

腾讯云对象存储是支持缩放裁剪的：/crop/x/gravity/center，以图片中心点为参考点，缩放裁剪至指定宽高。

服务变更上线之后，缩略图的清晰度提升不少。

米攸

米攸（WX Small Program）是一个年轻人的活动社交平台，你可以找到好玩的活动，遇见有趣的人。