Изображения

Соответствующая HTML-запись выглядит следующим образом:

<img src="адрес изображения" alt="альтернативный текст"
  width="ширина" height="высота" />

Атрибут src

Атрибут src (от англ. source — источник) указывает адрес встраиваемого изображения, т. е. имя файла и путь к нему. Файл изображения может быть размещен в любой директории текущего сайта или даже на другом сервере. Если путь к файлу не указан, а указано только имя файла, то браузер ожидает обнаружить его в той же папке, что и сама HTML-страница.

Тег img чаще всего используется для размещения на веб-страницах растровых изображений в форматах PNG, GIF и JPEG, однако позволяет также выводить одностраничные векторные документы (например, одностраничный PDF-файл или XML-файл с корневым элементом SVG), анимированные растровые изображения в форматах GIF и APNG, а также некоторые анимированные векторные изображения.

Атрибут alt

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

Если изображение находится внутри ссылки, то атрибут alt также должен передавать ее назначение.

Бывает так, что изображение несет чисто декоративную функцию. Тогда в теге img указывается пустой элемент alt (alt=""). Однако, лучше, конечно, вставлять в веб-страницы декоративные изображения средствами каскадных таблиц стилей (CSS).

Атрибуты width и height

Атрибуты width и height тега img служат для указания, соответственно, ширины и высоты изображения. Определение размеров изображения при разметке HTML-файлов является хорошей практикой, поскольку данная информация позволяет браузеру изначально зарезервировать для картинки место на экране, даже пока она еще не загрузилась.

Отметим также, что атрибуты указания размеров width и height не должны использоваться для растягивания или изменения пропорций изображений. Для этих задач используйте графические редакторы.

Изображения с текстом

Еще один важный момент — это работа с изображениями, содержащими текстовую информацию, например с заголовками, выполненными в виде картинок.

Мечтай! Твои мечты обязательно сбудутся!

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

<h1>
  <img src="dream.png" alt="Мечтай! Твои мечты обязательно сбудутся!"
    width="400" height="296" />
</h1>

Для размещения картинок в веб-страницы в языке гипертекстовой разметки используется тег img (от англ. image — изображение).