Почему не грузятся картинки на сайте — 3 причины, и первая — регистр букв

Локально сайт как с картинки. Задеплоил, открыл — а вместо фотографий серые обломки. Вот сюрприз, который объясняет половину таких случаев: на твоём компьютере Photo.JPG и photo.jpg — один и тот же файл, а на сервере — два разных. macOS и Windows не различают регистр букв в именах файлов, Linux-сервер — различает. Картинка «терялась» из-за одной заглавной буквы. Разберём эту причину и ещё две, в порядке частоты.

Причина 1: путь или регистр не совпадают

Браузер ищет файл ровно по той строке, что написана в src. Любое расхождение — пробел, .JPG вместо .jpg, Images/ вместо images/ — и файла «нет».

Как проверить. Правый клик по месту, где должна быть картинка → «Открыть изображение в новой вкладке». Видишь 404 — файл по этому адресу не существует. Для полной картины открой DevTools → вкладка Network, обнови страницу и посмотри статус-коды у картинок: 404 — не найдено, 403 — запрещено.

Как починить. Сверь путь посимвольно с реальным именем файла. И прими правило, которое снимает проблему навсегда: все файлы — в нижнем регистре, без пробелов и кириллицы: hero-photo.jpg, а не Фото сайта (1).JPG. Это, кстати, классика жанра «локально работает, на сервере нет» — локальная файловая система прощает, серверная — нет.

Причина 2: файла просто нет на сервере

Путь верный, а картинка всё равно 404? Тогда файл не доехал до сервера. Типичные сценарии:

• Картинка лежит не в той папке. У большинства сборщиков (Vite, Next.js и др.) статика раздаётся только из специальной папки — обычно public/. Файл рядом с кодом, но вне её, в сборку не попадает.
• Файл не закоммичен: забыл добавить в git, или папка с медиа попала в .gitignore. На твоём диске файл есть, в репозитории — нет, деплой уехал без него.
• Файл добавлен после деплоя — новая версия сайта ещё не выложена.

Как проверить. Посмотри в репозитории на GitHub, есть ли файл там, где его ждёт путь. Нет в репозитории — не будет и на сервере.

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

Причина 3: картинка чужая — и чужой сервер против

Ты вставил прямую ссылку на изображение с другого сайта. Дома у тебя оно показывалось (браузер брал из кэша), а у посетителей — пусто.

Как проверить. В Network у картинки статус 403, но по прямому URL в отдельной вкладке она открывается. Это защита от хотлинка: чужой сервер видит, что запрос пришёл с твоего сайта, и отказывает — трафик-то его. Второй вариант: ссылка начинается с http://, а сайт твой на https:// — браузер молча блокирует такое смешение, ошибка видна только в консоли.

Как починить. Не ссылайся на чужие серверы. Скачай изображение (если лицензия позволяет) и положи к себе в public/ или в своё хранилище. Заодно исчезнет и проблема http:// — со своего домена всё поедет по https://.

Чек-лист на 30 секунд

1. Открой картинку по прямому URL → какой статус?
2. 404 → сверь путь и регистр; файл вообще есть в репозитории?
3. 403 → картинка чужая: перенеси к себе.
4. Открывается, но на сайте пусто → смотри консоль: там будет причина блокировки.

Почему картинка грузится, но очень долго?

Скорее всего, ты положил фото прямо с телефона — это 4–8 МБ на один кадр. Сожми до нужного размера и переведи в WebP: вес упадёт в разы без видимой потери. На заметном трафике сверху помогает CDN — сеть копий поближе к посетителю.

Что значит, когда вместо картинки показывается текст?

Это alt-текст — запасное описание, которое браузер рисует, когда файл не загрузился. Сам по себе он не ошибка, а симптом: иди по чек-листу выше и смотри статус-код.