GoogleSearch如何预呈现图片？

Question

我注意到在google上进行搜索时我没有看到过的东西。它涉及图像。

正如您所看到的，在加载图片时，Google会显示一个空白容器，其中包含图片尺寸，背景颜色与每张图片的平均颜色相对应。

现在看起来像这样，包含链接元素的内联样式包括bg color。

<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的其余部分同时加载，因为该样式称为“阻止”（在处理和应用样式之前无法呈现页面）。但是，图像不会阻塞（加载时间比单个样式要长得多），因此在下载所有图像之前会显示页面。在完全下载（并显示在页面上）的图像之间的空间中，颜色显示为占位符。当客户下载图像时，它会被放置在适当的空间中。

请记住，这只是一个明智的猜测，但除非谷歌工程师出现，否则你不可能得到100％准确的答案，但我认为它不太可能与此相差甚远。

以下是chrome中网络面板的屏幕截图。您可以在红色中看到将导致页面更改的呈现请求/响应，并且在处理完初始样式和HTML之后加载所有正在加载的图像。黑线表示从加载页面到下载图像时的间隙。