為了提升動態頁的打開速度，動態相片或視頻封面（簡稱：圖片）都會生成縮略圖：

1. 動態圖片上傳至騰訊云對象存儲；
2. 使用對象存儲提供的圖片縮放服務生成縮略圖；
3. 渲染動態圖片時使用縮略圖；
4. 點擊縮略圖時渲染原圖；

動態圖片是按照典型的九宮格布局的，圖片的渲染寬高會根據圖片數目和屏幕大小會進行微調：
如果是一張圖片，橫版的默認寬度為320，寬高比為4:3；豎版的默認高度為320，寬高比為3:4；
如果是多張圖片，默認的寬高為100。

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

• 如果原圖（寬高）大于渲染框（寬高），把渲染框的中心點與原圖的中心點重合；然后，不斷等比放大渲染框，直到渲染框超出原圖為止；此時，渲染框覆蓋的原圖部分就是需要顯示的圖片內容，顯示時圖片內容會等比縮小至指定寬高。

• 如果原圖小于渲染框，把渲染框的中心點與原圖的中心點重合；然后，不斷等比放大原圖，直到渲染框被完全填滿；此時，渲染框中的原圖部分就是需要顯示的圖片內容。

考慮到圖片顯示時可以被自動的等比拉伸填滿渲染框，選取的縮放策略也比較簡單：/thumbnail/x>，圖片等比縮放至指定的寬高區域內，顯示時自動拉伸填充。

服務上線之后很快發現：縮略圖的大小非常符合預期：很小，幾KB左右；但是，圖片看起來很不清楚，屬于一眼看上去就很糊的感覺。

問題的原因很簡單：圖片的縮放策略有問題！

• 如果原圖大于渲染框，只要原圖的比例與渲染框的比例不一致，原圖整個被縮放至渲染框內時，形成的縮略圖一定是小于渲染框的，顯示時會被拉伸。縮略圖本身比較小，像素不高，拉伸時很容易“糊”。

• 如果原圖本身小于渲染框，縮放本來就是拉伸，“糊”的可能性也很高。
  大多數時候，原圖整體被縮小，然后局部被拉伸顯示，圖片小，像素不足時就會糊。

更好的縮放方式：

• 如果原圖大于渲染框，兩者中心點重合，等比放大渲染框直到超出原圖，然后將渲染框覆蓋的原圖部分等比縮小至指定寬高即可。

• 如果原圖小于渲染框，兩者中心點重合，等比縮小渲染框直到被原圖完全包含，然后渲染框覆蓋的原圖部分等比放大至指定寬高即可。

相當于先裁剪再縮放，裁剪就是在原圖中根據渲染框的寬高比盡可能地圈出更多的內容用于顯示；縮放就是把需要現實的內容縮小或放大至指定的寬高。

實際上，大多數情況下用戶上傳的圖片是遠大于渲染框大小的，圖片經裁剪縮放之后，渲染直接顯示就可以，圖片大小和渲染大小是完全相同的，糊的可能性就比較小。

騰訊云對象存儲是支持縮放裁剪的：/crop/x/gravity/center，以圖片中心點為參考點，縮放裁剪至指定寬高。

服務變更上線之后，縮略圖的清晰度提升不少。

米攸

米攸（WX Small Program）是一個年輕人的活動社交平臺，你可以找到好玩的活動，遇見有趣的人。