Как найти и исправить битое изображение в WordPress

Вы, наверное, видели на своем веб-сайте значок изображения, который выглядит как разорванная картинка. Это битое изображение, и оно может негативно повлиять на ваш сайт, если вы его не замените .

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

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

Содержание:

• Что такое битое изображение?
• Обнаружение битых изображений на вашем сайте
• Как исправить проблему с неработающим изображением
  • Неверный путь к файлу
  • Перепроверьте имена файлов
  • Неверные расширения файлов
  • Используйте относительный путь
  • Убедитесь, что изображение существует
  • Проблемы с переносом
• Вывод

Что такое битое изображение?

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

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

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

Обнаружение битых изображений на вашем сайте

Самый простой способ обнаружить битые изображения на вашем сайте WordPress — использовать плагин. Одним из таких плагинов является Broken Link Checker. С помощью этого плагина вы можете сканировать внутренние и внешние ссылки вашего сайта на наличие неработающих ссылок и изображений.

После установки и активации плагина вы можете получить доступ к странице настроек плагина через Настройки >> Проверка ссылок .

Плагин Broken Link Checker сканирует ваш сайт на наличие битых ссылок. Если есть какие-либо проблемы, вы увидите их здесь или получите уведомление по электронной почте.

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

Исправление битых изображений

Существует несколько сценариев, которые могут привести к отсутствию изображений на вашем веб-сайте WordPress. В этом разделе мы обсудим причины и способы их устранения.

Неверный путь к файлу

При добавлении изображений на ваш веб-сайт WordPress создает путь к файлу, в котором указывается местоположение изображений. Веб-браузеры используют путь в атрибуте src изображения, чтобы найти изображение. Если путь к изображению указан неверно, то изображение не загрузится и не будет отображаться.

Чтобы исправить это, просто найдите сообщение или страницу со значком сломанного изображения и замените его новым изображением. Для этого войдите в свою панель управления и перейдите на страницу публикации WordPress. Затем наведите курсор на публикацию с неработающим изображением и выберите « Редактировать» .

В редакторе сообщений прокрутите до раздела с неработающим изображением, затем нажмите на него и выберите « Заменить ». Вы можете выбрать изображение из своей медиатеки или загрузить новое изображение.

После замены поврежденного изображения нажмите « Обновить », чтобы сохранить изменения.

Если вы используете классический редактор, нажмите на изображение, а затем выберите значок пера , чтобы отредактировать сломанное изображение.

Здесь нажмите кнопку « Заменить », а затем выберите изображение из своей медиатеки. Наконец, нажмите « Обновить », чтобы заменить изображение.

Замена пользовательских HTML-изображений

Если вы добавили изображение с помощью пользовательского HTML или CSS, вам необходимо убедиться, что путь указан правильно. Чтобы убедиться в этом, вам нужно проверить место, куда вы добавили изображение. Это может быть в блоке «Дополнительный CSS». Если это так, выполните следующие действия.

Примечание: Замена изображений в вашем шаблоне может быть технической. Если вы новичок в WordPress, наши специалисты помогут вам решить проблемы с шаблоном.

Сначала войдите в свою панель управления WordPress, а затем перейдите в «Внешний вид» >> «Настроить».

После этого выберите блок «Дополнительный CSS» или меню «Пользовательский CSS».

В редакторе кода найдите строку кода, в которую было добавлено изображение, и выделите путь к изображению. Затем щелкните правой кнопкой мыши и выберите «Перейти к пути к файлу …».

Если изображение недоступно, вы получите ошибку 404 not found. Вы можете просто повторно загрузить изображение на свой сайт, а затем скопировать и вставить сюда ссылку на файл.

Чтобы загрузить изображение, перейдите в « Медиа» >> «Добавить новое» . После этого нажмите « Выбрать файлы» , а затем выберите файл изображения. После завершения загрузки нажмите кнопку « Копировать URL в буфер обмена ».

