После запуска сайта изображения — один из самых уязвимых элементов. Текст обычно хранится в базе данных и не теряется при публикации, а изображения зависят одновременно от расположения файлов, написания ссылок, настроек сервера и внешних платформ. Любое изменение в этой цепочке может привести к пустым блокам или «битым» картинкам. Ниже разберём常见 ситуации, причины и порядок проверки.
Изображение совсем не отображается — начните с консоли браузера
Откройте проблемную страницу, нажмите F12, чтобы вызвать инструменты разработчика, перейдите на вкладку Network (Сеть), обновите страницу и посмотрите код состояния запроса изображения. Возможны несколько вариантов:
- 404 — файла по этому адресу действительно нет: скорее всего, ошибка в пути или изображение не загружено.
- 403 — файл существует, но сервер запрещает доступ. Часто причина в правах на директорию или правилах защиты от хотлинка.
- Предупреждение о смешанном содержимом — страница работает по HTTPS, а изображение подключается по http, и браузер его блокирует.
- Запрос отменён или превышено время ожидания — файл слишком большой или внешний сервер отвечает медленно.
Код состояния помогает быстро сузить круг проблем до определённой категории — это эффективнее, чем повторно загружать файлы наугад.
После переноса изображения перестали работать: путь изменился, а ссылка осталась прежней
При редизайне старого сайта или смене сервера изображения часто перемещают в новую структуру каталогов, но ссылки в текстах статей остаются старыми. Это проявляется так: главная и страницы списков выглядят нормально, а при переходе в старую статью все изображения оказываются битыми.
Рекомендуемый порядок действий:
- Выгрузите все статьи из админпанели и извлеките ссылки на изображения из текстов — получится список старых адресов.
- Сопоставьте старые ссылки с фактическими путями к файлам на новом сервере и найдите несовпадения.
- Где возможно, сохраните прежнюю структуру каталогов. Где нельзя — настройте на сервере перенаправление со старых адресов изображений на новые.
- Перенаправление — лишь временная мера. Ссылки в текстах лучше постепенно заменять на новые, чтобы при следующем переносе они снова не оборвались.
Если изображений много, этот шаг стоит автоматизировать скриптом или инструментом массовой замены: вручную править каждую статью — значит рисковать что-то пропустить.
Регистр букв и китайские имена файлов мешают части изображений открываться
Есть особенно коварная проблема: одно и то же изображение видно на компьютере редактора, но на сервере выдаёт 404. Частая причина — несовпадение регистра в имени файла. Windows не различает регистр, а Linux-сервер различает: Banner.jpg и banner.jpg для него два разных файла.
Другой случай — китайские символы или пробелы в имени файла. Некоторые серверы и CDN обрабатывают такие символы по-разному, и ссылка легко искажается при копировании, вставке или перекодировании.
Советуем ещё до загрузки придерживаться единых правил именования:
- Используйте только строчные латинские буквы, цифры и дефис.
- Заменяйте пробелы дефисом, не смешивайте с подчёркиванием.
- Отражайте в имени содержание — так команде проще искать, например
service-consulting-01.jpg. - Храните изображения одного раздела в одной папке, не сваливайте всё в корень.
Внешние изображения перестают работать: чужая картинка — не ваша
Некоторые контент-менеджеры для экономии времени копируют адрес изображения с чужого сайта и вставляют в свою статью. У таких внешних изображений есть несколько рисков: если владелец удалит или заменит картинку, на вашей странице появится битое изображение; если он включит защиту от хотлинка, ваш сайт не сможет загрузить файл; если его сервер нестабилен, пострадает скорость загрузки страницы.
Проверить просто: откройте адрес изображения отдельно в браузере и посмотрите, доступен ли он. Если изображение важно для контента, лучше скачать его и загрузить на свой сервер или в файловое хранилище, а затем заменить ссылку. При использовании внешних изображений также помните об авторских правах: не стоит брать материалы неизвестного происхождения.
Страница HTTPS загружает изображение по http
После включения HTTPS на сайте, если ссылка на изображение по-прежнему начинается с http, браузер расценит его как небезопасное содержимое и заблокирует — на странице появится битое изображение или предупреждение о безопасности. Такое часто встречается со старыми загруженными картинками, текстами, скопированными со старого сайта, а также изображениями в кодах сторонней аналитики или рекламы.
Как проверить: в консоли инструментов разработчика поищите «Mixed Content» или просто просмотрите адреса изображений в исходном коде страницы. Решение — заменить адрес изображения на https или скачать картинку на свой домен с HTTPS. Если изображение с внешней платформы, сначала убедитесь, что она поддерживает https.
Изображение открывается, но выглядит неправильно: размеры, форматы и сжатие
Ссылка в порядке, код состояния 200, но изображение деформировано, размыто или видно лишь частично. Обычно это не связано со ссылкой, а кроется в самом файле:
- Фактический размер изображения не совпадает с местом на странице — его растягивают или обрезают.
- Формат не поддерживается браузером: некоторые特殊 форматы не отображаются в части браузеров.
- Изображение пережато, детали потеряны.
- Файл слишком большой, загружается медленно, и пользователь видит пустое место.
Такие проблемы решаются до загрузки: готовьте изображение под фактический размер на странице, не уменьшайте большую картинку кодом; для прозрачного фона используйте PNG, для фотографий — JPG или WebP; следите за разумным размером файла, а для списков и детальных страниц можно готовить разные версии.
Ежедневный чек-лист по ссылкам на изображения
Запуск сайта — не финиш. Ссылки на изображения перестают работать из-за обновления контента, изменений на сервере и внешних платформ. Рекомендуем включить в регулярную проверку следующие пункты:
- Перед публикацией новой статьи откройте каждое изображение на странице предпросмотра и убедитесь, что оно отображается.
- После редизайна или переноса выборочно проверьте изображения в старых статьях, особенно в опубликованных давно.
- Периодически проверяйте страницы с внешними изображениями — действуют ли ещё внешние адреса.
- Проверяйте, соответствуют ли имена файлов и структура каталогов принятым в команде правилам.
- При резервном копировании изображений сохраняйте и ссылки из текстов статей, чтобы не получилось, что файлы есть, а к какой статье они относятся — неизвестно.
Проблемы со ссылками на изображения — чаще не техническая сложность, а вопрос привычек поддержки. Закрепить правила именования, процесс загрузки и точки проверки гораздо проще, чем потом чинить каждую картинку по отдельности.
