Если вы хотите оживить свой HTML-документ, самое время познакомиться с тегом img. Это сокращение от англоязычного слова image (изображение), и он играет ключевую роль в веб-дизайне. Важно понимать: сам файл картинки физически не «вставляется» внутрь кода страницы. Тег лишь создает необходимое пространство нужного размера и указывает браузеру, откуда загрузить графический контент в форматах GIF, JPEG или PNG.

• JPG - идеальный выбор для фотографий! Этот формат позволяет отображать миллионы цветов, что критически важно для передачи всех оттенков и плавных градиентов. Единственный нюанс: JPG не поддерживает прозрачность.
• GIF - отличный вариант для простой графики, например, логотипов или небольших анимаций. Хотя он уступает JPG в цветовом диапазоне (поэтому не подходит для фотореалистичных снимков), его главные козыри - поддержка прозрачности, возможность создания анимаций и очень компактный размер файлов.
• PNG - универсальный формат. Он, как и JPG, поддерживает миллионы цветов, но в отличие от него, позволяет сделать фон прозрачным. Однако будьте готовы к тому, что файлы PNG обычно весят немного больше своих аналогов в JPG или GIF.

Работая с тегом img, вы всегда будете опираться на два обязательных атрибута: src и alt. Без них изображение просто не заработает!

Атрибут src выполняет функцию навигатора. Он задает путь к файлу изображения. Помните: браузер не хранит картинку внутри тега, а именно по этой ссылке идет загрузить графический объект на экран.

Атрибут alt - это ваша страховка и помощь пользователям. Он содержит альтернативный текст, который будет показан только в том случае, если изображение по какой-то причине не загрузилось (неверный путь или удаленный файл). Это важный элемент доступности сайта.

Хотите превратить картинку в кликабельную ссылку? Это элементарно! Просто оберните тег img внутри элемента . При этом вокруг изображения может появиться стандартная рамка браузера, которую легко убрать с помощью CSS-свойства border:

Интересный факт: изображения можно использовать как карты-изображения. Это значит, что на одной картинке может быть несколько активных зон разной формы, каждая из которых ведет на свой URL. На первый взгляд такая карта выглядит как обычная статичная графика, но интерактивностью она превосходит многие элементы интерфейса.

Примечание: Кстати, вы также можете добавить фоновое изображение с помощью CSS-свойства background-image. Это отличная альтернатива, когда картинка нужна именно как декоративный элемент фона.

src:

Указывает браузеру точное расположение (URL-адрес) нужного изображения. Это основа всего процесса отображения графики.

alt:

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

Примечание: Если вам нужно добавить всплывающую подсказку при наведении курсора мыши, используйте глобальный атрибут title. В его значение можно вписать любую дополнительную информацию о картинке.

Если изображение используется исключительно как декор и не несет смысловой нагрузки, оставьте строку пустой (alt=""). Это хороший тон для «чистого» кода.

height:

Задаёт высоту изображения в пикселях.

ismap:

Это булев атрибут (логического типа). Его наличие сигнализирует браузеру, что картинка является частью серверной карты-изображения. Допустимые варианты записи:

При клике на интерактивную область координаты отправляются на сервер в строке запроса URL-адреса.

Примечание: Атрибут ismap работает только если элемент находится внутри тега , который содержит атрибут href.

usemap:

Объявляет изображение как карту-изображения. Значение в этом атрибуте обязательно должно начинаться с символа "#". Оно связывает элемент с тегами map (через их атрибуты name или id), создавая единую интерактивную структуру.

Примечание: Нельзя использовать атрибут usemap, если элемент является потомком элемента или .

width:

Задаёт ширину изображения в пикселях.

Примечание: настоятельно рекомендую всегда указывать атрибуты width и height! Так браузер заранее резервирует место под картинку при загрузке страницы. Без этих параметров макет может «прыгать» и смещаться, пока изображение не загрузится полностью. Это особенно неприятно для пользователей с медленным интернетом.

Кроме того, тег img поддерживает глобальные атрибуты HTML5 (такие как class, id, data-* и другие).