当我们在超市购物时,如果有第一次购买的商品,我们往往会在同类商品中选择包装更好看的那一款。这是因为从图片中获得的第一印象,影响了我们的潜意识,进而影响了我们的购买决定。在互联网上,制作精良、信息丰富的缩略图也会更容易引起大家的兴趣,就像商品包装一样。
这对于用户而言,缩略图可以看作是一个“预告片”,可以帮助用户预览内容,更快更方便地找到自己想看的东西。那要如何制作缩略图要呢?我们从了解缩略图开始讲起。
缩略图(简称 “thumb”)是用作占位符的原始压缩预览图像,其中通常会包含指向完整大小的图片的超链接。缩略图通常用于在 Web 浏览器中更加迅速地载入图片较多的网页。因其小巧,加载速度非常快,故用于快速浏览。相当于图片视频文件的预览及目录的作用。根据平台的不同,缩略图分别有对应的尺寸,且尺寸并不统一:
与原始图像相比,缩略图的最大优点是减小了文件大小。如果网站的图像和视频内容优先通过缩略图的形式显示,网站的加载时间也会明显加快。用户可以通过缩略图来决定要查看哪些内容,然后通过点击缩略图去加载实际的原始图像或内容。这样既节省了流量,也增强了用户体验。
缩略图的小巧精致让网站设计者可以在不增加页面加载时间的情况下,立即为访问者提供大量的内容。其他优势还包括:
网站的缩略图通常由搜索引擎、图像编辑程序及图像管理程序自动生成。对于移动端,缩略图的作用尤为突出。
缩略图在互联网上的任何地方都可以找到。例如视频网站,或一些图片搜索网站。电商网站还会使用缩略图在店铺页面上同时展示大量的商品。如果我们点击了某个商品,则会跳到新窗口并显示原始图像,以及产品的详细信息。
视频网站中的缩略图
视频网站上使用的缩略图必须在几秒钟内吸引观众的注意力并激励他们点击视频。视频网站上的观看次数很重要,因此缩略图起着重要作用。对于观看视频的用户来说,有吸引力的预览图片是获得点击次数、观看次数和增加订阅的最佳方式。
Google 图片搜索中的缩略图
谷歌在图像搜索中使用的是缩略图,而不是全尺寸的图像。这意味着用户可以同时看到大量不同的图像。通过单击其中一个缩略图,可以请求到更多信息。如果有需求,用户将被直接转发到源网页。
在线商店中的缩略图
在线商店中,缩略图用于在一个页面上显示多个产品,而不会降低加载速度。类别概览也经常以缩略图的形式显示。再次单击感兴趣的产品缩略图,打开产品的原始图像,从而可以查看有关产品的更多信息。
吸引用户点击视频或图像的频率通常取决于缩略图的设计。根据自身网站或产品的不同,创建缩略图时应注意不同的情况。与图片相比,视频的缩略图通常更复杂,一部分原因是由于视频传输的内容更多。而缩略图应与内容相匹配并能诱惑查看者点击。例如:
以下是精心设计的缩略图示例:
视频缩略图始终遵循相同的结构。预览图像清晰简单,并为观看者提供了有关视频的信息。图片来源:
另外,使用的缩略图要注意避免出现版权问题。同时为了防止被他人盗用,我们也可以在合适的位置添加水印,注明该图像的作者,或添加独特的 Logo。
如果不会使用作图软件,有没有什么办法快速制作有水印又独特的缩略图呢?可以来试试又拍云图片处理功能,支持缩小、放大、裁剪、图片水印、文字水印、锐化、高斯模糊等 40+ 功能。同时还支持创建缩略图版本,可以搭配作图参数混合使用。
又拍云图片处理作图方式简单便捷,通过“图片 URL + 间隔标识符 + 参数或缩略图版本”在线处理,实时显示。另外,作为业界首家支持 WebP、动态 WebP 的厂商,解决多项 WebP 处理难题,图片瘦身平均可节省大小 70%。
为啥要用这个,要从做海报说起,那是一个风雨交加的夜晚。。。 好了不扯淡了,我...
简介: 2021年6月9日,亚太内容分发大会暨CDN峰会在北京举行,阿里云边缘云网络...
在之前某一个前端技术群里,有一个群友说他面试的时候遇到了一个问题,就是面试...
Dreamweaver怎么插入视频,这是一款网页设计的软件,我们现在在网上点击一个文字...
需求说明 因为项目中章节配置的时候有小数点,1,1.1,1.2,1.11的标题,这个时候...
绘制标准圆弧 在开始之前,我们优化一下我们的作图环境。灵感来自于上节课的纹理...
引入Http模块 默认你已经安装了 Node.js Node当中内置了Http模块; 可以使用 var...
简介: 如今,已经有评测机构给出了40条标准来对Serverless的服务能力进行评估,...
传统方法正方形用固定的形式写 直接长=宽写固定的值如下 .box{width: 200px;hei...
近段时间在学习Dreamweaver做网站,正在学表格这一章呢,结果发现表格的边框设置...