Картинка на хостинге не отображается

By signing up, you agree to our Terms of Service and Privacy Policy.


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

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

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

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

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

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

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

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

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

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

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

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

ЗАРАБОТОК В ИНТЕРНЕТЕ С НУЛЯ. СОЗДАНИЕ БЛОГА. ОПТИМИЗАЦИЯ, ПРОДВИЖЕНИЕ И МОНЕТИЗАЦИЯ САЙТА. СПОСОБЫ ЗАРАБОТКА В ИНТЕРНЕТЕ

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

ну и в общих чертах поговорим об оптимизации изображений для блога.

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

Чем неприятна ситуация, когда перестает отображаться картинка, думаю понятно. Это получение информации не в полном объеме. Очень часто в статьях идет отсылка к иллюстрации, например, «Подробнее смотри на рисунке». В некоторых случаях словами очень трудно что-либо объяснить – проще показать. Вот тогда изображения в статьях играют особую роль. И очень обидно, когда картинки отсутствуют на своих местах.

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

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

Вообще, вариантов, почему не отображаются картинки на сайте, может быть множество. И естественно, я не смогу обо всех рассказать. Попросту, обо всех причинах я не знаю. Но вот самые распространенные причины:

1. Картинка не загружена на сервер или удалена с него;

2. В статье указано неправильное расширение изображения;

3. Принудительно изменено название изображения;

4. Неправильно указан путь к файлу.

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

На хостинге, где до этого находился мой Blogmonet.ru (это был хороший хостинг Hostenko), у меня был еще один сайт строительной тематики. Сами понимаете, в одном кабинете два Вордпресса, две базы данных.

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

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

В общем, когда после переноса я открыл свой блог, я испытал жуткое расстройство и даже шок! Пару-тройку дней даже думать не хотелось о своем детище («Всё пропало, шеф! Всё пропало!»). Ни одной прежней картинки на блоге не осталось – только серые квадраты вместо них. Шаблон WordPress (в смысле тема Вордпресс) – не мой, а стандартный.

Вот, думаю, переехал, так переехал!

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

Но я давно собирался освежить свой блог, в том числе и новым шаблоном. Как говорится, не было бы счастья…

А вот с отображением картинок куда более интересная и нелепая история произошла.

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

Когда я пишу статью, я создаю отдельную папку, в которой находится файл со статьей, файл с выдачей ключевых слов по теме из Яндекс.Вордпресс и картинки к статье. Когда пишу, прямо в тексте я указываю, где и какие изображения должны располагаться. И у меня по всей статье стоит «рис 1», «рис 2», «рис 5» и т.д.

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

Вот сначала я и подумал, что путь к рисункам потерялся – я же загружал их под одним названием, а выкладывал уже под другим. Но с этим все оказалось нормально.

Тогда я подумал, что может быть, каким-то непостижимым образом у изображений поменялось расширение (три или четыре буквы после точки). Проверил – тоже все пучком.

Что я еще пробовал? В одной из статей решил удалить и заново поставить картинку. Удалил, поставил – ни фига! – всё то же самое. (После удаления ставил из библиотеки файлов тот же файл (или его образ), поэтому результат был нулевым)

Затем удалил вообще и заново загрузил с компьютера картинку. О, чудо! – изображение появилось!

Я сначала очень обрадовался. А затем обрадовался не очень. А затем вообще загрустил.

На моем блоге почти 1700 различных иллюстраций к статьям и других графических файлов. Если всё это переносить вручную по одной картинке и заново оптимизировать – легче новый блог сделать или оставить статьи без картинок.

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

Оказывается, работники хостинга, когда переносили блог к себе, каким-то непостижимым образом перенесли вместо папки с картинками Blogmonet.ru перенесли папку с картинками от моего второго блога, строительного. В движке WordPress папки называются же стандартно. В любом блоге на WP есть папки /wp-admin, /wp-content и другие.

Честно говоря, не представляю, как так можно было умудриться! Но факт остается фактом – статьи и все оформление – с одного сайта, а картинки (папка /uploads) – с другого.

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

Дальше уже техническая сторона вопроса . В менеджере файлов на сервере я удалил полностью папку /uploads. Там хранятся все картинки Вордпресс.

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

И всё! Все картинки встали на свои места. Я победил.

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

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

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