Создание сайтов с нуля - урок 7 - Вставка изображений на сайт, тег img и его атрибуты

Для добавления на страницу сайта изображений используется элемент img. Это одинарный тег, который необходимо использовать с атрибутом src. Не трудно догадаться, что значением атрибута src должен быть путь к самому изображению.

Например: <img src=”images/bg.jpg”>

Кроме src у тега img есть еще несколько важных и часто используемых атрибутов, один из которых является обязательным для использования. Это атрибут alt. При помощи него задается альтернативный текст для изображения.

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

Если добавить в тег img еще и атрибут title, то при наведении мышкой на изображение будет всплывать подсказка с текстом, указанным в атрибуте title.

Еще 2 важных атрибута для тега img, это width и height – ширина и высота изображения. В случае их задания браузеру нет необходимости самостоятельно вычислять размер каждого рисунка при его загрузке с сервера, поэтому это ускоряет загрузку страницы.

Обычно размеры изображений через атрибуты width и height задаются в пикселях. При этом, стоит помнить, что после цифр буквы «px» писать не нужно. Это будет ошибкой. Кроме того, ширину изображений иногда задают в процентах – после цифр ставится знак %. Высоту изображений обычно в % не задают.

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

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

Самыми распространёнными и поддерживаемыми всеми браузерами являются jpeg и png. Значительно реже можно встретить еще формат gif. Также стоит отметить формат, стремительно набирающий популярность, - это svg. Браузеры наконец-то научились хорошо работать с векторной графиком, а svg как раз является векторным форматом, поэтому уделите знакомству с форматом svg отдельное внимание. Немного детальнее вопрос форматов графических изображений рассмотрен в уроке по фотошопу на моем канале youtube. Рекомендую его посмотреть, я в нем рассказал про основы работы в программе фотошоп для верстальщиков, т.е. сугубо тот минимум, который необходимо знать верстальщику. Если вы с фотошопом вообще не знакомы – тогда рекомендую посмотреть обязательно.