Тег <img src=""> с пустым атрибутом заставляет браузер отправить повторный запрос к самой странице — это и есть суть проблемы, которую разработчики называют super empty img. Вместо ожидаемой картинки браузер пытается загрузить HTML-документ как изображение, получает ошибку и отображает характерную «битую» иконку. Для посетителя это выглядит как сломанный сайт, а для сервера — как лишняя нагрузка.
Проблема встречается на сайтах любого масштаба: от визиток на конструкторах до крупных магазинов с динамической подгрузкой контента. Ниже разберём, откуда берутся пустые изображения, как их найти и какие способы исправления безопасны для вёрстки и SEO.
Что происходит при пустом src в теге img
Когда браузер встречает <img src="">, он трактует пустую строку как относительный URL, указывающий на текущий документ. Возникает дублирующий запрос: сервер второй раз отдаёт HTML-страницу, браузер пытается декодировать её как картинку и завершает попытку ошибкой декодирования.
Последствия выходят за рамки визуального дефекта. Лишний запрос увеличивает время рендеринга, засоряет логи сервера и может искажать статистику посещений в системах аналитики, которые считают просмотры по обращениям к странице.
⚠️ Внимание: поведение при пустом src исторически различалось между браузерами. Не полагайтесь на то, что «у меня в Chrome всё нормально» — проверяйте страницу минимум в двух браузерах и на мобильном устройстве.
Типичные причины появления пустых изображений
Чаще всего пустой src — не ручная ошибка верстальщика, а следствие работы шаблонов и скриптов. Типичные источники:
- 🔧 Шаблонизатор CMS подставил пустое значение, потому что у записи не задано изображение, а проверка на пустоту в шаблоне отсутствует.
- 🐌 Ленивая загрузка (lazy load) реализована через пустой
srcиdata-src, но JavaScript не отработал — например, заблокирован или завершился с ошибкой. - 🧩 Плагин или модуль генерирует галерею и при отсутствии файла выводит тег с пустым атрибутом вместо заглушки.
- ✏️ Ручное редактирование контента через визуальный редактор, где картинку удалили, а сам тег остался.
- 📦 Импорт товаров или записей из таблицы, где часть строк не содержала ссылок на изображения.
Отдельный случай — намеренная вставка <img src=""> как «заглушки» в старых техниках вёрстки. Такой подход считается устаревшим и вредным: корректная заглушка должна иметь реальный адрес прозрачного пикселя или реализовываться средствами CSS.
Как найти пустые изображения на сайте
Быстрее всего проблему видно в инструментах разработчика браузера. Откройте вкладку Network, перезагрузите страницу и поищите запросы, которые вернули HTML вместо графического формата, либо завершились ошибкой декодирования. Во вкладке Console при этом обычно появляются сообщения о неудачной загрузке ресурса.
Для массовой проверки удобнее поиск по исходному коду. Во вкладке Elements или через просмотр HTML найдите вхождения src="" и src=''. Если сайт большой, используйте краулер (например, программы для технического SEO-аудита) с фильтром по изображениям без адреса — так вы получите полный список страниц с дефектом.
☑️ Поиск пустых img на странице
Способы исправления
Выбор метода зависит от источника проблемы. Сравним основные подходы:
| Причина | Способ исправления | Риск |
|---|---|---|
| Шаблон без проверки | Добавить условие: выводить тег только при наличии URL | Минимальный |
| Сломанный lazy load | Использовать нативный loading="lazy" с реальным src | Низкий |
| Нет изображения у записи | Подставить файл-заглушку (placeholder) | Низкий |
| Остаток тега после удаления картинки | Удалить пустой тег из контента | Минимальный |
| Нужна пустая область под будущий контент | Использовать <div> с CSS вместо img | Низкий |
Самый надёжный вариант для шаблонов — условный вывод. Вместо безусловной печати тега проверяйте переменную перед выводом. Пример логики:
if ( imageUrl ) {
echo '<img src="' + imageUrl + '" alt="Описание">';
}
Для ленивой загрузки современные браузеры поддерживают атрибут loading="lazy" — он не требует ни пустого src, ни JavaScript-библиотек. Картинка получает настоящий адрес сразу, а браузер сам решает, когда её загружать.
Если изображение декоративное и не несёт смысла, замените тег img на CSS-фон у блока. Это уберёт лишний запрос и упростит управление стилями.
Влияние на SEO и доступность
Поисковые роботы при обходе страницы тоже пытаются обработать изображения. Пустой src приводит к тому, что робот получает в ответ HTML-документ, что фиксируется как ошибка ресурса. Единичные случаи вряд ли заметно повлияют на ранжирование, но массовый дефект ухудшает техническое качество сайта в целом и расходует краулинговый бюджет.
Не забудьте про доступность. Экранные дикторы при встрече с img без корректного alt могут зачитывать адрес страницы или выдавать бессмысленную информацию. Если изображение строго декоративное, стандарт допускает пустой alt="" — но сам src при этом обязан вести на реальный файл.
⚠️ Внимание: не удаляйте атрибутsrcполностью как «способ исправления». Тег<img>безsrcтоже невалиден и вызывает ошибку загрузки. Корректные варианты — реальный URL либо удаление самого тега.
Техническая деталь
data URI как заглушка:Если нужен валидный src без внешнего файла, допустимо использовать data URI с прозрачным пикселем формата GIF или PNG. Такой src не вызывает сетевого запроса и проходит валидацию. Однако злоупотреблять приёмом не стоит: семантически правильнее не выводить тег вовсе, если изображения нет.
Профилактика: как не допустить повторения
Разовое исправление не защищает от появления новых пустых изображений при следующем импорте или обновлении шаблона. Встроите контроль в рабочий процесс: добавьте проверку в шаблоны, настройте регулярный технический аудит и тестируйте страницы с отключённым JavaScript — так сразу видно, какие элементы зависят от скриптов.
Полезно включить проверку валидности HTML в процесс публикации. Валидатор разметки подсвечивает пустые src как ошибку, что позволяет отловить дефект до выкладки на боевой сервер.
Пустой src у img — это не косметика, а реальный лишний запрос к серверу и ошибка валидации. Исправляется условным выводом тега, нативным loading="lazy" и файлами-заглушками.
Частые вопросы
Чем пустой src отличается от отсутствующего src?
Пустой src="" трактуется как ссылка на текущую страницу и вызывает повторный запрос документа. Полностью отсутствующий атрибут делает тег невалидным, но поведение браузера при этом менее предсказуемо. Оба варианта — ошибка, исправлять нужно оба.
Можно ли оставить img с пустым src как placeholder?
Нет, это устаревшая и вредная практика. Используйте файл-заглушку с реальным адресом, data URI или CSS-фон у блочного элемента.
Влияет ли одна пустая картинка на позиции сайта?
Единичный случай вряд ли даст заметный эффект. Проблема становится значимой при массовом характере: ошибки ресурсов, лишние запросы и невалидная разметка суммарно ухудшают техническое состояние сайта.
Как проверить весь сайт сразу, а не по одной странице?
Используйте программы для технического SEO-аудита (краулеры): они обходят все страницы и формируют отчёт по изображениям с пустым или битым адресом. Для небольшого сайта достаточно поиска по исходному коду шаблонов.
Lazy load через data-src — это плохо?
Сам по себе подход рабочий, но он ломается при ошибках JavaScript и у пользователей с отключёнными скриптами. Предпочтительнее нативный атрибут loading="lazy", который поддерживается современными браузерами без дополнительного кода.