聊天缩略图背后的故事：你不曾注意的那些细节

　　这里我们主要讨论聊天列表中展示的缩略图，缩略图通常是将图片内容进行一定的缩小展现，或裁剪展现，主要有两个目的，一是提供一定的预览功能，二是节省屏幕展示空间、节省流量。

　　用户发送的图片长短不一，有正方形的，有竖长形的，有横宽型的，甚至有不规则形的(比如一些用户保持的 png 表情)如何设计一个合理的缩略图展示规则能最大可能的满足展示需求，又让整个聊天列表整齐美观呢?

　　首先我们来看看我们想在聊天中提供的体验：

　　单个图片更多的图片内容信息展示

　　多张图片更好的浏览定位找寻

　　同时发送多张图片更高效的展示

　　如果我们希望尽可能保留图片的长宽比样式，在聊天列表中错落有致地展示，则我们需要对横向和纵向图片的长和宽都做相应的阈值限制。

　　在 Facebook Messenger 的例子中，我们发送了以下一组测试图片：

　　有常见照片的 4:3 比例，也有常见截图的 16:9 比例，还有 21:9 这样超长/超宽图片。

　　裁切阈值方面：我们发现，对于竖向图，Facebook Messenger 设定了一个比例的阈值，长图超出 5:3 比例会被裁切、宽图超过 1:2 会被裁切。未超过这个比例值，图片的内容将被完整缩放。

　　展示尺寸方面，我们发现：

　　对于竖向图：高度固定为 300pt，宽度是根据图片比例动态变化的。

　　对于横向图：宽度是固定为 264pt，高度是根据图片比例动态变化的。

　　这种方案，最大地兼顾了图片原始比例和图片内容。

　　限定宽和高的策略也在微信缩略图规则中体现：

　　与 Messenger 不同之处在于：：