Когда на сайте вместо фотографий появляются пустые места, значок битого изображения или картинка бесконечно пытается загрузиться, причина может быть как в самом сайте, так и на стороне пользователя.
Чаще всего проблема связана с неправильным адресом файла, отсутствующим изображением, ошибкой сервера, запретом доступа, настройками браузера или ошибкой в коде страницы.
Самый простой способ начать диагностику — определить масштаб проблемы:
- картинки не загружаются у всех — проверяйте сайт, сервер и файлы;
- картинки не загружаются только у вас — проверьте браузер, расширения, кэш и сеть;
- не работают отдельные изображения — проверьте их URL и наличие файлов;
- картинка открывается по прямой ссылке, но не видна на странице — ищите проблему в HTML, CSS или JavaScript.
Разобраться с большинством таких неисправностей можно достаточно быстро. Главное — не менять настройки наугад, а последовательно определить, на каком этапе возникает ошибка.
Быстрая диагностика: что проверить в первую очередь
Перед подробной проверкой выполните несколько простых действий.
- Откройте страницу в другом браузере.
- Проверьте её в режиме инкогнито.
- Откройте сайт на другом устройстве.
- Если возможно, подключитесь к другой сети.
- Откройте проблемную картинку непосредственно по её URL.
Последняя проверка особенно важна.
Если картинка не открывается по прямому адресу, проблема, скорее всего, связана с файлом, URL, доступом или сервером.
Если картинка открывается отдельно, но отсутствует на странице, сам файл, вероятно, доступен. Тогда нужно проверять HTML, адаптивную разметку, CSS или JavaScript.
Как определить причину по коду ответа
Для технической диагностики полезно посмотреть HTTP-статус изображения.
| Статус | Что означает | Где искать проблему |
| 200 | Сервер успешно ответил | HTML, CSS, JavaScript, отображение |
| 301/302 | Произошло перенаправление | URL и настройки переадресации |
| 403 | Доступ запрещён | Права, сервер, защита |
| 404 | Файл не найден | URL или наличие файла |
| 500 | Внутренняя ошибка сервера | Сервер, CMS, код |
| 502 | Некорректный ответ от другого сервера | Сервер, прокси, CDN |
| 503 | Сервис временно недоступен | Сервер или хостинг |
Если вы не знаете, где посмотреть этот код, ниже есть пошаговая инструкция для DevTools.
Почему не загружаются картинки на сайте
У проблемы может быть несколько причин. На практике большинство случаев связано с URL изображения, самим файлом, доступом к нему, сервером, браузером или кодом страницы.
При этом важно различать две ситуации.
Изображение не загрузилось. Браузер не смог получить файл. Причиной могут быть 404, 403, ошибка сервера, неправильный URL или блокировка запроса.
Изображение загрузилось, но его не видно. В этом случае файл уже получен браузером, но страница не показывает его. Причину следует искать в HTML, CSS, JavaScript или адаптивной разметке.
Это различие существенно сокращает время диагностики.
Неправильный URL изображения
Одна из самых распространённых причин, почему не загружаются картинки на сайте, — неправильный адрес файла.
Например, страница пытается загрузить:
/images/photo.jpg
а фактически изображение находится по адресу:
/img/photo.jpg.
Для браузера это два разных ресурса. Если по указанному адресу файла нет, сервер вернёт ошибку.
Такая проблема часто появляется после изменения структуры сайта, переноса файлов, обновления шаблона или миграции на другую CMS.
Что проверить в адресе картинки
Откройте URL проблемного изображения напрямую в браузере и проверьте:
- имя файла;
- расширение;
- путь к каталогу;
- домен;
- протокол http или https;
- наличие лишних символов;
- регистр букв.
Даже небольшая ошибка в адресе может сделать изображение недоступным.
Почему важен регистр букв
На многих серверах имена файлов чувствительны к регистру.
photo.jpg и Photo.jpg могут восприниматься как разные файлы.
Поэтому изображение способно нормально работать в одной среде и перестать загружаться после размещения на сервере.
Ошибка 404: картинка не найдена
Код 404 Not Found означает, что сервер не нашёл ресурс по указанному адресу.
Для изображения наиболее вероятны следующие причины:
- файл удалён;
- файл перемещён;
- изменено имя;
- изменена структура каталогов;
- в HTML осталась старая ссылка;
- URL содержит ошибку.
Например, фотография раньше находилась по адресу:
/uploads/2025/photo.jpg
а после изменения структуры сайта стала находиться здесь:
/uploads/2026/photo.jpg.
Если ссылка на странице не изменилась, браузер продолжит обращаться к старому адресу и получит 404.
В этом случае нужно либо вернуть файл по прежнему адресу, либо исправить ссылку.
Если 404 появляется сразу у большого количества изображений, не следует исправлять их по одному. Нужно искать общую причину, например неправильное формирование URL в шаблоне сайта.
Ошибка 403: доступ к картинке запрещён
Код 403 Forbidden означает, что сервер получил запрос, но не разрешил доступ к ресурсу.
Если страница открывается, а отдельные изображения возвращают 403, проблема может быть связана с настройками доступа.
Возможные причины:
- неправильные права на файл;
- ограничения для каталога;
- правило веб-сервера;
- защита от хотлинка;
- ограничение по IP;
- система безопасности;
- настройки CDN.
Владельцу сайта следует проверить права доступа к каталогу с изображениями и правила веб-сервера.
Если изображения загружаются через CDN, нужно проверить и его настройки.
Ошибки 500, 502 и 503
Коды 5xx указывают на проблемы при обработке запроса сервером.
500 Internal Server Error — внутренняя ошибка сервера.
502 Bad Gateway — промежуточный сервер или прокси не получил корректный ответ от другого сервера.
503 Service Unavailable — сервис временно не может обработать запрос.
По одному коду невозможно точно определить причину. Если проблема сохраняется, необходимо проверить серверные журналы, состояние хостинга, прокси и CDN.
Особенно показателен массовый сбой: если одновременно перестали загружаться изображения, стили, скрипты или другие ресурсы, причина, вероятнее всего, находится на серверной стороне.
Почему картинки не отображаются в браузере
Если изображения не загружаются только на вашем компьютере, не стоит сразу менять настройки сайта.
Сначала проверьте браузер.
Откройте сайт в другом браузере
Это простой способ отделить проблему сайта от локальной проблемы браузера.
Если в другом браузере картинки отображаются, причина может быть связана с настройками первого браузера, расширениями или сохранёнными данными сайта.
Проверьте режим инкогнито
Откройте проблемную страницу в приватном окне.
Если картинки появились, это может указывать на конфликт расширения или проблему с локальными данными.
Отключите расширения
Особое внимание стоит обратить на:
- блокировщики рекламы;
- блокировщики трекеров;
- расширения для фильтрации содержимого;
- средства безопасности;
- пользовательские скрипты.
Иногда такое расширение блокирует не рекламу, а сам запрос изображения или домен, с которого оно загружается.
Если после отключения расширений картинки появились, включайте их по одному, чтобы найти причину.
Проверьте кэш браузера
Браузер сохраняет локальные копии некоторых ресурсов сайта. Обычно это ускоряет загрузку страниц, но устаревшие данные иногда мешают корректному отображению обновлённых ресурсов.
Для проверки выполните принудительную перезагрузку страницы.
Если это не помогло, можно очистить данные конкретного сайта и повторить проверку.
Почему картинка открывается отдельно, но не показывается на странице
Это один из наиболее полезных диагностических признаков.
Допустим, URL:
https://site.ru/images/photo.jpg
открывается в браузере и показывает фотографию.
Но на странице фотография отсутствует.
В таком случае сам файл, скорее всего, доступен. Значит, проблема может быть в том, как страница обращается к изображению.
Например, в HTML может находиться:
<img src=»/images/photo-old.jpg»>
хотя актуальный файл расположен по другому адресу.
Проблема также может быть связана с srcset, CSS или JavaScript.
Поэтому в такой ситуации нужно проверять не предполагаемый URL, а фактический запрос, который делает браузер.
Ошибки в src и srcset
У обычного изображения адрес файла указывается в атрибуте src:
<img src=»/images/photo.jpg»>
Если путь неправильный, браузер не сможет получить файл.
Но современные сайты часто используют несколько версий одной картинки для разных размеров экрана. Для этого применяется srcset.
Например:
srcset=»photo-400.jpg 400w, photo-800.jpg 800w»
Браузер выбирает подходящий вариант в зависимости от условий отображения.
Поэтому наличие рабочего изображения в src ещё не гарантирует, что именно оно будет загружено.
Если один из адресов в srcset неправильный, проблема может проявляться только на телефоне, планшете или при определённой ширине окна.
Если картинки не загружаются только на мобильном устройстве, srcset, sizes и элемент picture стоит проверить в числе первых.
Почему картинка загружается, но её не видно
Не всякая проблема с изображением связана с его загрузкой.
Браузер может успешно получить файл, но страница скрывает его.
На отображение могут влиять CSS-правила:
- display: none;
- visibility: hidden;
- нулевая ширина или высота;
- неправильное позиционирование;
- перекрытие другим элементом;
- ошибочные адаптивные стили.
В такой ситуации сетевой запрос может завершиться кодом 200, но посетитель всё равно не увидит картинку.
Поэтому фраза «картинка не загружается» иногда означает на самом деле «картинка загружается, но не отображается».
Ошибки JavaScript
Некоторые сайты загружают изображения не напрямую из HTML, а с помощью JavaScript.
Скрипт может добавлять URL картинки после загрузки страницы или запускать механизм отложенной загрузки.
Если JavaScript работает неправильно, изображение может остаться без корректного адреса.
Причинами могут быть:
- ошибка в скрипте;
- конфликт JavaScript;
- заблокированный скрипт;
- неправильная логика загрузки;
- ошибка после обновления сайта.
Проверить такую ситуацию можно через консоль разработчика браузера.
Если одновременно с исчезновением изображений в Console появляются ошибки JavaScript, их стоит рассматривать как возможную причину проблемы.
Проблемы с lazy loading
Lazy loading, или отложенная загрузка, позволяет загружать изображения не сразу, а по мере необходимости.
Это особенно часто используется на длинных страницах с большим количеством фотографий.
Если механизм реализован неправильно, изображения могут не появляться после прокрутки.
Обратите внимание на lazy loading, если:
- изображения в верхней части страницы работают;
- картинки ниже первого экрана не появляются;
- проблема возникает после прокрутки;
- поведение страницы меняется при отключении JavaScript.
В таком случае необходимо проверить код, который отвечает за отложенную загрузку.
Почему картинки не загружаются после переноса сайта
Перенос сайта на новый сервер или домен — одна из ситуаций, после которых изображения часто перестают отображаться.
Во время миграции могли измениться:
- URL файлов;
- структура каталогов;
- домен;
- права доступа;
- настройки веб-сервера;
- расположение медиабиблиотеки;
- настройки CDN.
Например, HTML уже находится на новом сервере, а ссылки на изображения всё ещё указывают на старый домен.
Другой распространённый вариант — страницы перенесли, а сами файлы изображений забыли скопировать.
После миграции стоит проверить несколько изображений из разных разделов сайта. Если у них одинаковые ошибки, вероятно, существует общая причина.
Почему картинки не загружаются на телефоне
Если на компьютере изображения отображаются, а на телефоне нет, проблема может быть связана с адаптивной версией страницы.
Мобильное устройство может получать другой файл через:
- srcset;
- sizes;
- picture;
- JavaScript;
- lazy loading.
Например, компьютер получает изображение шириной 1200 пикселей, а смартфон — отдельную версию шириной 400 пикселей.
Если мобильный файл отсутствует или его URL сформирован неправильно, картинка не появится на телефоне, хотя десктопная версия будет работать.
Для диагностики удобно открыть сайт в режиме эмуляции мобильного устройства и посмотреть, какой именно файл запрашивается.
Как проверить, почему не загружается картинка
Если простые проверки не помогли, используйте инструменты разработчика браузера.
В Chrome они открываются клавишей F12. Затем перейдите во вкладку Network.
Этот раздел показывает сетевые запросы, которые выполняются при загрузке страницы.
Найдите запрос изображения
Откройте страницу с проблемной картинкой и обновите её.
В списке запросов найдите нужный файл. Можно воспользоваться фильтром по имени или типу ресурса.
Посмотрите HTTP-статус
Обратите внимание на код ответа.
Если стоит 404, ищите проблему в URL или наличии файла.
Если 403 — проверяйте доступ.
Если 500, 502 или 503 — исследуйте сервер.
Если стоит 200, но картинки не видно, переходите к проверке HTML, CSS, JavaScript и адаптивной разметки.
Проверьте фактический URL
Откройте сведения о запросе и посмотрите, по какому адресу браузер действительно пытался получить изображение.
Это особенно важно для srcset и адаптивной версии сайта.
URL, который кажется правильным в исходном HTML, может отличаться от того, который браузер реально запрашивает.
Проверьте Console
Если сетевой запрос выглядит нормально, откройте вкладку Console.
Здесь могут отображаться ошибки JavaScript, сообщения о заблокированных ресурсах и другие проблемы, способные влиять на отображение изображения.
Проверьте содержимое ответа
Статус 200 сам по себе не гарантирует, что сервер вернул правильную картинку.
Например, вместо изображения сервер может отдать HTML-код страницы ошибки.
Поэтому при подозрении на серверную проблему важно проверить не только статус, но и фактическое содержимое ответа.
Практический пример диагностики
Представим, что на странице не отображается фотография photo.jpg.
Сначала открываем её URL напрямую.
Файл не открывается.
Затем смотрим запрос в Network и видим 404.
Это означает, что браузер успешно обратился к серверу, но сервер не нашёл файл по указанному адресу.
Проверяем каталог и обнаруживаем, что фотографию переместили из /images/old/ в /images/new/.
Причина найдена: страница продолжает использовать старый URL.
В этом случае не нужно менять браузер, чистить кэш или переустанавливать расширения. Достаточно исправить адрес изображения или вернуть файл по прежнему пути.
Другой сценарий: Network показывает 200, а файл действительно загружен. Тогда проблема уже не в доступности изображения. Нужно проверять HTML, CSS, JavaScript или адаптивную разметку.
Именно поэтому HTTP-статус — один из самых полезных ориентиров при диагностике.
Алгоритм: что делать, если картинки не загружаются
Если проблема возникла внезапно, используйте следующий порядок.
Шаг 1. Определите масштаб проблемы.
Проверьте другой браузер, устройство и сеть.
Шаг 2. Откройте картинку напрямую.
Если она не открывается, проверяйте URL, файл, доступ и сервер.
Шаг 3. Посмотрите HTTP-статус.
404 — ищите неправильный адрес или отсутствующий файл.
403 — проверяйте доступ.
5xx — исследуйте сервер.
Шаг 4. Если статус 200, проверьте страницу.
Ищите проблемы в src, srcset, picture, CSS и JavaScript.
Шаг 5. Если проблема только на телефоне, проверьте адаптивную загрузку.
Сравните URL и запросы десктопной и мобильной версии.
Шаг 6. Если используется CDN, проверьте его настройки.
Убедитесь, что CDN получает изображения с исходного сервера и не отдаёт ошибочный или устаревший ресурс.
Такой порядок позволяет не менять всё подряд и быстрее найти настоящую причину.
Когда нужна помощь разработчика
Простые проблемы можно устранить самостоятельно: обновить страницу, проверить другой браузер, отключить конфликтующее расширение или исправить очевидный URL.
Но если причина связана с сервером, CMS, конфигурацией веб-сервера, CDN или программным кодом, потребуется доступ к технической части сайта.
Особенно это важно, если одновременно перестали загружаться сотни изображений.
При массовом сбое не стоит вручную исправлять каждую ссылку. Сначала необходимо найти общую причину.
Частые вопросы
Почему не загружаются картинки на сайте?
Наиболее распространённые причины — неправильный URL, отсутствующий файл, ошибки 403 или 404, серверные ошибки, проблемы браузера, расширений, кэша, HTML, CSS или JavaScript.
Почему картинки не отображаются на сайте, хотя файлы существуют?
Страница может обращаться к неправильному адресу, использовать ошибочный srcset, скрывать изображение через CSS или загружать его с помощью JavaScript.
Почему картинка открывается отдельно, но не показывается на странице?
Проверьте URL, указанный в HTML, фактический запрос в Network, srcset, picture, CSS и JavaScript. Сам файл при этом, скорее всего, доступен.
Почему картинки не загружаются только у меня?
Причиной могут быть настройки браузера, расширения, блокировщики, кэш или локальные проблемы с соединением. Для проверки откройте сайт в другом браузере или на другом устройстве.
Почему после переноса сайта пропали картинки?
Могли измениться пути к файлам, домен, структура каталогов, права доступа или настройки сервера. Проверьте несколько изображений и сравните их URL и HTTP-статусы.
Почему картинки не отображаются на телефоне?
Возможна проблема с адаптивной загрузкой. Проверьте srcset, sizes, picture, JavaScript и lazy loading. Если на компьютере всё работает, сравните запросы мобильной и десктопной версии.
Что означает ошибка 404 у картинки?
Сервер не нашёл изображение по указанному адресу. Проверьте URL, имя файла, расширение, регистр букв и наличие файла на сервере.
Что означает ошибка 403 у изображения?
Сервер получил запрос, но запретил доступ к файлу. Проверьте права доступа, правила веб-сервера, защиту от хотлинка и настройки CDN.
Главное
Если не загружаются картинки на сайте, не стоит сразу переустанавливать браузер, очищать весь кэш или заново загружать изображения.
Сначала определите, где находится проблема.
Если картинка не открывается по прямому URL, проверьте файл, адрес и сервер.
Если сервер возвращает 404, ищите неправильный путь или отсутствующий файл.
Если появляется 403, проверяйте права доступа и правила сервера.
Если сервер отдаёт 500, 502 или 503, исследуйте серверную часть.
Если запрос завершается кодом 200, но изображения на странице нет, переходите к HTML, srcset, CSS, JavaScript и lazy loading.
Если проблема возникает только на одном устройстве, начните с браузера, расширений, кэша и сети.
Главный принцип диагностики прост: сначала выясните, был ли файл вообще получен браузером. Если нет — ищите проблему в URL, доступе, сервере или сети. Если да, но картинки не видно — проверяйте код страницы и её отображение.
Так вместо перебора десятков возможных причин получается понятная последовательность:
найти проблемную картинку → проверить URL → посмотреть HTTP-статус → определить место сбоя → устранить конкретную причину.
Автор Александр Ларин
