Проверка формата изображений

Что делает проверка

1. Один раз читает HTML страницы (до 1,5 МБ) и берёт до 20 изображений из <img> (с srcset и распространёнными атрибутами отложенной загрузки), <picture> и og:image.
2. Запрашивает каждое изображение дважды: с Accept: image/avif,image/webp,…, как его отправляет современный браузер, и с Accept: */*, как клиент, которому не нужно ничего особенного.
3. Читает первые байты каждого ответа, чтобы определить настоящий формат, что бы ни говорили имя файла или Content-Type, и считает байты.
4. Показывает заголовок Vary и статус кэша, который указал CDN, и проходит до 3 перенаправлений, заново проверяя каждый целевой адрес.
5. Для <picture> с <source> в AVIF или WebP современный запрос идёт к этому source, а второй — к <img>: здесь формат выбирает браузер, а не сервер.

Как читать результаты

AVIF или WebP

Браузер, который поддерживает эти форматы, получил один из них. Размер рядом — это то, что скачал этот браузер; размер в колонке «Другие браузеры» — то, что получает браузер без поддержки AVIF и WebP.

Только исходный формат

Изображение пришло в JPEG, PNG или GIF даже браузеру, который запрашивал AVIF и WebP: сайт его не конвертирует.

Один и тот же файл для всех браузеров

Оба запроса получили один и тот же формат. Так бывает у сайта без выбора формата и у сайта, который всем отдаёт файлы WebP. Сравнивать нечего, поэтому экономия не показывается.

Без Vary: Accept

Ответ меняется в зависимости от заголовка Accept, но не сообщает об этом через Vary: Accept, и общим кэшам разрешено его хранить. Тогда прокси между сервером и посетителем может отдать файл AVIF или WebP браузеру, который его не запрашивал.

Экономия

В итог входят только изображения, оба ответа на которые прочитаны полностью и пришли в разных форматах. Размер, известный только из Content-Length, показывается, но не суммируется: цифра — это измерение, а не оценка.

Ограничение запросов или блокировка

Если сайт отвечает 429, 403, проверкой на бота или маленькой страницей 503, которую отправляют ограничители запросов, проверка перестаёт отправлять ему запросы и отмечает оставшиеся изображения как непроверенные. Попробуйте ещё раз через несколько минут.

Как сервер выбирает формат

Браузер перечисляет в заголовке Accept форматы изображений, которые умеет показывать. Сервер или CDN, конвертирующий изображения, читает его и отвечает AVIF, WebP или оригиналом с того же URL. Затем он должен отправить Vary: Accept, чтобы кэши хранили по копии на каждый формат.

Другой способ — в HTML: элемент <picture> перечисляет файлы <source> в AVIF и WebP, и браузер берёт первый поддерживаемый. Работают оба способа, и проверка следует тому, который использует страница.

AVIF или WebP: что меньше и когда

Ограничения и что мы отправляем

• До 20 изображений не более чем на 5 серверах на страницу, до 5 МБ на изображение, 20 секунд на проверку.
• 3 проверки в минуту и 20 в день с одного адреса. Готовая проверка используется повторно 10 минут, а один сайт проверяется не чаще 6 раз за 10 минут, кто бы ни запрашивал.
• Запросы уходят с нашего сервера в Турции по IPv4, с User-Agent, который заканчивается на cdn.com.tr-image-check/1.0 и ссылается на эту страницу. CDN может отвечать нам из другого места, чем вашим посетителям, некоторые сайты блокируют автоматических клиентов, а сайт, доступный только по IPv6, проверить нельзя.
• Запрашиваются только публичные адреса на портах 80 и 443; частные и внутренние сети отклоняются. Изображения не сохраняются: возвращаются только форматы, размеры и несколько заголовков.
• Изображения, которые JavaScript добавляет после загрузки страницы, и фоновые изображения CSS отсутствуют в HTML, поэтому проверка их не видит.