Старая поговорка гласит, что «картина стоит тысячи слов». Это особенно актуально в Интернете, где охват внимания, как известно, является коротким, и поэтому правильный образ может действительно сделать или сломать сайт, привлекая надлежащее внимание и привлекая посетителей страницы достаточно долго, чтобы они могли узнать, что им нужно, чтобы узнать или выполнить конкретную действие, которое сигнализирует «выигрыш» для сайта. Да, когда дело доходит до веб-сайта, изображения могут стоить больше тысячи слов!
Итак, с учетом важности создания онлайн-изображений, давайте рассмотрим, что ваш сайт говорит, что изображение, которое должно быть на сайте, не загружается? Это может произойти, если у вас есть встроенные изображения, которые являются частью HTML или фоновых изображений, примененных с помощью CSS (и ваш сайт, вероятно, имеет оба из них). Суть в том, что, когда графическое изображение не загружается на странице, это заставляет дизайн выглядеть сломанным и в некоторых случаях может полностью разрушить пользовательский интерфейс на этом сайте. «Тысячи слов», которые картинка посылает, конечно, не являются положительными!
Давайте рассмотрим некоторые из распространенных причин, по которым изображения не будут загружаться на сайт, а также то, что вы должны учитывать при устранении этой проблемы во время тестирования веб-сайта.
Неправильные пути к файлам
Когда вы добавляете изображения в HTML или CSS-файл сайта, вы должны создать путь к местоположению в вашей структуре каталогов, где находятся эти файлы. Это код, который сообщает браузеру, где искать и извлекать изображение. В большинстве случаев это будет внутри папки с именем «изображения». Если путь к этой папке и файлы внутри нее неверны, изображения не будут загружаться должным образом, потому что браузер не сможет получить правильные файлы. Он будет следовать по пути, о котором вы сказали, но он зашел в тупик и вместо отображения соответствующего изображения будет пустым.
Шаг 1 при отладке проблем с загрузкой изображений заключается в том, чтобы убедиться, что путь к файлу, который вы закодировали, является правильным. Возможно, вы указали неправильный каталог или неправильно указали путь к этому каталогу. Если это не так, у вас может быть другая проблема с этим путем. Читать дальше!
Имена файлов с ошибками
Когда вы исследуете пути к файлам для своих файлов, также убедитесь, что вы правильно указали имя изображения. По нашему опыту, неправильные имена или орфографические ошибки являются наиболее распространенной причиной проблем с загрузкой изображений. Помните, веб-браузеры очень неумолимы, когда дело доходит до имен файлов. Если вы забудете письмо по ошибке или используете неправильное письмо, браузер не будет искать файл, похожий и сказать: «О, вы, вероятно, имели в виду это, верно?» Нет - если файл написан неправильно, даже если он закрыт, он не будет загружаться на страницу.
Неверное расширение файла
В некоторых случаях вы можете правильно указать имя файла, но расширение файла может быть неправильным. Если ваше изображение является файлом .jpg, но ваш HTML-файл ищет .png, возникнет проблема. Убедитесь, что вы используете правильный тип файла для каждого изображения, а затем убедитесь, что вы указали на это же расширение в коде вашего веб-сайта.
Также обратите внимание на чувствительность к регистру. Если ваш файл заканчивается на .JPG, с буквами все в шапках, но ваш код ссылается .jpg, все строчные буквы, есть определенные веб-серверы, которые будут видеть, что эти два разные, хотя они одинаковые наборы букв. Учитывается чувствительность к регистру! Вот почему мы всегда сохраняем наши файлы со всеми строчными буквами. Это позволяет нам всегда использовать строчный код в нашем коде, устраняя одну возможную проблему, которую мы могли бы иметь с нашими файлами изображений.
Файлы отсутствуют
Если пути к вашим файлам изображений верны, а имя и расширение файла также бесплатны, следующий элемент для проверки - убедиться, что файлы действительно были загружены на веб-сервер. Пренебрежение загрузкой файлов на этот сервер при запуске сайта является распространенной ошибкой, которую легко упустить.
Как вы исправите эту проблему? Загрузите эти изображения, обновите свою веб-страницу, и она должна немедленно отобразить файлы, как ожидалось. Вы также можете попытаться удалить изображение на сервере и повторно загрузить его. Это может показаться странным, но мы видели эту работу не раз. Иногда файлы повреждаются, поэтому этот метод «удалить и заменить» может помочь.
Хостинг веб-сайтов
Обычно вам захочется разместить любые изображения, которые ваш сайт использует на вашем собственном сервере, но в некоторых случаях вы можете использовать изображения, размещенные в другом месте. Если этот сайт, на котором размещается изображение, падает, ваши изображения также не загружаются.
Проблема переноса
Независимо от того, загружен ли файл изображения из внешнего домена или из вашего собственного, всегда есть вероятность, что может возникнуть проблема переноса для этого файла, когда он сначала запрашивается браузером. Это не должно быть обычным явлением (если это так, вам может понадобиться новый хостинг-провайдер), но это может произойти время от времени.
Несчастная сторона этой проблемы заключается в том, что на самом деле вы ничего не можете с этим поделать, так как это проблема вне вашего контроля. Хорошей новостью является то, что временная проблема часто решается довольно быстро. Например, когда кто-то видит сломанную страницу и обновляет ее, это само по себе часто устраняет проблему и правильно загружает изображения. Если вы видите сломанное изображение, обновите браузер, чтобы увидеть, возможно, это была проблема передачи ваш первоначальный запрос.
Несколько заключительных заметок
Когда вы думаете об образах и проблемах с загрузкой, нужно помнить о двух вещах, которые необходимо учитывать: правильное использование тегов ALT и скорости вашего сайта и общей производительности.
ALT или «альтернативный текст», теги - это то, что отображается браузером, если изображение не загружается. Они также являются важным компонентом создания доступных веб-сайтов, которые могут использоваться людьми с ограниченными возможностями. Каждое встроенное изображение на вашем сайте должно иметь соответствующий тег ALT. Обратите внимание, что изображения, применяемые с CSS, не имеют этого атрибута.
Что касается производительности веб-сайта, загрузка слишком большого количества изображений или даже нескольких изображений гигантов, которые неправильно оптимизированы для веб-доставки, окажет негативное влияние на скорость загрузки. По этой причине не забудьте проверить влияние любых изображений, которые вы используете в дизайне вашего сайта, и предпримите любые шаги, которые необходимы для повышения производительности этого сайта, при этом создавая общий внешний вид, подходящий для вашего проекта веб-сайта.
