Img в html: Атрибут alt | htmlbook.ru

— HTML | MDN

HTML-элемент <img> встраивает изображение в документ. Это замещаемый элемент.

Приведённый выше пример показывает очень простое использование элемента <img>. Атрибут src обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут alt содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.

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

• управление Referrer/CORS в целях безопасности. Смотрите ниже атрибуты crossorigin и referrerpolicy;
• настройка внутреннего размера (en-US) с использованием width и height, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;
• адаптивные изображения рекомендуется использовать с атрибутами sizes и srcset (смотрите также элемент <picture> и наше руководство «Адаптивные изображения»).

Стандарт HTML не содержит списка форматов изображений, которые должны поддерживаться. Поэтому разные пользовательские агенты поддерживают разные наборы форматов.

Firefox

Форматы изображений, поддерживаемые Firefox:

• JPEG;
• GIF, включая анимированные GIF;
• PNG;
• APNG;
• SVG;
• BMP;
• BMP ICO;
• PNG ICO.

Если ошибка происходит во время загрузки или отрисовки изображения и обработчик события onerror был настроен на обработку события error (en-US), тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:

• атрибут src пустой или null;
• указанный URL в атрибуте src совпадает с URL страницы, на которой в данный момент находится пользователь;
• указанное изображение каким-то образом повреждено, что препятствует его загрузке;
• метаданные указанного изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента <img> не было указано никаких размеров;
• указанное изображение имеет формат, который не поддерживается пользовательским агентом.

К этому элементу применимы глобальные атрибуты.

alt

Этим атрибутом задаётся альтернативное текстовое описание изображения.

Примечание: Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или неподдерживаемый тип. В этих случаях браузер может заменить изображение текстом записанным в атрибуте alt элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте alt. Примечание: Пропуск этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки ( alt="") указывает, что это изображение не является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при рендеринге (en-US).

crossorigin

Этот атрибут указывает, следует ли использовать CORS при загрузке изображения или нет. Изображения с включённой поддержкой CORS могут быть повторно использованы в элементе <canvas> не будучи «испорченными». Допустимые значения:

• anonymous: Запрос cross-origin (т.е. с HTTP-заголовком Origin) выполняется, но параметры доступа не передаются (т.е. нет cookie, не используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовок Access-Control-Allow-Origin), изображение будет «испорчено» и его использование будет ограничено;
• use-credentials: Запрос cross-origin (т.е. с HTTP-заголовком Origin) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовка Access-Control-Allow-Origin), изображение будет «испорчено» и его использование будет ограничено.Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовка Origin), ограничивая его использование в элементе <canvas>. Если задан неправильно, то он обрабатывается так, как если бы использовалось значение anonymous. Для получения дополнительной информации смотрите «Настройки атрибутов CORS».

decoding

Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:

• sync: Декодировать изображение синхронно для одновременного отображения с другим контентом;
• async: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;
• auto: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.

height

Внутренняя высота (см. Внутренний размер (en-US)) изображения в пикселях.

importance Экспериментальная возможность

Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:

• auto: Указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритета изображения;
• high: Указывает браузеру, что изображение имеет высокий приоритет;
• low: Указывает браузеру, что изображение имеет низкий приоритет.

intrinsicsize Экспериментальная возможность

Этот атрибут говорит браузеру игнорировать действительный внутренний размер (en-US) изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, а narutalWidth/naturalHeight изображения будут возвращать значения, указанные в этом атрибуте. Объяснение, примеры.

ismap

Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.

Примечание: Этот атрибут разрешён, только если элемент <img> является потомком элемента <a> с валидным (соответствующий требованиям) атрибутом href.

loading Экспериментальная возможность

Указывает на то, как браузер должен загрузить изображение:

• eager: Загружает изображение немедленно независимо от того, находится оно в области просмотра или нет (является значением по умолчанию).
• lazy: Откладывает загрузку изображения до того момента, пока оно не достигнет подсчитанного расстояния области просмотра, определяемого браузером. Данное значение помогает избежать использования ресурсов сети и хранилища, необходимых для обработки изображения, пока это действительно не понадобится. В большинстве случаев использование этого аргумента улучшает производительность.

  Примечание: Загрузка откладывается только тогда, когда включён JavaScript. Это анти-трэкинг мера. Если бы пользовательский клиент поддерживал опцию отложенной загрузки изображения при отключённом JavaScript, то сайт имел бы возможность отслеживать приблизительную позицию области просмотра в течение сессии пользователя, размещая изображения на странице таким образом, чтобы сервер мог отслеживать, сколько изображений загружено и когда.

