Перейти к содержанию

<img>

Тег <img> (от англ. image — изображение) предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, SVG, PNG, WebP.

Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив <img> в контейнер <a>.

Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.

Демо

Изображения и мультимедиа

Синтаксис

1
<img src="<адрес>" alt="<текст>" />

Закрывающий тег не требуется.

Атрибуты

alt

Альтернативный текст для изображения.

height

Высота изображения.

ismap

Говорит браузеру, что картинка является серверной картой-изображением.

sizes

Задаёт размеры изображения для разных макетов страницы.

src

Путь к графическому файлу.

srcset

Путь к графическим файлам с учётом размера изображения и устройств.

width

Ширина изображения.

usemap

Ссылка на элемент <map>, содержащий координаты для клиентской карты-изображения.

Также для этого элемента доступны универсальные атрибуты.

alt

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

Синтаксис

1
<img alt="<текст>" />

Значения

Любая подходящая текстовая строка.

Значение по умолчанию

Нет.

height

Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится элемент <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

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

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

Синтаксис

1
<img height="<значение>" />

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

Исходная высота изображения.

ismap

Атрибут ismap говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

Отправка данных на сервер происходит следующим образом. Необходимо поместить элемент <img> в контейнер <a>, где в качестве значения атрибута href указать адрес серверной программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу.

Синтаксис

1
<img ismap />

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

sizes

Задаёт размеры изображения для разных макетов страницы. Разные значения и примеры использования показаны ниже.

Одно значение ширины. Здесь vw — это ширина в процентах от области просмотра. В качестве значений можно использовать единицы em, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, q, in, pc, pt, px, но не проценты.

1
sizes="100vw"

Медиа-запрос с одним значением ширины. В данном случае в качестве контрольной точки задано 40em.

1
sizes="(min-width: 40em) 100vw"

Список размеров, перечисленный через запятую. В значениях можно указывать медиа-запросы и функцию calc().

1
sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)")

Синтаксис

1
2
3
[ <размер исходника># , ]? <значение размера исходника>
    <медиа-запрос> <значение размера исходника>
    <размер>

<значение размера исходника> не допускает проценты, используйте только единицы vw.

Значение по умолчанию

Нет.

src

Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате PNG и JPEG.

Синтаксис

1
<img src="<адрес>" />

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

srcset

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

  • адрес изображения;
  • дескриптор ширины, который представляет собой целое положительное число, за которым следует w (например: 600w);
  • дескриптор плотности пикселей, представляет собой положительное десятичное число, за которым сразу следует х.

Каждая строка в списке должна содержать обязательно адрес и по желанию дескриптор ширины или плотности пикселей. Если никакой дескриптор не задан, то по умолчанию он равен 1x.

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

Поддержка браузерами

Can I Use srcset? Data on support for the srcset feature across the major browsers from caniuse.com.

Полифилы для включения поддержки:

Пример

1
2
3
4
<img
    src="image-src.png"
    srcset="image-1x.png 1x, image-2x.png 2x"
/>

Значение по умолчанию

Нет.

width

Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится элемент <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута height или width сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

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

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

Синтаксис

1
<img width="<значение>" />

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

Исходная ширина изображения.

usemap

Атрибут usemap связывает между собой картинку и карту-изображение, задаваемую с помощью контейнера <map>. В качестве такой связи выступает имя идентификатора, которое указывается в значении атрибута usemap, и то же имя, заданное у атрибута name элемента <map>. При этом в <img> идентификатор должен начинаться с символа решетки (#).

Синтаксис

1
<img usemap="#<идентификатор>" />

Значения

Текстовая строка, начинающаяся с символа решётки.

Значение по умолчанию

Нет.

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>IMG</title>
    </head>
    <body>
        <p>
            <a href="page/lorem.html"
                ><img
                    src="image/girl.jpg"
                    width="120"
                    height="120"
                    alt="Девочка с муфтой"
            /></a>
        </p>
    </body>
</html>

Ссылки

  • Тег <img> MDN (рус.)

Комментарии