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

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

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

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

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

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

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