Во-первых, я не согласен с двумя предыдущими ответами - ни один из них не затрагивает вопрос.
Однопиксельное изображение решает внутреннюю проблему для приложений веб-аналитики (например, Google Analytics) при работе по протоколу HTTP - как передавать данные (веб-метрики) от клиента на сервер .
Самый простой из методов, описанных протоколом, самый простой (по крайней мере, самый простой метод, который включает тело запроса) - это запрос GET . Согласно этому методу протокола, клиенты инициируют запросы к серверам на ресурсы; серверы обрабатывают эти запросы и возвращают соответствующие ответы.
Для веб-аналитического приложения, такого как GA, эта однонаправленная схема - плохая новость, потому что, похоже, она не позволяет серверу получать данные от клиента по запросу - опять же, все серверы могут делать, это предоставлять ресурсы, а не просите их.
Так как же решить проблему получения данных от клиента обратно на сервер? В контексте HTTP есть и другие методы протокола, кроме GET (например, POST), но это ограниченный вариант по многим причинам (о чем свидетельствует его нечастое и специализированное использование, такое как отправка данных формы).
Если вы посмотрите на GET-запрос из браузера, вы увидите, что он состоит из URL-адреса запроса и заголовков запроса (например, заголовков Referer и User-Agent), последний содержит информацию о клиенте - например, тип браузера и версия, язык браузера, операционная система и т. д.
Опять же, это часть запроса, который клиент отправляет на сервер. Таким образом, идея, которая мотивирует однопиксельный gif, заключается в том, что клиент отправляет данные веб-метрик на сервер, заключенные в заголовок запроса.
Но тогда как заставить клиента запрашивать ресурс, чтобы его можно было «обманом» заставить отправить данные метрик? И как заставить клиента отправлять фактические данные, которые хочет сервер?
Хороший пример - Google Analytics: файл ga.js (большой файл, загрузка которого в клиент запускается небольшим скриптом на веб-странице) включает несколько строк кода, которые предписывают клиенту запросить определенный ресурс у определенного server (сервер GA) и для отправки определенных данных, заключенных в заголовок запроса.
Но поскольку целью этого запроса является не фактическое получение ресурса, а отправка данных на сервер, этот ресурс должен быть как можно меньше и не должен быть виден при отображении на веб-странице - следовательно, размер 1 x 1 пиксельный прозрачный gif. Размер - это наименьший возможный размер, а формат (gif) - наименьший среди форматов изображений.
Точнее, все данные GA - каждый отдельный элемент - собираются и упаковываются в строку запроса URL-адреса запроса (все после символа "?"). Но для того, чтобы эти данные отправлялись от клиента (где они создаются) на сервер GA (где они регистрируются и агрегируются), должен быть HTTP-запрос, поэтому загружаемый ga.js (скрипт аналитики Google, если он не кэшируются клиентом в результате функции, вызываемой при загрузке страницы) указывает клиенту собрать все аналитические данные - например, файлы cookie, адресную строку, заголовки запросов и т. д. - объединить их в одну строку и добавьте его как строку запроса к URL-адресу ( * http: //www.google-analytics.com/__utm.gif* ?), и он станет URL-адресом запроса .
Это легко доказать с помощью любого веб-браузера, который позволяет просматривать HTTP-запрос для веб-страницы, отображаемой в вашем браузере (например, Safari Web Inspector , Firefox / Chrome Firebug и т. Д.).
Например, я ввел действительный URL-адрес корпоративной домашней страницы в адресную строку своего браузера, которая вернула эту домашнюю страницу и отобразила ее в моем браузере (я мог бы выбрать любой веб-сайт / страницу, которая использует одно из основных аналитических приложений, GA , Omniture, Coremetrics и т. Д.)
Я использовал браузер Safari, поэтому я щелкнул « Разработать» в строке меню, а затем « Показать веб-инспектор» . В верхней строке Web Inspector щелкните " Ресурсы" , найдите и щелкните ресурс utm.gif в списке ресурсов, показанном в левом столбце, затем щелкните вкладку " Заголовки" . Это покажет вам что-то вроде этого:
Request URL:http:
utmwv=1&utmn=1520570865&
utmcs=UTF-8&
utmsr=1280x800&
utmsc=24-bit&
utmul=enus&
utmje=1&
utmfl=10.3%20r181&
Request Method:GET
Status Code:200 OK
Request Headers
User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/533.21.1
(KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
Response Headers
Cache-Control:private, no-cache, no-cache=Set-Cookie, proxy-revalidate
Content-Length:35
Content-Type:image/gif
Date:Wed, 06 Jul 2011 21:31:28 GMT
Ключевые моменты, на которые следует обратить внимание:
На самом деле запрос был запросом для utm.gif, о чем свидетельствует первая строка выше: * URL-адрес запроса: http: //www.google-analytics.com/__utm.gif*.
Параметры Google Analytics четко видны в строке запроса, добавленной к URL-адресу запроса : например,
utmsr - это имя переменной GA для обозначения разрешения экрана клиента, для меня это значение 1280x800; utmfl - это имя переменной для версии flash, которая имеет значение 10,3 и т. д.
Заголовок ответа называется
Content-Type (отправленный сервер обратно клиент) также подтверждает , что ресурс , запрашиваемый и возвращаемый был 1x1 пиксели GIF:
Content-Type: изображение / GIF
Эта общая схема передачи данных между клиентом и сервером существует всегда; вполне может быть лучший способ сделать это, но это единственный известный мне способ (который удовлетворяет ограничениям, налагаемым размещенной аналитической службой).