Изображения

Элемент `img`

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

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

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

Глобус

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

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

Картинка 50*50

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

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

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

Элемент picture