这里我们主要讨论在聊天列表中显示缩略图，缩略图通常是将图片的内容截取到一定程度，或者裁剪显示，主要有两个目的，一是提供一定的预览功能，二是节省屏幕显示空间，节省流量。

用户发送的图片长度不一，有正方形的，有竖长的，有横宽的，甚至有不规则形状的(比如一些用户保留的png表情符号)。如何设计合理的缩略图显示规则，以尽可能满足显示需求，同时保持整个聊天列表整洁美观？

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

更多的图片内容信息用于单张图片显示多张图片更好的浏览、定位、搜索和同时发送多张图片更高效的呈现如果我们想要尽可能保持图片的长宽比，并在一个比例均衡的聊天列表中显示它们，我们需要为水平和垂直图片的长度和宽度设置合适的阈值。

在Facebook Messenger示例中，我们发送了以下一组测试图像：

常见照片的比例为4:3，常见截图的比例为16:9，超长/超宽图像的比例为21:9。

裁剪阈值：我们发现，对于垂直图像，Facebook Messenger设置了一个比例阈值。对于超过5:3的长图像，比例将被裁剪，对于超过1:2的宽图像。如果不超过比例值，图像的内容将被完全缩放。

在显示尺寸方面，我们发现：

垂直图像：水平图像：该方案最大程度地考虑了原始比例和图像内容。

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

与Messenger的区别是：

微信具有更宽松的切割比阈值。21:9的比例没有被削减，这将照顾到更多的画面比例。除超长、超宽图片外，全图信息可以微信显示，缩放完全。

微博私信、微博缩略图规则与微信完全相同；电报几乎是一样的，但“方形”设置更大一些。

所以设置多少宽度和高度阈值取决于我们的应用正在使用的环境和我们的权衡，我们是否希望更多的图像频繁或偶尔出现，我们是否希望在屏幕上显示更多的图像，我们是否希望在用户快速扫描时检索和定位它们，或者我们是否希望缩略图显示更具体的信息。

如果我们希望尽可能整齐地显示一堆图像，而不是像上面两种策略那样水平显示，那么简化一个维度可能会更好。

知乎Live的缩略图策略中，水平和垂直图片只设置宽度阈值，微信和Messenger没有设置高度阈值。高度根据比例阈值动态变化，比例大于3:2的垂直图像将被裁剪。如果比例超过1:2，水平图像将被裁剪。

从显示效果来看，设置统一的宽度可以使图像无论横向还是纵向都整齐地显示在屏幕上。

缺点是显示的图片大小按垂直图片方水平图片排序，对水平图片不友好。垂直画面占据了较大的屏幕面积，不利于多幅画面的快速概览，但不能降低宽度阈值，因为它会与水平画面的关联显示变小。

如果您发现用户更有可能发布垂直图像，不经常发布，并且需要快速滚动以找到图像的用途，那么这可能是您的解决方案。

对于某些产品，缩略图宽度不是一个固定值，而是与相对位置的距离，甚至是相对位置的百分比，这使得显示足够灵活，可以利用不同设备上不同的屏幕尺寸。

同时，通常根据相对位置的宽度设置最大值。如果超过最大值，则不会放大，以免iPad等设备显示过大：

同样的道理，如果用户发送了一个小尺寸的贴纸，不适合我们的宽度和高度，我们是否应该将贴纸拉伸到那个尺寸？因此，对于小于我们设置的宽度和高度阈值的图像，我们也应该决定它们不应该缩放。

以上都是图片要做相应的切割，也有不想切割的，原模具要保留原来的比例。

在早期版本的微博Web版中，设置了超长、超宽图片的最长时间限制，然后插入等比例的内容，并填充周围的空间，这样无论发送的图片长宽比多大，都能显示出全尺寸，但可能缩略图根本无法获得有效信息，完全失去了“缩略图”的功能。

一些应用，如iMessage、Facebook Messenger、知乎Live，倾向于将多次发送的图片组合在一起，以解决用户在发送一系列消息后，在屏幕上快速浏览和查找图片的便利性问题

iMessage的合并似乎是为了减少消息之间的空间，缩略图的规则与发送单张图片的规则相同，但在边缘上是圆角的。

另一方面，Facebook Messenger和知乎Live都有一个常见的九宫格模式(在微信朋友圈更常见)。当一个正方形的角的两条边不与其他图片相连时，它们就有Raduis。不同之处在于，Messenger中有一张额外的图片是直接指向发送者的。在知乎Live上，发送者和观看者都靠左。Messenger符合直觉，而知乎Live则从多个角度照顾图片的统一顺序。毕竟，有些人可能会在s形的视觉路径上浏览图片，这会导致理解顺序的偏差。

一个小小的缩略图有这么多的考虑因素，如何设计缩略图，还是要看产品的实际需求和使用场景。