Контент и сервер

Не загружаются картинки на сайте

Проверяем адрес файла, ответ сервера, HTTPS, кеш, CDN и код вывода изображения. Исправляем подтверждённую причину и тестируем страницы на компьютере и телефоне.

Диагностика

Где прерывается
загрузка изображения

Сначала воспроизводим ошибку и смотрим сетевой запрос браузера. Это отделяет отсутствующий файл от запрета сервера, ошибки разметки или сбоя внешнего хранилища.

01

Адрес и файл

Сверяем src и srcset, относительные пути, регистр букв, расширение и фактическое расположение файла после переноса.

02

Ответ сервера

Проверяем коды 200, 403 и 404, перенаправления, MIME-тип, права доступа и правила защиты от внешних запросов.

03

HTTPS и политика

Ищем HTTP-ресурсы на защищённой странице, ограничения Content Security Policy и блокировки браузера.

04

Формат

Сверяем содержимое с расширением и заголовком Content-Type. При необходимости готовим совместимый резервный вариант.

05

Кеш и CDN

Проверяем устаревшую копию, неверный домен раздачи, параметры оптимизатора и доступность исходного хранилища.

06

Код страницы

Тестируем lazy loading, picture, размеры, JavaScript-подстановку и адаптивные варианты для разных экранов.

Проверка реального запроса

Разделяем загрузку файла и показ изображения

Пришлите страницу и адрес пропавшего фото. Уточните, меняется ли результат после входа в аккаунт или поворота телефона. Проверяем файл, который браузер выбрал для текущего экрана, а не только исходник из административной панели.

01

Адаптивный вариант

Сравниваем выбранный ресурс с вариантами в picture и srcset. Один размер может отсутствовать после обработки, хотя оригинал открывается. Исправляем генерацию или адрес конкретного варианта и проверяем другие размеры на типовых страницах.

02

Файл без изображения

Смотрим содержимое ответа вместе со статусом. Сервер может вернуть страницу входа или заглушку вместо фотографии. Ответ 200 в таком случае не подтверждает загрузку картинки; проверяем тип содержимого и возможность декодирования файла.

03

Видимость блока

Если ресурс загружен, проверяем размеры элемента, перекрывающий слой и CSS-фон. Для отложенной загрузки воспроизводим прокрутку и открытие скрытой вкладки. Замена файла не устранит нулевую высоту или ошибку скрипта показа.

04

Копии в кеше

Сверяем исходник и ответ CDN после изменения. Проверяем, сохранилась ли старая версия по тому же адресу. Очистку выполняем для подтверждённого ресурса; перед массовой заменой сохраняем исходники и список ссылок на них.

Приёмка исправления

Проверяем изображения в контексте страницы

Проблемы отображения на телефоне рассматриваем в разделе мобильной версии. Размер и порядок загрузки файлов проверяем при ускорении сайта.

Какие картинки включаем в выборку?

Обложку, карточку товара, галерею и изображение внутри текста, если они есть на сайте. Проверяем новые и старые файлы, разные форматы и выбранные браузером размеры. Открываем страницу без авторизации и после прокрутки.

Можно восстановить удалённый оригинал?

Сначала ищем резервную копию или сохранённый исходник у владельца. Миниатюра может отличаться по разрешению и кадрированию. Отдельно согласуем замену, если нужного файла нет; исправление ссылки само по себе не возвращает утраченное фото.

Что передаём после работы?

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

Результат

Изображения доступны без случайных пропусков

Файлы отвечают

Основные и адаптивные варианты возвращаются по правильным публичным адресам.

Браузер не блокирует

HTTPS, CSP и тип содержимого согласованы с кодом страницы.

Страница остаётся быстрой

Исправление не сводится к загрузке чрезмерно тяжёлых оригиналов вместо оптимизированных файлов.

Порядок работ

От одного сломанного фото до проверки шаблона

Для начала достаточно URL страницы и примера пропавшего изображения. Если проблема появилась после обновления, переноса или подключения CDN, полезно указать дату и выполненное изменение.

01

Воспроизводим

Открываем страницу без авторизации и кеша, на узком и широком экране.

02

Находим слой ошибки

Определяем, отсутствует ли файл, запрещён ли запрос или неверно работает шаблон.

03

Исправляем точечно

Меняем путь, конфигурацию, права либо вывод изображения с сохранением резервной копии.

04

Проверяем выборку

Тестируем типовые страницы, карточки, мобильные варианты, кеш и консоль браузера.

MDN о смешанном содержимом объясняет, почему браузер может заблокировать HTTP-изображение внутри HTTPS-страницы. Это один из сценариев проверки, а не универсальная причина.

Границы работ

Что зависит от владельца внешнего сервиса

Если изображения хранятся в закрытом облаке, маркетплейсе, CDN или стороннем виджете, для исправления могут понадобиться доступы и документация поставщика. Мы не отключаем защиту целиком ради одного файла и не заменяем оригиналы без резервной копии. Когда исходники утрачены, техническое восстановление адреса не вернёт содержимое — потребуются сами файлы или архив сайта.

Вопросы

Перед диагностикой

Почему картинки видны мне, но не посетителям?

У вас могла сохраниться локальная копия. Проверяем страницу без кеша и авторизации, затем публичный ответ сервера.

Нужно загружать все фото заново?

Нет, если файлы сохранились. Часто достаточно вернуть корректные пути, права или правила выдачи.

Почему проблема возникает только на телефоне?

Мобильный шаблон может запрашивать другой srcset, использовать отдельную отложенную загрузку или скрывать блок неверным CSS.

Как проверяется результат?

Тестируем типовые страницы, форматы, мобильные размеры, кеш, сетевые ответы и ошибки консоли.

Первый шаг

Пришлите страницу с пропавшими картинками

Укажите URL, устройство и момент появления ошибки. Если один файл открывается отдельно, приложите и его адрес.