referrerpolicy Экспериментальная возможность

Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:

• no-referrer: Заголовок Referer не будет отправлен;
• no-referrer-when-downgrade: Заголовок Referer не отправляется, когда происходит переход к источнику без TLS (HTTPS). Это поведение по умолчанию для пользовательских агентов, если не указано иное;
• origin: Заголовок Referer будет содержать схему адресации ресурса (HTTP, HTTPS, FTP и т.д), хост и порт;
• origin-when-cross-origin: Переход на другие источники ограничит включённые реферальные данные схемой адресации ресурса, хостом и портом, в то время как переход из того же источника будет включать полный путь реферала;
• unsafe-url: Заголовок Referer будет включать источник и путь, но не фрагмент URL, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищённых TLS, к незащищённым источникам.

sizes

Список из одного или нескольких строк, разделённых запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:1. Условия медиа-запроса. Должно быть пропущено для последнего элемента. 2. Значения размера источника.Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. Пользовательские агенты используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом srcset, если эти источники описываются с помощью дескриптора ширины ‘w‘ (сокращение от width). Выбранный размер источника влияет на внутренний размер (en-US) изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибут srcset отсутствует или не содержит значений с дескриптором ‘w‘, то атрибут sizes не будет иметь никакого эффекта.

src

URL изображения. Этот атрибут является обязательным для элемента <img>. В браузерах, поддерживающих srcset, src обрабатывается как изображение-кандидат с дескриптором плотности пикселей 1x, если только изображение с этим дескриптором уже не определено в srcset или если srcset не содержит дескрипторы ‘w‘.

srcset

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

• дескриптором ширины или положительным целым числом, за которым сразу же следует ‘w‘. Дескриптор ширины делится на размер источника, полученный из атрибута sizes, для расчёта эффективной плотности пикселей;
• дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует ‘x‘.Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию: 1x.Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте srcset. Повторение дескрипторов (например, два источника в одном srcset с одинаковым дескриптором ‘2x‘) так же является недопустимым. Пользовательские агенты выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или пропускная способность. Смотрите наше руководство «Адаптивные изображения» для примера.

width

Внутренняя ширина (см. Внутренний размер (en-US)) изображения в пикселях.

usemap

