GoogleSearch如何預先呈現圖片？

Question

我注意到了在Google上搜索時沒有看到的內容。它涉及圖像。

正如你可以看到，載入圖像時，谷歌顯示與圖像尺寸的坯件的容器中，並且對應於每一個畫面的平均顏色的背景顏色。

現在看起來像這樣，包含link元素的內聯樣式包括bg顏色。

<a style="height: 56px; margin: 0px; width: 59px; left: 0px; background: rgb(109, 128, 70);"></a> 

但他們怎麼得到它？在加載之前，客戶如何知道圖片的平均顏色？

Answer 1

谷歌在將圖像展示給你之前確實知道圖像是什麼 - 甚至可能是副本。要想在搜索結果中顯示圖像，必須使用某種形式的數據庫以及有關圖像的關鍵字和信息，以便人們搜索它。當Googlebot抓取工具發現圖片時，必須將其對Google服務器的圖片知識進行註冊。服務器（或者機器人）可能不太難分析圖像並獲得平均顏色，並將這些數據與其他相關圖像信息一起存儲。

因此，如果Google知道平均圖像顏色，就可以將該顏色作爲div的背景與HTML的其餘部分一起發送。這意味着該顏色將與CSS/HTML的其餘部分同時加載，因爲該樣式被稱爲「阻止」（在處理和應用樣式之前，該頁面無法呈現）。然而，圖像沒有被阻擋（並且加載的時間比單個樣式要長得多），因此在下載所有圖像之前顯示該頁面。在完全下載（並顯示在頁面上）圖像之間的空間中，顏色顯示爲佔位符。當客戶端下載圖像時，將其放置在適當的空間中。

請記住，這只是一個明智的猜測，但除非Google工程師出現，否則您不可能得到100％準確的答案，但我認爲這不太可能與此相距甚遠。

這裏的鍍鉻中網面板的屏幕截圖。您可以用紅色看到會導致頁面變化的呈現請求/響應，並且在處理完初始樣式和HTML之後，所有圖像都會以藍色顯示。黑線表示從加載頁面到圖像全部下載之間的差距。