HTML тег <img>

Значение и применение

Изображения в HTML документе определяются тегом <img>.

Обычно источник задают атрибутом src, а текстовую замену — alt. Для адаптивного выбора файла служит srcset; один из атрибутов src или srcset должен присутствовать. Текст alt нужен также пользователям программ экранного доступа: для содержательного изображения передайте его смысл, для декоративного укажите alt="".

Атрибуты width и height записываются числами без единиц и помогают заранее зарезервировать место с правильным соотношением сторон. Для адаптивного изображения обычно используют CSS max-width: 100%; height: auto. Даже при display: inline изображение — замещаемый элемент, поэтому принимает ширину и высоту.

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

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (4) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьhtml.elements.img
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
img✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
align✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
alt✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
Aspect ratio computed from width and height attributes✓79✓79✓71✓66✓15✓79✓79✓57✓15✓12.0✓79✓15
attributionsrc✓125✓125×✓111×✓125×✓83×✓27.0✓125×
border✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
crossorigin✓13✓12✓8✓15✓6✓18✓8✓14✓6✓1.0✓4.4✓6
decoding✓65✓79✓63✓52✓11.1✓65✓63✓47✓11.3✓9.0✓65✓11.3
fetchpriority✓101✓101✓132✓87✓17.2✓101✓132✓70✓17.2✓19.0✓101✓17.2
height✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
hspace✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
ismap✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
loading✓77✓79✓75✓64✓15.4✓77✓79✓55✓15.4✓12.0✓77✓15.4
longdesc✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
name✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
referrerpolicy✓51✓79✓50✓38✓14✓51✓50✓41✓14✓7.2✓51✓14
no-referrer-when-downgrade✓51✓79×✓38×✓51×✓41×✓7.2✓51×
origin-when-cross-origin✓51✓79×✓38×✓51×✓41×✓7.2✓51×
unsafe-url✓51✓79×✓38×✓51×✓41×✓7.2✓51×
sizes✓38✓12✓38✓25✓9.1✓38✓38✓25✓9.3✓3.0✓38✓9.3
auto✓126✓126✓150✓112✓27✓126✓150✓83✓27✓28.0✓126✓27
src✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
srcset✓34✓12✓38✓21✓8✓34✓38✓21✓8✓2.0✓37✓8
usemap✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
Content is case-sensitive✓58✓79✓51✓45✓≤11✓58✓53✓43✓≤11✓7.0✓58✓≤11
vspace✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
width✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут Значение Описание
align left
right
top
bottom
middle 		Не поддерживается в HTML5.
Определяет выравнивание изображения в соответствии с окружающими элементами.
alt text Текстовая замена изображения, включая чтение программой экранного доступа. Декоративное изображение получает пустое значение alt="". Не дублируйте подпись без необходимости.
border pixels Не поддерживается в HTML5.
Определяет ширину границы вокруг изображения.
crossorigin anonymous
use-credentials 		Настраивает CORS-запрос: anonymous не отправляет учётные данные другому источнику, use-credentials включает их. Сервер должен разрешить CORS, иначе загрузка завершается ошибкой. Без атрибута изображение другого источника может отображаться, но после рисования на canvas запрещено чтение пикселей. К изображению того же источника это ограничение само по себе не относится.
height pixels Определяет высоту изображения.
hspace pixels Не поддерживается в HTML5.
Определяет пробелы слева и справа от изображения.
ismap ismap Сообщает браузеру, что изображение является серверной картой-изображением.
longdesc Устарело URL Определяет URL адрес с аннотацией к изображению (URL более длинного, чем в атрибуте alt, описания изображения).
src URL Адрес изображения, абсолютный или относительный. При наличии srcset браузер выбирает подходящий источник с учётом дескрипторов.
usemap #mapname Ссылается на элемент <map>, содержащий координаты для клиентской части карты-изображения.
vspace pixels Не поддерживается в HTML5.
Определяет пробелы сверху и снизу изображения.
width pixels Определяет ширину изображения.
srcset Список источников Файлы с дескрипторами ширины (480w) либо плотности (2x). Эти два вида дескрипторов не смешивают в одном списке.
sizes Размеры и условия Ожидаемая ширина изображения в макете для выбора из srcset с дескрипторами w; не задаёт CSS-размер изображения.
loading eager | lazy Обычная или отложенная загрузка. lazy подходит для изображений ниже первого экрана.
decoding auto | sync | async Подсказка браузеру о декодировании изображения; по умолчанию auto.
fetchpriority auto | high | low Подсказка о приоритете загрузки; не гарантирует порядок запросов.
referrerpolicy Политика Referer Определяет передаваемую серверу информацию об адресе страницы, например no-referrer её исключает.
controls Логический атрибут Новая возможность стандарта с ограниченной поддержкой: браузер может показать управление изображением, например полноэкранный просмотр. Требует непустой alt; конкретный интерфейс не гарантирован.

Примеры, попробуйте сами

Изображение и текст

Измените width. Затем задайте несуществующий src и проверьте альтернативный текст.

index.html
HTML
<img src="assets/picture.jpg" alt="Нарисованный персонаж с поднятыми руками" width="220" />

Отличия HTML 4.01 от HTML 5

В HTML 5 была прекращена поддержка атрибутов align, border, hspace, vspace.

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

CSS
img {
display: inline;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".