Неполный URL (начиная с ‘#‘) карты-изображения, связанной с элементом.

Примечание: вы не можете использовать этот атрибут, если элемент <img> является потомком элемента <a> или <button>.

Устаревшие атрибуты

align

Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован — вместо этого используйте CSS-свойства float и/или vertical-align. Вы можете так же использовать CSS-свойство object-position для позиционирования изображения внутри границ элемента <img>. Допустимые значения:

• top: Аналог vertical-align: top или vertical-align: text-top;
• middle: Аналог vertical-align: -moz-middle-with-baseline;
• bottom: Отсутствует значение по умолчанию, аналог vertical-align: unset или vertical-align: initial;
• left: Аналог float: left;
• right: Аналог float: right.

border

Ширина рамки вокруг изображения. Вы должны использовать CSS-свойство border вместо этого атрибута.

hspace

Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойство margin вместо этого атрибута.

longdesc

Ссылка на более подробное описание изображения. Возможными значениями являются URL или id элемента.

Примечание: Этот атрибут упомянут в последней версии от W3C, HTML 5.2, но был удалён из живого стандарта HTML от WHATWG. У него неопределённое будущее; авторы должны использовать альтернативы WAI-ARIA, такие как aria-describedby или aria-details.

name

Имя для элемента. Вы должны использовать атрибут id вместо этого атрибута.

vspace

Отступ сверху и снизу от изображения в пикселях. Вы должны использовать CSS-свойство margin вместо этого атрибута.

<img> является замещаемым элементом; по умолчанию он имеет значение свойства display равное inline, но его размеры по умолчанию определяются внутренними значениями (см. внутренний размер (en-US)) встроенного изображения. Вы можете установить на изображение такие свойства, как border/border-radius, padding/margin, width/height и так далее.

Однако, часто бывает полезно установить для изображений свойство display в значение block, так что вы имеете максимальный контроль над стилизацией (например, margin: 0 auto не работает на изображениях с display: inline, легче размещать изображения в контексте с окружающими элементами, когда они являются блочными).

У <img> нет базовой линии, когда изображения используются в ситуации со строчным форматированием (display: inline) вместе с vertical-align: baseline, нижняя граница изображения будет размещена на базовой линии контейнера.

Вы можете использовать свойство object-position для позиционирования изображения внутри границ элемента <img> и свойством object-fit регулировать размеры изображения внутри этих границ (например, должно ли изображение помещаться в границы элемента или заполнить элемент полностью, даже если потребуется обрезка).

В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менее внутренние размеры (en-US) не обязательны. SVG-изображения, например, могут не иметь внутренних размеров, если для корня их элемента <svg> не заданы width и height.

Альтернативный текст

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

<img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
     alt="Логотип MDN - изображение динозавра с текстом MDN web docs">

Изображение-ссылка

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

<a href="https://developer. mozilla.org">
  <img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
       alt="Посетить сайт MDN">
</a>

Использование атрибута srcset

В этом примере мы добавляем атрибут srcset, содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения в src на устройствах с высоким разрешением. Изображение указанное в атрибуте src, считается 1x кандидатом в пользовательских агентах, которые поддерживают srcset.

 <img src="mdn-logo-sm.png"
      alt="MDN"
      srcset="mdn-logo-HD.png 2x">

Использование атрибутов srcset и sizes

Атрибут src игнорируется в пользовательских агентах, которые поддерживают srcset, когда добавлены дескрипторы ‘w‘. Когда условие медиавыражения (max-width: 600px) совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиавыражении), иначе будет загружено другое изображение.

 <img src="clock-demo-thumb-200.png"
      alt="Часы"
      srcset="clock-demo-thumb-200.png 200w,
          clock-demo-thumb-400.png 400w"
     >

Хотя у элементов <img> есть множество безобидных применений, они могут иметь нежелательные последствия для безопасности и приватности пользователя. Смотрите «Заголовок Referer: проблемы приватности и безопасности (en-US)» для получения дополнительной информации.

Создание значимых альтернативных описаний

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

Плохо

<img alt="image" src="penguin.jpg">

Хорошо

<img alt="Пингвин на пляже. " src="penguin.jpg">

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

• Дерево решений атрибута alt • Изображения • Веб-руководство WAI по доступности.
• Альтернативные тексты: максимальное руководство — Axess Lab.
• Как создать отличный альтернативный текст: введение | Deque.
• MDN Понимание WCAG, Руководство 1.1. объяснения.
• Понимание критерия успешного исхода 1.1.1 | W3C Понимание WCAG 2.0.

Атрибут title

Атрибут title не является приемлемой заменой атрибута alt. Кроме того, избегайте повторения значения атрибута alt в атрибуте title, объявленном на том же изображении.

Атрибут title также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент <figure> вместе с элементом <figcaption>.

• Использование HTML-атрибута title — обновлено | The Paciello Group.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Изображения в HTML.
• Адаптивные изображения.
• Элементы <picture>, <object> (en-US) и <embed>.
• Связанные с изображениями CSS-свойства: object-fit, object-position, image-orientation (en-US), image-rendering (en-US), и image-resolution (en-US).

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 4 мар. 2023 г. by MDN contributors.

Тег img

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮Назад Полный HTML Ссылки Дальше ❯

Пример

Как вставить изображение:

<img src=»smiley.gif» alt=»Smiley face»>

Подробнее примеры ниже.

---

Определение и использование

Тег <img> определяет изображение в HTML-странице.

Тег <img> имеет два обязательных атрибута: src и alt.

Примечание: Изображения технически не вставлены в страницу HTML, изображения соединены к страницам HTML. Тег <img> создает пространство для хранения указанного изображения.

Совет: Чтобы связать изображение с другим документом, просто вложить тег <img> в теги <a>.

---

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

Элемент
<img>	Да	Да	Да	Да	Да

---

Различия между HTML 4,01 и HTML5

