Автор: Рубрики: Полезности Просмотрено: 21062
Причины, по которым картинки не отображаются на сайте
11Янв2018

picture not loaded
Есть такая пословица “Одна картинка говорит больше, чем тысяча слов”. Данное выражение особенно оправдано в Веб-сфере, где концентрация внимания рассеянная, и поэтому правильный образ может привлечь или отпугнуть посетителя. Привлекая внимания, стоит направить пользователя в правильное русло, для того чтобы пользователь достиг поставленной вами цели.Так что на веб-сайте, изображения действительно могут стоить больше тысячи слов!
С учетом важности использования изображений, давайте рассмотрим ситуацию, когда изображение есть на сайте, но не загружаеться. Это может произойти, если у вас есть встроенные изображения, которые являются частью HTML или фоновых изображений, примененных с помощью CSS. Актуально и то, что теперь Google уменьшает файлы JPEG на 35% с помощью нового алгоритма Guetzli, подробнее здесь.

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

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

Не правильний путь
Когда вы добавляете изображения в HTML или CSS-файл сайта, вы должны создать путь к местоположению в вашей структуре каталогов, где находятся эти файлы. Этот код указывает браузеру откуда показывать изображение. В большинстве случаев картинки находяться в папке «images». Если путь к этой папке и файлы внутри нее неверны, изображения не будут загружаться должным образом, потому что браузер не сможет получить правильные файлы.
Браузер будет следовать указанному пути, и в случае отсутствия соответствующего место изображения будет пустым.
Отладка проблем с загрузкой изображений заключается в проверке правильности пути к изображению. Возможно, вы указали неправильный каталог или неправильно указали путь к этому каталогу. Если это не так, у вас может быть другая проблема, которую мы рассмотрим дальше!

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

Не правильное расширение файла
В некоторых случаях указывая правильное имя файла и путя, ошибка появляется при неправильном расширении файла. Если вы загрузили картинку в .jpg, а в HTML указан формат .png возникнет проблема. Проверьте соответствует ли формат изображений с указанным форматом в коде.
Также следует обратить внимание на то, что если вы используете .JPG (все большие буквы), а в название .jpg (маленькими), то некоторые веб-сервера могут не грузить изображения. Мы рекомендуем сохранять название изображений без использования больших букв, это поможет избежать ошибок при загрузки картинок.

Ошибка при загрузке
Если вы правильно указали путь имя, а также расширения файлов, а изображение все равно не отображается, стоит проверить загружено ли данное изображение на сервер без ошибок.
Небрежная загрузка файлов на сервер при запуске сайта является распространенной ошибкой, которую легко упустить. Как исправить эту проблему?
Загрузите нужные изображения, обновите свою веб-страницу, и она должна сразу отобразить файлы. Вы также можете попытаться удалить изображение на сервере и повторно загрузить его. Это может показаться странным, но это действительно работает. Иногда файлы повреждаются, поэтому этот метод «удалить и заменить» может помочь.

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

Проблемы с отображением
Независимо от того, загружен ли файл изображения из внешнего домена или из вашего собственного, всегда есть вероятность, что может возникнуть проблема с отображением этого файла, когда он запрашивается браузером. Это нечастое явление (если это так, вам может понадобиться новый хостинг-провайдер), но это может происходить время от времени.
Неприятная сторона этой проблемы заключается в том, что на самом деле вы ничего не можете с этим поделать, так как это проблема вне вашего контроля. Хорошей новостью является то, что временная проблема часто решается довольно быстро. Например, когда кто-то видит сломанную страницу и обновляет ее, это само по себе часто устраняет проблему и правильно загружает изображения. Если вы видите сломанное изображение, обновите браузер, чтобы увидеть, возможно, это была проблема передачи – ваш первоначальный запрос.

Ну и напоследок…
Когда вы думаете об использовании изображений, нужно помнить о двух вещах, которые необходимо учитывать: правильное использование тегов ALT, скорость сайта и общая производительность.
ALT (альтернативний текст) – текст который отображается, если изображение не загрузилось. Он также является важным компонентом создания для веб-сайтов, которые могут использоваться людьми с ограниченными возможностями. Каждое встроенное изображение на вашем сайте должно иметь соответствующий тег ALT. Обратите внимание, что изображения, применяемые с CSS, не имеют этого атрибута.
Что касается производительности веб-сайта, загрузка слишком большого количества изображений или даже нескольких изображений гигантов, которые неправильно оптимизированы, окажут также негативное влияние на скорость загрузки. По этой причине не забудьте проверить влияние любых изображений, которые вы используете в дизайне вашего сайта, и предпримите любые шаги, которые необходимы для повышения производительности этого сайта, при этом создавая общий внешний вид, подходящий для вашего интернет-проекта.

Данный материал является переводом с сайта www.thoughtco.com.

Также важно оптимизировать картинки на вашем сайте. Для чего это нужно? Более детально читайте в следующей статье.

21063 раз(а) 8 Сегодня просмотрено раз(а)
  • Семён Семёныч

    Чтобы сайт не пестрел пустыми местами, можно сделать загрузку изображений не на фотохостинг, а на хостинг самого сайта. Так будет намного удобнее.

    • Владимир Дот

      А места на хостинге то хватит? Может так и удобнее, но придётся постоянно большой объём места держать, а это дополнительные расходы. Много картинок = нужно много места = нужно больше платить.

      • Семён Семёныч

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

        • Марина Семёнова

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

          • Владимир Дот

            Я попробовал так сделать на форуме прикреплённом к сайту, но вот проблема – пользователи как делали ссылки через радикал, так и делают. Сейчас разместил на главной тему с инструкцией в картинках, надеюсь поможет. И надо, что-то делать с ужимом картинок, а то реально много занимают место. Даже простенькие.

        • Владимир Дот

          Предупредил, не помогло. Приходится многое руками переделывать пока, не привыкнут.

          • Семён Семёныч

            Дак время нужно, пока все поймут что дак как, пока запомнят. Но как по мне, дак это лишняя возня.

          • Марина Семёнова

            Ребят, если пользователи не могут залить картинку, то не парьтесь и оставьте всё как есть. Темы то останутся, а значит и трафик сохранится.

          • Владимир Дот

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

          • Марина Семёнова

            У меня пропадают периодически картинки и я их просто поправляю вручную. У меня на такой случай даже архивчик небольшой составлен. 🙂

  • Марина Семёнова

    Недавно у меня случилась похожая проблема, я долго копалась у себя, и на хостинг картинки загружала – проверяла как там, всё грузилось нормально. И оказывается что у хостинга картинок был сбой и часть картинок испортилась! Я об этом узнала только с их форума, даже в новостях не написали гады. 🙂 Вот так ещё может быть.