Битое изображение — файл, который браузер не смог загрузить: чаще всего img с 404, но иногда CSS-фон, SVG-иконка или ответ CDN с 403. Проблема заметна посетителю и может ухудшить первый экран. Она не равна отсутствующему alt и не лечится автоматической конвертацией в WebP.
| Симптом | Что проверить |
|---|---|
| 404 у изображения | Путь, имя файла и регистр букв на сервере |
| 403 от CDN | Права доступа, hotlink-защиту и origin |
| Файл есть только локально | Публикацию файлов в сборке или медиабиблиотеке |
| Пустой баннер | CSS background-image и ответ его URL |
Где искать причину
Откройте Network в DevTools, отфильтруйте Img и найдите ответы, отличные от 200 или 304. Краулер нужен для масштаба: он покажет, на каких страницах повторяется конкретный src. После переезда особенно часто ломаются абсолютные пути, домен CDN и расширения с разным регистром: Banner.JPG и banner.jpg на Linux — разные файлы.
<!-- старый путь после смены CDN -->
<img src="https://old-cdn.example/pic.jpg" alt="Товар">
<!-- новый доступный путь -->
<img src="https://cdn.example.ru/catalog/pic.jpg" alt="Товар">Верните файл, замените ссылку на существующий ресурс или удалите ненужный декоративный блок. Затем убедитесь, что страница не подгружает старый HTML из кэша. WebP и AVIF полезны для веса, но не компенсируют 404; lazy loading лишь откладывает запрос. Проверяйте список ресурсов через проверку ссылок, а повторный обход — в бесплатной проверке.
Вопросы и ответы
Битая картинка напрямую снижает позиции?
Не стоит считать её отдельным универсальным штрафом. Однако пустая карточка, сломанный первый экран и лишние неудачные запросы ухудшают опыт посетителя. Исправление возвращает доступность контента, а фактический эффект зависит от роли страницы и изображения.
Нужно ли искать CSS-фоны отдельно?
Да, CSS background-image не попадает в обычный список тегов img. Такие изображения часто используют в баннерах и промо-блоках. Проверяйте сетевые запросы и исходный CSS, особенно после смены домена статики или темы.
Поможет ли WebP, если JPEG отдаёт 404?
Нет, сначала должен существовать доступный файл и корректный URL в HTML или CSS. WebP — формат оптимизации, а не запасной маршрут. Используйте picture или fallback только после проверки ответов сервера на всех вариантах.
Почему изображение работает у редактора, но не у посетителя?
Браузер редактора мог сохранить файл в кэше, иметь доступ к закрытому origin или открывать локальную версию. Проверьте страницу в инкогнито и статус запроса без авторизации. Так быстрее видно ошибку прав, CDN или незагруженного файла.