Следующие атрибуты: выравнивание, граница, хспаце и vSpace являются навестить поддерживается в HTML5.

---

Различия между HTML и XHTML

В HTML тег <img> не имеет конечного тега.

В XHTML тег <img> должен быть правильно закрыт.

---

---

Атрибуты

= Новое в HTML5.

Атрибут	Значение	Описание
align	top bottom middle left right	Не поддерживается в HTML5. Задание выравнивания изображения в соответствии с окружающими элементами
alt	text	Задает альтернативный текст для изображения
border	pixels	Не поддерживается в HTML5. Задает ширину границы вокруг изображения
crossorigin	anonymous use-credentials	Разрешить использование изображений с веб-сайтов сторонних производителей для использования с Canvas
height	pixels	Задает высоту изображения
hspace	pixels	Не поддерживается в HTML5. Указывает пробелы в левой и правой части изображения
ismap	ismap	Определяет изображение как серверное изображение-Map
longdesc	URL	Задает URL-адрес для подробного описания изображения
sizes		Определяет размеры изображения для различных макетов страниц
src	URL	Указывает URL-адрес изображения
srcset	URL	Указывает URL-адрес изображения для использования в различных ситуациях
usemap	#mapname	Указывает изображение в виде клиентского изображения-карты
vspace	pixels	Не поддерживается в HTML5. Указывает пробелы в верхней и нижней части изображения
width	pixels	Задает ширину изображения

---

Глобальные атрибуты

Тег <img> также поддерживает Глобальные атрибуты в HTML.

---

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

Тег <img> также поддерживает Атрибуты событий в HTML.

---

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

Вставка изображений из разных местоположений
Вставка изображений из другой папки или с другого веб-узла.

Сделать гиперссылку изображения
Как добавить гиперссылку на изображение.

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

---

Похожие страницы

HTML Учебник: HTML Images

HTML DOM Ссылки: Image Object

CSS Учебник: Styling Images

---

Параметры CSS по умолчанию

В большинстве обозревателей элемент <img> будет отображаться со следующими значениями по умолчанию:

Пример

img {
    display: inline-block;
}

❮Назад Полный HTML Ссылки Дальше ❯

Популярное

html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы

---

---

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

HTML img src Attribute

❮ HTML тег

Пример

Изображение размечено следующим образом:

Попробуйте Себя »

---

Определение и использование

Обязательный атрибут src указывает URL-адрес изображения.

Существует два способа указать URL-адрес в src атрибут:

1. Абсолютный URL — Ссылки на внешнее изображение, которое размещено на другом сайте. Пример: src=»https://www.w3schools.com/images/img_girl.jpg».

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

2. Относительный URL-адрес — Ссылки на изображение, размещенное внутри веб-сайт. Здесь URL-адрес не включает доменное имя. Если URL-адрес начинается без косой черты, это будет относительно текущей страницы. Пример: src=»img_girl.jpg». Если URL-адрес начинается с косой черты, он будет относиться к домену. Пример: src=»/images/img_girl.jpg».

Совет: Почти всегда лучше использовать относительные URL-адреса. Они не сломается, если вы смените домен.

Примечание: A сломан значок ссылки и текст alt отображаются, если браузер не может найти изображение.

---

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

Атрибут
источник	Да	Да	Да	Да	Да

---

Синтаксис

Значения атрибутов

Значение	Описание
URL-адрес	URL изображения. Возможные значения: Абсолютный URL-адрес — указывает на другой веб-сайт (например, src=»http://www.example.com/image.gif») Относительный URL-адрес — указывает на файл на веб-сайте (например, src=»image.gif»)

---

❮ HTML-тег

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

ФОРУМ | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Атрибут HTML img loading

❮ Тег HTML

Пример

Добавить отложенную загрузку к изображениям внизу страницы:

jpg» alt=»Париж» loading=»ленивый»>

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

---

Определение и использование

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

Совет: Добавить loading="lazy" только к изображениям, расположенным ниже сгиба.

---

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

Атрибут
загрузка	77,0	79,0	75,0	Не поддерживается	64,0

---

Синтаксис

Значения атрибутов

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

---

❮ HTML-тег

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник по HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery1 References

2 Top 9 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

No related posts.