Для использования на сайтах графических изображений применяются определенные форматы графических файлов: JPEG, GIF и PNG. Первый формат JPEG – это саамы известный и распространенный формат изображения для хранения растровых или точечных фотографий и рисунков со сжатием, которое уменьшает исходный размер файла в несколько раз без видимой потери его качества.
GIF – формат графических изображений, очень популярен для применения в вебдизайне при создании сайта, может использоваться как для создания анимированных (движущихся) изображений необходимых в дизайне сайта, так и для создания рекламных банеров.
Формат PNG – поддерживаю в основном новые версии браузеров, так как данный формат графических изображений является более молодым по отношению к своим предшественникам, он позволяет добиться наибольших результатов в сжатии цифровых изображений, уменьшая тем самым размер файла до минимума, но особой популярности не завоевал так как нет возможности поддерживать анимированную графику.
Какого формата графику Вы будете использовать у себя при создании страниц дело ваше, но лично я бы посоветовал использовать формат GIF, который не только даёт отличные возможности по уменьшению размера цифрового изображения при сжатии, но и использовании анимации на сайте, а также изображения этого формата менее искажаются в визуальном плане нежели рисунку формата JPEG.
Но нужно помнить, прежде чем вставлять картинку в страницу сайта, нужно уменьшить её размер до минимального имеется ввиду не физический размер самой картинки а объем файла (кб, Мб), это необходимо для того, чтобы время необходимое для загрузки страницы в браузере содержащей изображения было как можно меньше, ведь у некоторых пользователей интернета скорость соединения оставляет желать лучшего, и если страничка будет долго грузиться, то не каждый дождется её загрузки и уйдет с сайта. Как выполнить такую оптимизацию изображения Вы можете порыться в интернете и отыскать ответы на этот вопрос, такой информации там предостаточно или посмотреть в этом разделе.
Давайте теперь разберем, как же вставлять изображения в сам HTML-код странички, данная операция была рассмотрена в разделе сайта - «Вставка изображений». Но данный способ был ограничен тем, что непосредственно сама картинка расположена в самой папке «Мой сайт», но при вставке изображения в код странички можно внести ссылку на рисунок расположенный совсем на другом сайте или веб ресурсе, такая ссылка будет являться абсолютной. Для того чтобы создать абсолютную ссылку выполним несложные действия, помните HTML-код для вставки изображения на первой страничке Вашего сайта:
<img src=имя файла.gif>
в данном случае необходимо изменить значение атрибута src так, чтобы этим значением стал URL-адрес вашего рисунка расположенного в интернете, а выглядеть это будет следующим образом:
<img src=http://имя сайта.narod.ru/имя файла.gif>
Можете сделать это изменение кода уже из менеджера управления сайтом на narod.ru, так как странички уже помещены на этот сервер и проверить результат через браузер с подключенным при этом интернете, если при открытии браузером изменённой странички будет отсутствовать подключение к сети, то вместо картинки увидите квадратик с крестиком.
Во всём этом есть один небольшой нюанс, многие пользователи отключают в браузере функцию просмотра изображений для более быстрой загрузки страниц, а некоторые браузеры старых версий и вовсе не могут прочесть HTML-код рисунка, а соответственно и отобразить его визуально для пользовательских глаз. В этом случае для тега img был предусмотрен ещё один атрибут:
alt
название которого говорит само за себя, альтернативный текст, то есть вместо того, чтобы показать рисунок браузер будет выдавать текст, который Вы пропишите (например это может быть название рисунка или его описание). Значение данного атрибута должно быть заключено в кавычки, например:
<img src=имя файла.gif alt=«Логотип моего сайта»>
после сделанных изменений в коде страницы содержащей картинку, при отсутствии поддержки браузером изображений или отключенной функции отображения картинок будет выводится надпись «Логотип моего сайта».
Фон странички сайта
Фон странички сайта еще одно преимущество, которое заключается в том, что вставляемый рисунок можно будет использовать в качестве заднего фона web-странички. Выполнение этой функции стало возможным при вставке атрибута
background
в тег <body> с присвоением ему значения URL-адреса рисунка или его имени в каталоге сайта, если взять страничку сайта, который мы загрузили на сервер и сделать изменения в коде:
<html>
<head>
<title>Содержание</title>
</head>
<body link=blue alink=red background=имя файла.GIF>
<h3 align=center>Содержание</h3>
<ul>
<li>Введение.
<li>Создание сайта.
<li>Раскрутка сайта.
<li>Администратирование сайта.
<li>Антивирусная защита.
</ul>
<form action="mailto:имя почтового @mail.ru" method=post>
<textarea rows=10 cols=50 name=comments ></textarea >
<p><input type=submit valuе=«Отправить»></p>
</form>
<a href =“site.html” >Главная</a>
</body>
</html>
Сохранив изменения, получим в виде фонового изображения на страничке картинку, имя которой мы вставим в HTML-код, но не забывайте, что данная картинку должна быть также загружена в общую корневую папку «Мой сайт» на сервер.
