Изображения в HTML

Для придания статье яркости и наглядности очень часто используют различные изображения. Они привлекают взгляд нового посетителя и дают понять содержание статьи до начала чтения. Таким образом, человек неосознанно заинтересовывается статьёй и начинает читать, а значит картинки способствуют увеличению посещаемости сайта. Для вставки на страницу картинок используется одиночный тег <img>.

<img src="image.gif" alt="Рисунок image.gif" width="164" height="150">
Рисунок image.gif

Атрибут src обязательно должен быть задан, так как в нём задаётся путь к вставляемой картинке. Как в случае с адресами ссылок, путь можно указывать абсолютный или относительный.

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

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

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