Анализ изображений на странице

Почему картинки — первое, что стоит проверить в скорости

На обычной странице изображения занимают больше половины веса, а иногда и девять десятых. При этом они почти всегда тяжелее, чем нужно: фотография с телефона уходит на сайт в исходном виде, баннер шириной 3000 пикселей показывается в блоке шириной 600, логотип лежит в PNG вместо WebP. Посетитель на мобильном интернете ждёт лишние секунды, а поиск отмечает медленную загрузку и показатель LCP — обычно самым большим элементом на экране оказывается как раз картинка.

Этот разбор собирает все картинки страницы и показывает каждую с цифрами: сколько весит, в каком формате, какие у неё реальные размеры и какие заданы в разметке. По итогам видно, что именно тянет страницу вниз и сколько килобайт вернётся после правок.

Что проверяется

• Вес и формат. Размер файла и тип: JPEG, PNG, GIF, WebP, AVIF, SVG. Для старых форматов считаем запас — перевод в WebP обычно экономит около трети веса у фотографий и половину у PNG.
• Размеры против показанных. Если картинка 2400 пикселей шириной выводится в блоке 600, браузер качает лишние мегабайты и сам уменьшает её. Такие случаи помечаем отдельно.
• Атрибут alt. Его отсутствие — это и потерянный трафик из поиска по картинкам, и проблема доступности. Пустой alt при этом нормален: так помечают оформительские картинки.
• Размеры в разметке. Без width и height браузер не знает, сколько места занять, и содержимое прыгает при загрузке. Это прямо портит показатель CLS.
• Ленивая загрузка. Сколько картинок с loading="lazy" и не стоит ли он на самой первой картинке — для верхней картинки ленивая загрузка только вредит.
• Битые файлы. Картинки, которые отвечают ошибкой или не отвечают совсем: на странице они выглядят как пустые рамки.
• Кэширование. На сколько браузер сохраняет картинку у себя. Если срок короткий, повторные заходы качают всё заново.

Как исправлять найденное

• Пережать тяжёлые файлы. Начните с самых больших — обычно три-четыре картинки дают основную часть веса. Переводите фотографии в WebP: конвертер работает прямо в браузере, картинки никуда не загружаются.
• Уменьшить до нужных размеров. Картинку, которая показывается в блоке 600 пикселей, достаточно сохранить шириной 1200 — с запасом на экраны с удвоенной плотностью. Всё, что больше, — лишний вес.
• Подставить srcset. Один и тот же файл не обязан быть одинаковым для телефона и монитора: srcset и sizes позволяют отдать телефону вариант поменьше.
• Проставить width и height. Даже если размеры задаются стилями, атрибуты в разметке убирают скачки при загрузке.
• Написать alt. Коротко и по делу: что изображено, без перечисления ключей. Для оформительских картинок оставьте alt пустым.
• Включить ленивую загрузку. Для всего, что ниже первого экрана. А первой картинке, наоборот, можно дать fetchpriority="high".

Чего разбор не покажет

Мы читаем код страницы, как его отдаёт сервер, поэтому в выборку попадают только картинки из разметки: теги img и источники внутри picture. Фоновые изображения из стилей и картинки, которые подставляет скрипт уже в браузере, сюда не войдут — для них смотрите панель разработчика. Проверяется одна страница за раз; чтобы охватить сайт целиком, пройдите по типовым страницам: главная, карточка товара, статья, раздел каталога.

Общий вес страницы вместе со стилями и скриптами покажет размер и скорость HTML, а готовность к мобильному поиску — проверка мобильной вёрстки.