短视频时代不可忽视的幕后功臣竟然是它！前端缩略图webp程序员互联网

当我们在超市购物时，如果有第一次购买的商品，我们往往会在同类商品中选择包装更好看的那一款。这是因为从图片中获得的第一印象，影响了我们的潜意识，进而影响了我们的购买决定。在互联网上，制作精良、信息丰富的缩略图也会更容易引起大家的兴趣，就像商品包装一样。
这对于用户而言，缩略图可以看作是一个“预告片”，可以帮助用户预览内容，更快更方便地找到自己想看的东西。那要如何制作缩略图要呢？我们从了解缩略图开始讲起。

文章图片

什么是缩略图？缩略图（简称 “thumb”）是用作占位符的原始压缩预览图像，其中通常会包含指向完整大小的图片的超链接。缩略图通常用于在 Web 浏览器中更加迅速地载入图片较多的网页。因其小巧，加载速度非常快，故用于快速浏览。相当于图片视频文件的预览及目录的作用。根据平台的不同，缩略图分别有对应的尺寸，且尺寸并不统一：

百度搜索中的图片：图片比例最好尽量符合121:75，有利于百度抓取。
B 站视频封面：B 站投稿视频封面的尺寸是不小于 1146 x 717 像素。
Google 的图片搜索：如果需要为 Google 的图片搜索创建桌面版缩略图，建议大小为 177 像素。也可以使用较小的缩略图。
YouTube：YouTube 上的桌面缩略图在起始页上的大小为 210 x 118 像素。属于常见的 16:9 图像格式。

为什么要使用缩略图？与原始图像相比，缩略图的最大优点是减小了文件大小。如果网站的图像和视频内容优先通过缩略图的形式显示，网站的加载时间也会明显加快。用户可以通过缩略图来决定要查看哪些内容，然后通过点击缩略图去加载实际的原始图像或内容。这样既节省了流量，也增强了用户体验。

文章图片

缩略图的小巧精致让网站设计者可以在不增加页面加载时间的情况下，立即为访问者提供大量的内容。其他优势还包括：

节省空间：在同样面积的网页中，缩略图可以呈现出更多不同内容的概述。
用户友好性：图像的巨大优势是可以非常直观地捕获信息；通过缩略图，用户可以快速浏览并找到自己想要的内容。
交互性：通过点击缩略图增加用户与网站的互动。

网站的缩略图通常由搜索引擎、图像编辑程序及图像管理程序自动生成。对于移动端，缩略图的作用尤为突出。
什么时候使用缩略图？缩略图在互联网上的任何地方都可以找到。例如视频网站，或一些图片搜索网站。电商网站还会使用缩略图在店铺页面上同时展示大量的商品。如果我们点击了某个商品，则会跳到新窗口并显示原始图像，以及产品的详细信息。
视频网站中的缩略图
视频网站上使用的缩略图必须在几秒钟内吸引观众的注意力并激励他们点击视频。视频网站上的观看次数很重要，因此缩略图起着重要作用。对于观看视频的用户来说，有吸引力的预览图片是获得点击次数、观看次数和增加订阅的最佳方式。

文章图片

Google 图片搜索中的缩略图
谷歌在图像搜索中使用的是缩略图，而不是全尺寸的图像。这意味着用户可以同时看到大量不同的图像。通过单击其中一个缩略图，可以请求到更多信息。如果有需求，用户将被直接转发到源网页。

文章图片

在线商店中的缩略图
在线商店中，缩略图用于在一个页面上显示多个产品，而不会降低加载速度。类别概览也经常以缩略图的形式显示。再次单击感兴趣的产品缩略图，打开产品的原始图像，从而可以查看有关产品的更多信息。

文章图片

如何设计缩略图？吸引用户点击视频或图像的频率通常取决于缩略图的设计。根据自身网站或产品的不同，创建缩略图时应注意不同的情况。与图片相比，视频的缩略图通常更复杂，一部分原因是由于视频传输的内容更多。而缩略图应与内容相匹配并能诱惑查看者点击。例如：

应使用和内容主题相匹配且有意义的图片和颜色
人脸是与观看者建立联系的一种简单方式
使用动作镜头来吸引注意力
如果内容不明显，可以为图片添加标题或关键字
使用 Logo 等增加内容识别价值（品牌推广）

以下是精心设计的缩略图示例：

文章图片

视频缩略图始终遵循相同的结构。预览图像清晰简单，并为观看者提供了有关视频的信息。图片来源：
另外，使用的缩略图要注意避免出现版权问题。同时为了防止被他人盗用，我们也可以在合适的位置添加水印，注明该图像的作者，或添加独特的 Logo。
又拍云图片处理如果不会使用作图软件，有没有什么办法快速制作有水印又独特的缩略图呢？可以来试试又拍云图片处理功能，支持缩小、放大、裁剪、图片水印、文字水印、锐化、高斯模糊等 40+ 功能。同时还支持创建缩略图版本，可以搭配作图参数混合使用。

文章图片

又拍云图片处理作图方式简单便捷，通过“图片 URL + 间隔标识符 + 参数或缩略图版本”在线处理，实时显示。另外，作为业界首家支持 WebP、动态 WebP 的厂商，解决多项 WebP 处理难题，图片瘦身平均可节省大小 70%。
推荐阅读来试下不一样的图片加载方式
【短视频时代不可忽视的幕后功臣竟然是它！】MySQL 中存储时间的最佳实践