GoogleSearch如何预呈现图片？

Question

我注意到在谷歌搜索时我没有看到过的东西.它涉及图像.

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

现在看起来像这样,包含链接元素的内联样式包括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的其余部分同时加载,因为该样式称为"阻止"(在处理和应用样式之前无法呈现页面).但是,图像不会阻塞(加载时间比单个样式要长得多),因此在下载所有图像之前会显示页面.在完全下载(并显示在页面上)的图像之间的空间中,颜色显示为占位符.当客户端下载图像时,它被放入适当的空间.

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

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