Зачем проверять изображения
Картинки — обычно самая тяжёлая часть страницы. Из-за них страница грузится медленно, текст «прыгает» при загрузке, а без alt картинки не попадают в поиск по картинкам Яндекса и Google.
Инструмент находит все изображения на странице, скачивает их и проверяет вес, формат, реальный размер, alt, атрибуты width и height и ленивую загрузку. По каждой картинке видно, что именно с ней не так, а весь список можно выгрузить в CSV.
Что проверяется
- altЕсть ли атрибут, не пустой ли он у картинки-ссылки, нет ли в нём имени файла или «фото 1», одинаковых и слишком длинных описаний.
- Вес и форматКартинки тяжелее 200 и 500 КБ, JPG и PNG, которые можно перевести в WebP или AVIF, файлы намного крупнее, чем показываются на странице.
- Скорость и вёрсткаwidth и height против сдвига вёрстки (CLS), loading="lazy" у картинок ниже первого экрана и его отсутствие у первой картинки, ленивая загрузка скриптом через data-src.
Проверяются картинки в тегах <img>, в том числе внутри <picture> и встроенные в HTML (data:). Фоновые картинки из CSS не проверяются.
Как исправить найденное
- Добавьте alt каждой содержательной картинке: 5–15 слов о том, что на ней изображено. У декоративных оставьте пустой alt="".
- Уменьшите картинки до размера, в котором они показываются, и сожмите. Для разных экранов используйте srcset.
- Переведите JPG и PNG в WebP или AVIF — вручную в Squoosh, плагином CMS или на стороне сервера.
- Пропишите width и height в теге <img>, чтобы браузер заранее оставил место под картинку.
- Поставьте loading="lazy" картинкам ниже первого экрана, а первой картинке — fetchpriority="high".
Вопросы и ответы
Какой вес картинки считается нормальным?
Для картинок в тексте и карточек товара — 50–150 КБ, для большой картинки на весь экран — до 200–300 КБ. Всё, что тяжелее 500 КБ, почти всегда можно сжать без видимой потери качества.
Нужен ли alt, если на картинке нет ничего важного?
Атрибут нужен всегда, но у декоративных картинок он может быть пустым: alt="". Тогда программы чтения с экрана пропустят картинку. Отсутствие атрибута — ошибка, пустой атрибут — нормально.
Почему width и height влияют на SEO?
Без них браузер не знает размер картинки до загрузки, и содержимое страницы сдвигается. Это ухудшает метрику CLS из Core Web Vitals, которую Google учитывает при ранжировании. Общую скорость страницы покажет проверка скорости сайта.
Видят ли поисковики картинки с ленивой загрузкой?
Встроенный loading="lazy" поисковики понимают. Если же настоящий адрес лежит в data-src и подставляется скриптом, робот может увидеть только заглушку.
Это бесплатно?
Да, без регистрации — до 30 проверок в день, до 80 картинок на странице.