Чтобы графические элементы сайта загружались одновременно со страницей, а затем корректно отображались в браузере, они должны находиться в отдельной папке, для удобства названной images или просто img. Далее папка img копируется в каталог с html-страницами. Теперь можно задуматься о том, как внедрить изображения в веб-страницы.
Для размещения графической информации на сайте применяется тег <IMG> и атрибут SRC: <img src="адрес изображения">. Применимо для папки img код примет следующий вид: <img src="site/img/picture.gif">, где site - имя корневой папки, в которой располагается сайт; img - каталог с изображениями; picture.gif - размещаемый графический файл. Закрывающий тег </IMG> не используется.
В случае ошибочного указания адреса размещаемого файла, вместо изображения в веб-браузере вы увидите пустую рамку.
Атрибуты тега <IMG>.
Атрибут SRC отвечает за указание адреса файла. Но кроме него,существуют ряд других атрибутов, отвечающих за нюансы размещения (подпись рисунка, способ выравнивания и так далее).
Атрибут ALIGN служит для установления способа выравнивания картинки (значения left и right, top, middle, bottom)
С помощью ALT добавляется комментарий, отображаемый во время отключения показа графики в веб-браузере.
HTML-код: ALT="комментарий".
BORDER - толщина рамки вокруг изображения.
LOWSCR - альтернативное изображение. Если пользователь по техническим причинам не может просмотреть полноцветное изображение высокого разрешения, использование LOWSCR позволяет указать адрес альтернативного изображения, меньшего размера и разрешения. Атрибут пользуется популярностью у веб-мастеров, так как позволяет оптимизировать страницу для просмотра на мобильных устройствах, изначально обладающих меньшими ресурсами чем стационарный компьютер.
WIDTH и HEIGHT - высота и ширина изображения.
В завершении статьи несколько полезных советов:
- Указав перед адресом графического изображения проток http://, вы создадите абсолютную ссылку. То есть сохранить веб-страницу для автономного просмотра вместе с изображением, обозначенным в ссылке, невозможно. Абсолютная ссылка предназначена для загрузки изображения из Интернета, а потому на компьютере картинка сохранена не будет.
- Для графических элементов сайта (меню и баннеров) используйте формат gif, для полноцветных изображений - jpeg.
- Старайтесь не применять атрибуты WIDTH и HEIGHT для изображений формата jpeg. Если указать большие значения длины и ширины, это повлечет снижение качества изображения. Картинку большого размера не стоит уменьшать с помощью данных атрибутов, веб-браузер все равно вначале будет загружать изображение первоначального размера, а уже потом изменять его. Поэтому прежде чем разместить изображение на веб-странице, при помощи любого графического редактора подкорректируйте его параметры.