Битое изображение — это когда тег на странице присутствует, а файл браузер не получает: чаще всего это img с кодом 404, но бывает 403 от CDN, пустой CSS-фон или SVG-иконка, которую сервер вернул с ошибкой. На первый взгляд мелочь, но разрывы загрузки бьют по скорости страницы, индексации изображений и конверсиям уже на первом экране. В этой статье — как обнаружить битые картинки своими руками и в бесплатной проверке, почему они вредят SEO и чем принципиально отличаются от простого отсутствия alt.
Почему битые картинки портят SEO и UX
Визуальный урон виден сразу: пустой баннер, «дыра» вместо карточки товара, сломанный первый экран. Посетитель считывает это до чтения текста, а поисковик — через поведенческие сигналы.
- Поведенческие метрики. Пустая картинка повышает процент отказов и снижает время на странице. Слабый опыт читается как признак слабого контента.
- Лишние запросы. Каждый неудачный
fetch— это отдельный round-trip к серверу. Браузер тратит время и трафик на то, что заведомо не вернёт полезного содержимого. - Индексация изображений. Google Images индексирует только доступные файлы с кодом 200. Битые картинки просто не попадают в картинный поиск и не приносят дополнительный трафик.
- Ошибки прав и CDN. Иногда файл отдаёт 403 из-за hotlink-защиты или неверных прав на origin — это тоже битый ресурс, хотя сам файл на диске есть.
Важно не путать две разные проблемы. Битое изображение — это недоступный файл (404/403), а отсутствующий alt — это вопрос семантики и доступности. Первая чинится возвратом файла или заменой пути, вторая — добавлением описания. И то и другое полезно проверить, но лечатся по-разному: автоматическая конвертация в WebP не заменит отсутствующий файл.
| Симптом | Что стоит проверить в первую очередь |
|---|---|
404 у тега img |
Путь, имя файла и регистр букв на сервере |
| 403 от CDN | Права доступа, hotlink-защиту и origin |
| Файл есть только локально | Публикацию файлов в сборке или медиабиблиотеке |
| Пустой баннер | CSS background-image и ответ его URL |
На интернет-магазинах проблема обычно концентрируется на списках товаров и карточках: если фото не загрузилось, покупатель видит пустое место вместо продукта и быстрее уходит. При большом каталоге такие ошибки легко гасят органический трафик из картинного поиска по всему списку страниц одновременно, поэтому здесь краулер даёт гораздо больше информации, чем ручной осмотр нескольких разделов.
Как найти несуществующие изображения (DevTools, crawl)
Ручной способ хорош для одной страницы, краулер — для всего сайта сразу. На практике используют оба.
DevTools. Откройте вкладку Network, примените фильтр Img и посмотрите ответы, отличные от 200 или 304. Именно неуспешные коды сразу показывают проблемные ресурсы без лишнего шума.
Краулер. Он нужен для масштаба: инструмент покажет, на каких именно страницах повторяется один и тот же src. Это помогает отделить единичную опечатку от системной проблемы после переезда.
После смены домена или CDN чаще всего ломаются три вещи: абсолютные пути, домен статики и расширения с разным регистром. Например, Banner.JPG и banner.jpg на Linux — это два разных файла, и запрос к несуществующему варианту сразу вернёт 404.
<!-- старый путь после смены CDN — почти наверняка 404 -->
<img src="https://old-cdn.example/pic.jpg" alt="Товар">
<!-- новый доступный путь -->
<img src="https://cdn.example.ru/catalog/pic.jpg" alt="Товар">
По той же причине стоит отдельно проверять CSS-фоны: background-image не попадает в обычный список тегов img, поэтому в DevTools их видно только через сетевые запросы или исходный CSS. Это особенно актуально для баннеров и промо-блоков после смены темы или домена статики — подробнее о таком типе ошибок читайте в статье про битые CSS и JS.
На практике удобно пройти по короткому чек-листу: сначала открыть страницу в DevTools и собрать все ответы с кодом 404/403, затем прогнать сайт краулером и выгрузить повторяющиеся src, а после — сверить найденные пути с тем, что реально лежит в медиабиблиотеке или сборке. Так вы не упустит ни единичную опечатку, ни системную ошибку после переезда.
Влияние на скорость и индексацию изображений
Многие пытаются «залечить» проблему оптимизацией: переводят JPEG в WebP или AVIF, включают lazy loading. Это полезные практики, но они не отменяют сам 404.
- Вес страницы. Файл с кодом 404 всё равно передаётся по сети, но полезного контента в нём ноль. Оптимизированный формат экономит вес только для тех файлов, которые реально грузятся.
- Lazy loading. Отложенная загрузка лишь откладывает запрос к ресурсу, но не убирает его. Если файл недоступен, «дыра» появится чуть позже, а не исчезнет.
- Индексация в картинном поиске. Для Google Images критичен именно доступный URL с кодом 200. Даже идеально оптимизированная картинка не попадёт в рекомендации, пока её путь отдаёт ошибку.
То есть сначала должен существовать сам файл и корректный URL в HTML или CSS, и только потом работает вопрос формата. Используйте <picture> и fallback-варианты уже после того, как убедитесь в ответе сервера на всех вариантах.
Как исправить — пути, редиректы, 404 для статики
У битого изображения есть три рабочих сценария исправления: вернуть файл на место, заменить src на существующий ресурс или удалить ненужный декоративный блок. Выбор зависит от того, нужен ли этот контент вообще.
Возврат файла. Если изображение актуально, проверьте, что оно действительно опубликовано в сборке или медиабиблиотеке, а имя совпадает с запросом по регистру. Иногда проблема решается повторной загрузкой актива.
Редиректы и статусы. Для старых путей, которые переехали на новый ресурс, ставится 301-ый редирект. Если файл больше не нужен — пусть остаётся 404 (или 410), но без цепочек редиректов: статике они только замедляют обход и путают краулер.
Кэш. После правки обязательно убедитесь, что страница не подгружает старый HTML из кэша CDN или браузера. Иначе исправленный путь будет выглядеть битым ещё долго.
Отдельно стоит проверить image sitemap: если в нём указаны пути к изображениям, которые сейчас отдают 404, краулер тратит бюджет обхода на мёртвые URL. Обновите карту после замены файлов или уберите устаревшие записи — тогда картинки снова попадут в индекс картинного поиска.
Не забывайте про смежные риски: часто вместе с изображениями на сайте находят и битые ссылки: как найти и исправить, потому что причины у них одинаковые — неверный путь, переезд домена или сломанный редирект.
Как проверить в seoquest.ru (/check/free)
В Health Score битые картинки смотрятся на главной, не по всему каталогу. На остальных страницах проверка видит картинки без описания (alt), а не каждый файл с кодом 404. Каталог удобнее прогнать краулером или панелью браузера. Повторная проверка после правки главной показывает, ушла ли ошибка из балла.
Список самих ресурсов удобно смотреть через отдельную проверку ссылок, а динамику исправлений — возвращаться к бесплатной проверке и сравнивать результаты.
Часто задаваемые вопросы
Битая картинка напрямую снижает позиции в поиске?
Не стоит считать её отдельным универсальным штрафом. Однако пустая карточка, сломанный первый экран и лишние неудачные запросы ухудшают опыт посетителя, а это уже влияет на поведенческие факторы. Исправление возвращает доступность контента, а реальный эффект зависит от роли страницы и изображения.
Нужно ли искать CSS-фоны отдельно от картинок?
Да. background-image не попадает в обычный список тегов img, поэтому такие ресурсы часто упускают из виду. Они обычно используются в баннерах и промо-блоках, а их стоит проверять через сетевые запросы и исходный CSS, особенно после смены домена статики или темы сайта.
Поможет ли WebP, если JPEG отдаёт 404?
Нет. Сначала должен существовать доступный файл и корректный URL в HTML или CSS. WebP — это формат оптимизации, а не запасной маршрут. Использовать <picture> или fallback стоит только после проверки ответов сервера на всех вариантах.
Почему изображение работает у редактора, но не у посетителя?
Браузер редактора мог сохранить файл в кэше, иметь доступ к закрытому origin или открывать локальную версию. Проверьте страницу в режиме инкогнито и без авторизации — так быстрее увидеть ошибку прав, CDN или незагруженного файла.
Как связаны битые изображения и отсутствие alt ?
Это разные задачи. Битое изображение — недоступный файл с ошибкой ответа, а alt отвечает за семантику и доступность. Обе проблемы стоит проверять, но чинятся они по-разному: сначала возвращают рабочий файл, потом добавляют описание для поисковика и скринридеров. Подробнее об этом в статье про alt у изображений для SEO.
Проверьте свой сайт на битые изображения и другие ошибки — это занимает пару минут в бесплатной проверке, а результат помогает не только найти, но и отследить исправления.