Изображения

Элемент `img`

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

Логотип HTML5 в формате PNG

Логотип HTML5 в формате SVG

Альтернативный текст

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

Изображение с альтернативным текстом "Рыжий кот"

Аквариум — Изображение аквариума с альтернативным текстом

Размеры изображения

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

Гриб ландшафт — Гриб с шириной 200px и высотой 150px

Гриб портрет — Гриб с высотой 200px (ширина автоматически)

Для добавления гибких (responsive) изображений (таких, которые отображаются хорошо на устройствах с сильно отличающимися размерами экрана, разрешением, и другими характеристиками) используют атрибуты sizes и srcset. Атрибут sizes задаёт размеры изображения для разных макетов страницы. Атрибут srcset задаёт путь к графическим файлам с учётом размера изображения и устройств.

Гриб с поддержкой Retina-экранов (srcset)

Подпись к изображению

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

Слон — пример подписи с использованием figure и figcaption

Мускул — Изображение мускулов в формате PNG

Элемент picture

HTML-элемент picture служит контейнером для одного или более элементов source и одного элемента img для обеспечения оптимальной версии изображения для различных размеров экрана. Браузер рассмотрит каждый из дочерних элементов source и выберет один, соответствующий лучшему совпадению; если совпадений среди элементов source найдено не будет, то будет выбран файл, указанный атрибутом src элемента img. Затем выбранное изображение отображается в пространстве, занятом элементом img.