Главная
»
HTML и HTML5
»
1.6. HTML-изображения

1.6. HTML-изображения

Опубликовано: 30 июля 2014 Обновлено: 27 января 2022 16 комментариев

HTML-изображения добавляются на веб-страницы с помощью элемента <img>. Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.

Элементы <map> и <area> позволяют создавать карты-изображения с активными областями.

1. Элемент <img>

Элемент <img> представляет изображение и его резервный контент, который добавляется с помощью атрибута alt. Так как элемент <img> является строчным, то рекомендуется располагать его внутри блочного элемента, например, <p> или <div>.

Элемент <img> имеет обязательный атрибут src, значением которого является абсолютный или относительный путь к изображению:

<img src="image.png" alt="Пример кода">

Для элемента <img> доступны следующие атрибуты:

Таблица 1. Атрибуты элемента <img>
Атрибут	Описание, принимаемое значение
`alt`	Атрибут `alt` добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике. Синтаксис: `alt="описание изображения"`.
`crossorigin`	Атрибут `crossorigin` позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения: `anonymous` — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено. `use-credentials` — Cross-origin запрос выполняется с передачей учетных данных. Синтаксис: `crossorigin="anonymous"`.
`height`	Атрибут `height` задает высоту изображения в `px`. Синтаксис: `height="300"`.
`ismap`	Атрибут`ismap` указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут `ismap` допускается только в случае, если элемент `<img>` является потомком элемента `<a>` с действительным атрибутом `href`. Синтаксис: `ismap`.
`longdesc`	URL расширенного описания изображения, дополняющее атрибут `alt`. Синтаксис: `longdesc="http://www.example.com/description.txt"`.
`src`	Атрибут `src` задает путь к изображению. Синтаксис: `src="flower.jpg"`.
`sizes`	Задаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте `srcset`. Значением атрибута является одна или несколько строк, указанных через запятую.
`srcset`	Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута `src`. Значением атрибута является одна или несколько строк, разделенных запятой. `<img src="flower.jpg" srcset=" img/flower-mobile.jpg 320w, img/flower-wide-mobile.jpg 480w, img/flower-tablet.jpg 768w, img/flower-desktop.jpg 1024w, img/flower-hires.jpg 1280w" sizes=" (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw" alt="Роза в моём саду">`
`usemap`	Атрибут `usemap` определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа `#`. Значение ассоциируется со значением атрибута `name` или `id` элемента `<map>` и создает связь между элементами `<img>` и `<map>`. Атрибут нельзя использовать, если элемент `<map>` является потомком элемента `<a>` или `<button>`. Синтаксис: `usemap="#mymap"`.
`width`	Атрибут `width` задает ширину изображения в `px`. Синтаксис: `width="500"`.

1.1. Адрес изображения

Адрес изображения может быть указан полностью (абсолютный URL), например: url(http://anysite.ru/images/anyphoto.png)

Или же через относительный путь от документа или корневого каталога сайта:

url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.

Это интерпретируется следующим образом:

../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.

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

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

1.3. Форматы графических файлов

Формат JPEG (Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.
Формат GIF (Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.
Формат PNG (Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.
Формат APNG (Animated Portable Network Graphics). Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.
SVG (Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.
Формат BMP (Bitmap Picture). Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.
Формат ICO (Windows icon). Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.

2. Элемент <map>

Элемент <map> служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.

Для элемента доступен атрибут name, который задает имя карты. Значение атрибут name для элемента <map> должно соответствовать имени в атрибуте usemap элемента <img>:

<img src="url" usemap="#имя_карты">
<map name="имя_карты">
...
</map>

Элемент <map> содержит ряд элементов <area>, определяющих интерактивные области в изображении карты.

3. Элемент <area>

Элемент <area> описывает только одну активную область в составе карты изображений на стороне клиента. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.

<map name="имя_карты">
<area атрибуты>
</map>

Таблица 2. Атрибуты элемента <area>
Атрибут	Краткое описание
`alt`	Задает альтернативный текст для активной области карты.
`coords`	Определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми: для круга — координаты центра и радиус круга; для прямоугольника — координаты верхнего левого и правого нижнего углов; для многоугольника — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.
`download`	Дополняет атрибут `href` и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения.
`href`	Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки.
`hreflang`	Определяет язык связанного веб-документа. Используется только вместе с атрибутом `href`. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка.
`media`	Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
`rel`	Дополняет атрибут `href` информацией об отношении между текущим и связанным документом. Принимаемые значения: `alternate` — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало). `author` — ссылка на автора документа. `bookmark` — постоянный URL-адрес, используемый для закладок. `help` — ссылка на справку. `license` — ссылка на информацию об авторских правах на данный веб-документ. `next/prev` — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности. `nofollow` — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке. `noreferrer` — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта. `prefetch` — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш. `search` — указывает, что целевой документ содержит инструмент для поиска. `tag` — указывает ключевое слово для текущего документа.
`shape`	Задает форму активной области на карте и ее координаты. Может принимать следующие значения: `rect` — активная область прямоугольной формы; `circle` — активная область в форме круга; `poly` — активная область в форме многоугольника; `default` — активная область занимает всю площадь изображения.
`target`	Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения: `_self` — страница загружается в текущее окно; `_blank` — страница открывается в новом окне браузера; `_parent` — страница загружается во фрейм-родитель; `_top` — страница загружается в полное окно браузера.
`type`	Указывает MIME-тип файлов ссылки, т.е. расширение файла.

4. Пример создания карты-изображения

image-map — Рис. 1. Пример разметки изображения для создания карты

Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint.
Задаем имя карты, добавив ее в элемент <map> с помощью атрибута name. Это же значение присваиваем атрибуту usemap элемента <img>.
Добавляем ссылки на веб-страницы или части веб-документа для каждой активной области, по которым пользователь будет переходить при нажатии курсором мыши на активную область изображения.

<img src="https://html5book.ru/wp-content/uploads/2014/12/flowers_foto.jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
<map name="flowers">
<area shape="circle" coords="70,164,50" href="https://ru.wikipedia.org/wiki/Гербера" alt="gerbera" target="_blank"> 
<area shape="poly" coords="191,13,240,98,143,98,191,13" href="https://ru.wikipedia.org/wiki/%C3%E8%E0%F6%E8%ED%F2" alt="hyacinth" target="_blank"> 
<area shape="circle" coords="318,93,50" href="https://ru.wikipedia.org/wiki/Ромашка" alt="camomiles" target="_blank"> 
<area shape="circle" coords="425,129,45" href="https://ru.wikipedia.org/wiki/Нарцисс_(растение)" alt="narcissus" target="_blank"> 
<area shape="rect" coords="480,3,572,89" href="https://ru.wikipedia.org/wiki/Тюльпан" alt="tulip" target="_blank"> 
</map>