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

Тег <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 предоставляет альтернативный текст для изображения, если оно недоступно или не может быть загружено по какой-либо причине. Его значение должно соответствовать тому, что изображено на картинке.

Как и <br>, элемент <img> также является пустым элементом и не имеет закрывающего тега. Однако в XHTML он закрывается, заканчиваясь на />.

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

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

Атрибуты 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;">

Рекомендуется указывать атрибуты width и height для изображения, чтобы браузер мог выделить для него место до его загрузки. В противном случае загрузка изображения может вызвать искажение или дерганье в макете вашего сайта.

Использование тега <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>

Браузер оценит каждый дочерний элемент <source> и выберет наиболее подходящий из них; если совпадений не найдено, используется URL-адрес атрибута src элемента <img>. Кроме того, тег <img> должен быть указан как последний дочерний элемент тега <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> для определения интерактивных областей на изображении. Вы можете определить любое количество интерактивных областей на изображении.

Карта изображений не должна использоваться для навигации по сайту. Они не дружат с поисковыми системами. Допустимо использование карты изображения для географической карты.

Есть много онлайн-инструментов для создания карт изображений. Некоторые продвинутые редакторы, такие как Adobe Dreamweaver, также предоставляют набор инструментов для простого создания карт изображений.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.