[{"data":1,"prerenderedAt":29},["ShallowReactive",2],{"$f0Xwau_4TqXF9I5_O5IHGJRE0XiTy2DTWX0EiDWWjpLk":3},{"slug":4,"title":5,"description":6,"date":7,"created_at":8,"updated_at":8,"h1":5,"content":9,"views":10,"next_articles":11},"bitye-izobrazheniya","Битые изображения на сайте","Битые изображения: как найти 404 у img и CSS-фонов, исправить src, CDN и регистр путей, а также не путать доступность картинок с их оптимизацией.","2026-08-08","2026-09-07","\u003Cp>Битое изображение — файл, который браузер не смог загрузить: чаще всего \u003Ccode>img\u003C\u002Fcode> с 404, но иногда CSS-фон, SVG-иконка или ответ CDN с 403. Проблема заметна посетителю и может ухудшить первый экран. Она не равна отсутствующему alt и не лечится автоматической конвертацией в WebP.\u003C\u002Fp>\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Симптом\u003C\u002Fth>\u003Cth>Что проверить\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>404 у изображения\u003C\u002Ftd>\u003Ctd>Путь, имя файла и регистр букв на сервере\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>403 от CDN\u003C\u002Ftd>\u003Ctd>Права доступа, hotlink-защиту и origin\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Файл есть только локально\u003C\u002Ftd>\u003Ctd>Публикацию файлов в сборке или медиабиблиотеке\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Пустой баннер\u003C\u002Ftd>\u003Ctd>CSS background-image и ответ его URL\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2>Где искать причину\u003C\u002Fh2>\u003Cp>Откройте Network в DevTools, отфильтруйте Img и найдите ответы, отличные от 200 или 304. Краулер нужен для масштаба: он покажет, на каких страницах повторяется конкретный \u003Ccode>src\u003C\u002Fcode>. После переезда особенно часто ломаются абсолютные пути, домен CDN и расширения с разным регистром: \u003Ccode>Banner.JPG\u003C\u002Fcode> и \u003Ccode>banner.jpg\u003C\u002Fcode> на Linux — разные файлы.\u003C\u002Fp>\n\u003Cpre>\u003Ccode><!-- старый путь после смены CDN -->\n<img src=\"https:\u002F\u002Fold-cdn.example\u002Fpic.jpg\" alt=\"Товар\">\n<!-- новый доступный путь -->\n<img src=\"https:\u002F\u002Fcdn.example.ru\u002Fcatalog\u002Fpic.jpg\" alt=\"Товар\">\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Верните файл, замените ссылку на существующий ресурс или удалите ненужный декоративный блок. Затем убедитесь, что страница не подгружает старый HTML из кэша. WebP и AVIF полезны для веса, но не компенсируют 404; lazy loading лишь откладывает запрос. Проверяйте список ресурсов через \u003Ca href=\"\u002Ftools\u002Flinks\">проверку ссылок\u003C\u002Fa>, а повторный обход — в \u003Ca href=\"\u002Fcheck\u002Ffree\">бесплатной проверке\u003C\u002Fa>.\u003C\u002Fp>\n\u003Csection class=\"blog-faq\">\u003Ch2>Вопросы и ответы\u003C\u002Fh2>\u003Cdetails>\u003Csummary>Битая картинка напрямую снижает позиции?\u003C\u002Fsummary>\u003Cp>Не стоит считать её отдельным универсальным штрафом. Однако пустая карточка, сломанный первый экран и лишние неудачные запросы ухудшают опыт посетителя. Исправление возвращает доступность контента, а фактический эффект зависит от роли страницы и изображения.\u003C\u002Fp>\u003C\u002Fdetails>\u003Cdetails>\u003Csummary>Нужно ли искать CSS-фоны отдельно?\u003C\u002Fsummary>\u003Cp>Да, CSS background-image не попадает в обычный список тегов img. Такие изображения часто используют в баннерах и промо-блоках. Проверяйте сетевые запросы и исходный CSS, особенно после смены домена статики или темы.\u003C\u002Fp>\u003C\u002Fdetails>\u003Cdetails>\u003Csummary>Поможет ли WebP, если JPEG отдаёт 404?\u003C\u002Fsummary>\u003Cp>Нет, сначала должен существовать доступный файл и корректный URL в HTML или CSS. WebP — формат оптимизации, а не запасной маршрут. Используйте picture или fallback только после проверки ответов сервера на всех вариантах.\u003C\u002Fp>\u003C\u002Fdetails>\u003Cdetails>\u003Csummary>Почему изображение работает у редактора, но не у посетителя?\u003C\u002Fsummary>\u003Cp>Браузер редактора мог сохранить файл в кэше, иметь доступ к закрытому origin или открывать локальную версию. Проверьте страницу в инкогнито и статус запроса без авторизации. Так быстрее видно ошибку прав, CDN или незагруженного файла.\u003C\u002Fp>\u003C\u002Fdetails>\u003C\u002Fsection>",0,[12,16,19,22,26],{"slug":13,"title":14,"date":15,"views":10},"bitye-ssylki-kak-najti-i-ispravit","Битые ссылки: как найти и исправить","2026-08-15",{"slug":17,"title":18,"date":7,"views":10},"bitye-css-i-js","Битые CSS и JS",{"slug":20,"title":21,"date":15,"views":10},"socseti-i-svyaz","Соцсети и способы связи на сайте",{"slug":23,"title":24,"date":25,"views":10},"robot-view-glazami-robota","Сайт глазами робота","2026-08-09",{"slug":27,"title":28,"date":25,"views":10},"favicon-i-ikonki","Favicon и иконки сайта",1789381425056]