短视频时代不可忽视的幕后功臣居然是它！

时间 2021-08-12

标签 html segmentfault 浏览器网站搜索引擎 url spa 设计视频 htm 栏目 HTML 繁體版

原文原文链接

当咱们在超市购物时，若是有第一次购买的商品，咱们每每会在同类商品中选择包装更好看的那一款。这是由于从图片中得到的第一印象，影响了咱们的潜意识，进而影响了咱们的购买决定。在互联网上，制做精良、信息丰富的缩略图也会更容易引发你们的兴趣，就像商品包装同样。html

这对于用户而言，缩略图能够看做是一个“预告片”，能够帮助用户预览内容，更快更方便地找到本身想看的东西。那要如何制做缩略图要呢？咱们从了解缩略图开始讲起。segmentfault

什么是缩略图？

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

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

为何要使用缩略图？

与原始图像相比，缩略图的最大优势是减少了文件大小。若是网站的图像和视频内容优先经过缩略图的形式显示，网站的加载时间也会明显加快。用户能够经过缩略图来决定要查看哪些内容，而后经过点击缩略图去加载实际的原始图像或内容。这样既节省了流量，也加强了用户体验。网站

缩略图的小巧精致让网站设计者能够在不增长页面加载时间的状况下，当即为访问者提供大量的内容。其余优点还包括：搜索引擎

节省空间：在一样面积的网页中，缩略图能够呈现出更多不一样内容的概述。
用户友好性：图像的巨大优点是能够很是直观地捕获信息；经过缩略图，用户能够快速浏览并找到本身想要的内容。
交互性：经过点击缩略图增长用户与网站的互动。

网站的缩略图一般由搜索引擎、图像编辑程序及图像管理程序自动生成。对于移动端，缩略图的做用尤其突出。url

何时使用缩略图？

缩略图在互联网上的任何地方均可以找到。例如视频网站，或一些图片搜索网站。电商网站还会使用缩略图在店铺页面上同时展现大量的商品。若是咱们点击了某个商品，则会跳到新窗口并显示原始图像，以及产品的详细信息。spa

视频网站中的缩略图设计

视频网站上使用的缩略图必须在几秒钟内吸引观众的注意力并激励他们点击视频。视频网站上的观看次数很重要，所以缩略图起着重要做用。对于观看视频的用户来讲，有吸引力的预览图片是得到点击次数、观看次数和增长订阅的最佳方式。视频

Google 图片搜索中的缩略图htm

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

在线商店中的缩略图

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

如何设计缩略图？

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

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

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

视频缩略图始终遵循相同的结构。预览图像清晰简单，并为观看者提供了有关视频的信息。图片来源：

另外，使用的缩略图要注意避免出现版权问题。同时为了防止被他人盗用，咱们也能够在合适的位置添加水印，注明该图像的做者，或添加独特的 Logo。

又拍云图片处理

若是不会使用做图软件，有没有什么办法快速制做有水印又独特的缩略图呢？能够来试试又拍云图片处理功能，支持缩小、放大、裁剪、图片水印、文字水印、锐化、高斯模糊等 40+ 功能。同时还支持建立缩略图版本，能够搭配做图参数混合使用。