Как GoogleSearch предварительно создает изображения?

Question

Я заметил что-то, чего не видел до начала поиска в google. Это касается изображений.

Как вы можете видеть, в то время как изображения загружаются, Google отображает пустой контейнер с размерами изображения и цвет фона, который соответствует среднему цвету каждого изображения.

Теперь это выглядит так, содержащий элемент ссылки имеет встроенные стили, включая цвет bg.

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

Но как они его получают? Как клиент узнает средний цвет изображения перед его загрузкой?

Answer 1

У Google есть представление о том, что представляет собой изображение, прежде чем они его покажут - Возможно, даже копия. Чтобы даже отображаться в результатах поиска, изображение должно быть в виде базы данных вместе с ключевыми словами и информацией об изображении, чтобы люди могли его искать. Когда искатель Googlebot обнаруживает изображение, он должен зарегистрировать свои знания об изображении на серверах Google. Вероятно, не слишком сложно для сервера (или, возможно, бота) проанализировать изображение и получить средний цвет, и сохранить эти данные вместе с другой соответствующей информацией об изображении.

Итак, если Google знает средний цвет изображения, можно отправить этот цвет в качестве фона div с остальной частью HTML. Это означает, что цвет будет загружаться одновременно с остальной частью CSS/HTML, поскольку стиль известен как «Блокировка» (страница не может быть отображена до тех пор, пока стиль не будет обработан и не применен). Изображения, однако, не блокируют (и занимают намного больше времени, чем один стиль), поэтому страница отображается до загрузки всех изображений. В этом пространстве между полностью загруженным изображением (и отображаемым на странице) цвет отображается как заполнитель. Когда изображение загружается клиентом, оно помещается в соответствующее пространство.

Имейте в виду, что это только обоснованное предположение, но если инженер Google не появится, вы вряд ли получите 100% -ный точный ответ, но я думаю, что вряд ли это будет далеко от этого.

Вот скриншот сетевой панели в хроме. Вы можете увидеть красные запросы/ответы рендеринга, которые вызовут изменение на странице, а в синем будут загружены все изображения, загруженные после обработки начальных стилей и HTML. Черная линия иллюстрирует пробел, с которого была загружена страница, и когда все изображения были загружены.