Теперь вернитесь на страницу настройки и замените неработающую ссылку на изображение той, которую вы только что загрузили. Наконец, нажмите «Опубликовать », чтобы сохранить изменения.

Перепроверьте имена файлов

Это частая причина проблем с загрузкой изображений. Убедитесь, что написание изображения такое же, как и в медиатеке. Ошибка также может заключаться в другом специальном символе. Ввод символа подчеркивания (_) вместо тире (-) может привести к искажению изображения.

Чтобы решить эту проблему, вам нужно сравнить имя файла в сообщении или на странице с исходным изображением в медиатеке. Для этого войдите в свою панель управления WordPress, а затем перейдите в Медиа >> Библиотека .

Теперь используйте окно поиска, чтобы найти изображение, которое вы хотите сравнить. После этого наведите курсор на изображение и выберите « Просмотр ».

В адресной строке вы увидите путь к изображению. Выделенная часть — это имя изображения, как показано ниже.

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

Если между именами обоих файлов есть расхождения, это может быть причиной того, что изображение не отображается. В конечном итоге вы увидите ошибку 404 not found.

Чтобы решить эту проблему, вам нужно отредактировать сообщение с битым изображением и заменить неправильное имя файла на имя в медиатеке.

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

Неверные расширения файлов

Вы также должны проверить расширения файлов. Иногда имя файла может быть написано правильно, но расширение файла может быть неверным. Например, вы можете загрузить изображение в виде файла .jpg, но в коде оно имеет расширение .png. Это может вызвать проблемы.

Другая распространенная проблема возникает с расширениями изображений «jpg» и «jpeg». Хотя оба формата одинаковы, вы можете столкнуться с ошибкой неработающего изображения, если замените один на другой.

Используйте относительный путь к файлу

Относительный путь ссылается на файл по отношению к URL-адресу домашней страницы. В WordPress относительный путь берет доменное имя и использует только путь после домена.

Таким образом, в атрибуте «src» вместо «https://example.com/wp-content/uploads/image.png» источником становится «/wp-content/uploads/image.png» . И ваши изображения будут отлично работать с короткой ссылкой.

Одним из преимуществ использования относительного пути является то, что ваши изображения будут работать, даже если вы измените свое доменное имя. Это будет иметь место, пока файлы все еще размещены на том же сервере.

Вы можете использовать плагин, такой как плагин Make Paths Relative, чтобы заставить WordPress использовать относительные пути для ваших медиафайлов. Плагин прост в установке и настройке.

После установки и активации плагина перейдите в Make Paths Relative >> Settings , чтобы открыть страницу настроек плагинов.

Здесь отметьте параметр, чтобы включить относительные пути для изображений, а затем нажмите « Сохранить изменения » , чтобы зарегистрировать свои изменения. Теперь вы сможете отображать изображения на странице, используя относительные пути.

Убедитесь, что изображение существует

Возможно, вы разместили ссылку на изображение, размещенное на другом веб-сайте. Если этот сайт выйдет из строя или переместится на другой сервер, изображения перестанут существовать.

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

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

Проблемы с переносом

Это не частая проблема, но бывает. Иногда ваш сервер перегружается и не может достаточно быстро загрузить все ресурсы страницы до истечения времени ожидания запроса.

В основном это происходит с дешевыми веб-серверами. Чтобы решить эту проблему, вам необходимо увеличить мощность вашего сервера или перейти на надежный веб-хост.

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

Резюме – Исправление битых изображений

На веб-сайтах нередко возникают проблемы с поврежденными или отсутствующими изображениями, но это довольно серьезная проблема, которую следует решать незамедлительно. Если у вас есть интернет-магазин, вы можете потерять потенциальных клиентов, если пользователи не смогут видеть изображения товаров в вашем магазине.

В этом руководстве мы объяснили некоторые причины неработающих изображений, а также советы по их устранению на веб-сайтах WordPress.

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