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

Изображения на веб-сайте. Методы размещения.

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

Изображения для сайта

Данная папка должна располагаться в каталоге, где находятся HTML-страницы. Для того, что бы разместить эти элементы на сайте используется открывающий тег <IMG> , закрывающий тег </IMG>, а также атрибут SRC:<img src=”параметр”>, где «параметр» – это адрес изображения. Например, если изображение лежит в папке Image, которая располагается в папке site, то конструкция примет следующий вид: <img src=”site/img/picture.gif”>. Если же в написании адреса изображения была допущенная ошибка, то вместо него будет отображаться пустая рамка.

Теперь разберем атрибуты тема <IMG>. К ним относится:

Уже разобранный выше SRC.

ALIGN – этот атрибут отвечает за выравнивание картинки, он может принимать следующие значения: left, right, top, middle, bottom.

ALT – служит для добавления комментария, который отображается в веб браузере, когда само изображение не было загружено. (ALT=”комментарий”).

Border – атрибут, который отвечает за толщину рамки вокруг изображения. По умолчанию значение равно нулю.

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

WIDTH и HEIGHT – атрибуты, позволяющие определить высоту и ширину изображения.

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

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

Похожие публикации на блоге:

Комментарии (1):

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

Добавить комментарий