短視頻時代不可忽視的幕後功臣居然是它！

時間 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+ 功能。同時還支持建立縮略圖版本，能夠搭配做圖參數混合使用。