Как найти и починить битые изображения

Битая картинка — это URL, по которому браузер не получил изображение: вместо фото остаётся пустое место или иконка ошибки. Пользователи замечают это быстрее, чем 404 в подвале. Для SEO это тоже важно, если вам нужны картиночная выдача, сетка товаров или превью в соцсетях через Open Graph.

Типичные места, где ошибка бьёт по бизнесу:

• Карточка товара: главное фото и миниатюры в галерее; 404 здесь ломает доверие и конверсию.
• Open Graph (og:image): если картинка для шаринга не открывается, мессенджеры и соцсети покажут пустой блок.
• Ленивые галереи: картинки подгружаются при прокрутке через data-src, а в исходном HTML стоит заглушка. Без проверки отрисованной страницы кажется, что всё в порядке.

Как ломаются

• Файл уехал или переименовали, а путь в шаблоне остался прежним.
• Кэш CDN или подписанная ссылка на файл с истёкшим сроком действия перестали отдавать картинку.
• Миниатюра WordPress не сгенерировалась, хотя оригинал на месте.
• Один из вариантов в srcset отдаёт 404, а базовый src ещё жив.
• Lazy load: атрибут data-src так и не подставился в src для робота или пользователя без прокрутки.
• Хотлинк на чужой домен, который начал отвечать 403.

Как искать

DevTools: битые запросы видны в консоли и красных строках вкладки «Сеть». Этого хватает на один шаблон.

Просмотр исходного кода часто вводит в заблуждение на ленивых галереях. Смотрите атрибуты, которыми страница реально пользуется после загрузки: src, data-src, иногда srcset.

Скан страницы с проверкой изображений: режим битых изображений в Advanced Broken Links Search. Можно отфильтровать только images, подсветить нерабочий <img> на странице и выгрузить отчёт в CSV. Мы добавили этот режим, потому что чекеры, которые смотрят только ссылки, пропускают мёртвые картинки в каталогах и рисуют ложный «зелёный» статус.

Как чинить

1. Вернуть файл на сервер или поправить src в шаблоне и CMS.
2. Пересобрать миниатюры, если оригинал есть, а нужного размера нет.
3. Перестать хотлинковать. Скопируйте ассет к себе и укажите свой URL.
4. Не маскировать 404 картинкой 1×1. Для изображений это по сути мягкая 404 (soft 404): код «успех», а контента нет.
5. Задайте width/height, чтобы вёрстка не прыгала, когда файл вернётся.
6. Перепроверьте один URL после правки: CDN мог ещё не обновить кэш.

Весь сайт

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

Битые картинки — не «мелочь рядом со ссылками». Тот же HTTP, что у мёртвых ссылок, только на элементе, на который смотрят в первую очередь.