Руководство по изображениям в HTML

Изображения улучшают внешний вид веб-страниц, делая их более интересными, красочными и визуально понятными.

Тег <img> используется для вставки изображений в HTML-документы. Это пустой элемент и он может содержать только атрибуты. Синтаксис тега <img> может быть задан с помощью:

<img src="url" alt="some_text">

Следующий пример вставляет три изображения на веб-страницу:

<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Balloons">

Каждое изображение должно содержать как минимум два атрибута: атрибут src и атрибут alt.

Атрибут src сообщает браузеру, где найти изображение. Его значение — это URL-адрес изображения.

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

Настройка ширины и высоты изображения

Атрибуты width и height используются для указания ширины и высоты изображения.

Значения этих атрибутов по умолчанию интерпретируются в пикселях.

<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Balloons" width="200" height="200">

Вы также можете использовать атрибут style, чтобы указать ширину и высоту для изображений. Это предотвращает случайное изменение размера изображения таблицами стилей, поскольку встроенный стиль имеет наивысший приоритет.

<img src="kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">
<img src="sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">
<img src="balloons.jpg" alt="Balloons" style="width: 200px; height: 200px;">

Использование тега <picture> в HTML5

Иногда масштабирование изображения вверх или вниз для соответствия разным устройствам (или размерам экрана) не работает должным образом. Кроме того, уменьшение размера изображения с помощью атрибута или свойства width и height не уменьшает размер исходного файла. Для решения этих проблем HTML5 введен тег <picture>, который позволяет вам определять несколько версий изображения для различных типов устройств.

Элемент <picture> может содержать ноль или более элементов <source>, каждый из которых содержит разный источник изображений, и один элемент <img> в конце. Кроме того, каждый элемент <source> имеет атрибут media, который определяет состояние мультимедиа (аналогично медиазапросу), которое используется браузером для определения того, когда следует использовать конкретный источник. Давайте рассмотрим пример:

<picture>
    <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="My logo">
</picture>

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

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

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

Давайте посмотрим простой пример, чтобы понять, как это на самом деле работает:

<img src="objects.png" usemap="#objects" alt="Objects">
<map name="objects">
    <area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">
    <area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">
    <area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">
</map>

Атрибут name тега <map> используется для ссылки на карту из тега <img>, используя его атрибут usemap. Тег <area> используется внутри элемента <map> для определения интерактивных областей на изображении. Вы можете определить любое количество интерактивных областей на изображении.