path: root/files/ru/web/html/element/img/index.html

---
title: <img>
slug: Web/HTML/Element/img
tags:
  - Element
  - HTML
  - Web
  - Веб
  - Графика
  - Изображение
  - Картинки
  - Справка
  - Фотографии
  - Элемент
  - мультимедиа
translation_of: Web/HTML/Element/img
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;img&gt;</code></strong> встраивает изображение в документ. Это <a href="/ru/docs/Web/CSS/Замещаемый_элемент">замещаемый элемент</a>.</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

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

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

<ul>
 <li>управление Referrer/CORS в целях безопасности. Смотрите ниже атрибуты <code>crossorigin</code> и <code>referrerpolicy</code>;</li>
 <li>настройка {{glossary("Intrinsic Size", "внутреннего размера")}} с использованием <code>width</code> и <code>hight</code>, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;</li>
 <li>адаптивные изображения рекомендуется использовать с атрибутами <code>sizes</code> и <code>srcset</code> (смотрите также элемент {{htmlelement("picture")}} и наше руководство "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>").</li>
</ul>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><dfn><a href="/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a></dfn></th>
   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Встроенный_контент">встроенный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>. Если элемент имеет атрибут <code>usemap</code>, он так же принадлежит к категории <a href="/ru/docs/Web/Guide/HTML/Content_categories#Интерактивный_контент">интерактивного контента</a>.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённое содержимое</th>
   <td>Никакое, так как это {{Glossary("empty element", "пустой элемент")}}.</td>
  </tr>
  <tr>
   <th scope="row">Пропуск тега</th>
   <td>Должен иметь открывающий тег и не должен иметь закрывающий.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые родительские элементы</th>
   <td>Любой элемент, который разрешает встроенный контент в качестве содержимого.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые роли ARIA</th>
   <td>Любые</td>
  </tr>
  <tr>
   <th scope="row">DOM-интерфейс</th>
   <td>{{domxref("HTMLImageElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Поддерживаемые_форматы_изображений">Поддерживаемые форматы изображений</h2>

<p>Стандарт HTML не содержит списка форматов изображений, которые должны поддерживаться. Поэтому разные {{glossary("user agent","пользовательские агенты")}} поддерживают разные наборы форматов.</p>

<h3 id="Firefox">Firefox</h3>

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

<ul>
 <li><a class="external" href="https://ru.wikipedia.org/wiki/JPEG">JPEG</a>;</li>
 <li><a class="external" href="https://ru.wikipedia.org/wiki/GIF">GIF</a>, включая анимированные GIF;</li>
 <li><a class="external" href="https://ru.wikipedia.org/wiki/PNG">PNG</a>;</li>
 <li><a href="/en-US/docs/Animated_PNG_graphics">APNG</a>;</li>
 <li><a href="/ru/docs/Web/SVG">SVG</a>;</li>
 <li><a class="external" href="https://ru.wikipedia.org/wiki/BMP">BMP</a>;</li>
 <li><a class="external" href="https://ru.wikipedia.org/wiki/ICO_(%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0)">BMP ICO</a>;</li>
 <li><a class="external" href="https://ru.wikipedia.org/wiki/ICO_(%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0)">PNG ICO</a>.</li>
</ul>

<h2 id="Ошибки_загрузки_изображения">Ошибки загрузки изображения</h2>

<p>Если ошибка происходит во время загрузки или отрисовки изображения и обработчик события {{htmlattrxref("onerror")}} был настроен на обработку события {{event("error")}}, тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:</p>

<ul>
 <li>атрибут <code>src</code> пустой или {{glossary("null")}};</li>
 <li>указанный {{glossary("URL")}} в атрибуте <code>src</code> совпадает с URL страницы, на которой в данный момент находится пользователь;</li>
 <li>указанное изображение каким-то образом повреждено, что препятствует его загрузке;</li>
 <li>метаданные указанного изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента <code>&lt;img&gt;</code> не было указано никаких размеров;</li>
 <li>указанное изображение имеет формат, который не поддерживается {{Glossary("user agent", "пользовательским агентом")}}.</li>
</ul>

<h2 id="Атрибуты">Атрибуты</h2>

<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">глобальные атрибуты</a>.</p>

<dl>
 <dt>{{htmlattrdef("alt")}}</dt>
 <dd>
 <p>Этим атрибутом задаётся альтернативное текстовое описание изображения.</p>

 <div class="note">
 <p><strong>Заметка:</strong> Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или <a href="#Supported_image_formats">неподдерживаемый тип</a>. В этих случаях браузер может заменить изображение текстом записанным в атрибуте <code>alt</code> элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте <code>alt</code>.</p>
 </div>

 <div class="note">
 <p><strong>Заметка:</strong> Пропуст этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (<code>alt=""</code>) указывает, что это изображение <em>не</em> является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при {{glossary("Rendering engine", "рендеринге")}}.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("crossorigin")}}</dt>
 <dd>
 <p>Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке изображения или нет. <a href="/en-US/docs/Web/HTML/CORS_enabled_image">Изображения с включённой поддержкой CORS</a> могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не будучи "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорченными</a>". Допустимые значения:</p>

 <ul>
  <li><code>anonymous</code>: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется, но параметры доступа не передаются (т.е. нет {{glossary("cookie")}}, не используется <a class="external" href="https://tools.ietf.org/html/rfc5280">стандарт X.509</a> или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовок {{httpheader("Access-Control-Allow-Origin")}}), изображение будет "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорчено</a>" и его использование будет ограничено;</li>
  <li><code>use-credentials</code>: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется вместе с передачей параметров доступа (т.е. есть {{glossary("cookie")}}, используется <a class="external" href="https://tools.ietf.org/html/rfc5280">стандарт X.509</a> или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовка {{httpheader("Access-Control-Allow-Origin")}}), изображение будет "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорчено</a>" и его использование будет ограничено.</li>
 </ul>

 <p>Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовка {{httpheader("Origin")}}), ограничивая его использование в элементе {{HTMLElement("canvas")}}. Если задан неправильно, то он обрабатывается так, как если бы использовалось значение <code>anonymous</code>. Для получения дополнительной информации смотрите "<a href="/ru/docs/Web/HTML/CORS_settings_attributes">Настройки атрибутов CORS</a>".</p>
 </dd>
 <dt>{{htmlattrdef("decoding")}}</dt>
 <dd>
 <p>Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:</p>

 <ul>
  <li><code>sync</code>: Декодировать изображение синхронно для одновременного отображения с другим контентом;</li>
  <li><code>async</code>: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;</li>
  <li><code>auto</code>: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("height")}}</dt>
 <dd>Внутренняя высота (см. {{glossary("Intrinsic size", "Внутренний размер")}}) изображения в пикселях.</dd>
 <dt>{{htmlattrdef("importance")}} {{experimental_inline}}</dt>
 <dd>
 <p>Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:</p>

 <ul>
  <li><code>auto</code>: Указывает на <strong>отсутствие предпочтений</strong>. Браузер может использовать собственную эвристику для определения приоритета изображения;</li>
  <li><code>high</code>: Указывает браузеру, что изображение имеет <strong>высокий</strong> приоритет;</li>
  <li><code>low</code>: Указывает браузеру, что изображение имеет <strong>низкий</strong> приоритет.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt>
 <dd>Этот атрибут говорит браузеру игнорировать действительный {{glossary("Intrinsic size", "внутренний размер")}} изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, а <code>narutalWidth</code>/<code>naturalHeight</code> изображения будут возвращать значения, указанные в этом атрибуте. <a class="external" href="https://github.com/ojanvafai/intrinsicsize-attribute">Объяснение</a>, <a class="external" href="https://googlechrome.github.io/samples/intrinsic-size/index.html">примеры</a>.</dd>
 <dt>{{htmlattrdef("ismap")}}</dt>
 <dd>
 <p>Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.</p>

 <div class="note">
 <p><strong>Заметка:</strong> Этот атрибут разрешён, только если элемент <code>&lt;img&gt;</code> является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом {{htmlattrxref("href","a")}}.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
 <dd>
 <p>Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:</p>

 <ul>
  <li><code>no-referrer</code>: Заголовок {{httpheader("Referer")}} не будет отправлен;</li>
  <li><code>no-referrer-when-downgrade</code>: Заголовок {{httpheader("Referer")}} не отправляется, когда происходит переход к источнику без {{glossary("TLS")}} ({{glossary("HTTPS")}}). Это поведение по умолчанию для {{glossary("user agent", "пользовательских агентов")}}, если не указано иное;</li>
  <li><code>origin</code>: Заголовок {{httpheader("Referer")}} будет содержать схему адресации ресурса (HTTP, HTTPS, {{glossary("FTP")}} и т.д), {{glossary("host", "хост")}} и {{glossary("port", "порт")}};</li>
  <li><code>origin-when-cross-origin</code>: Переход на другие источники ограничит включённые реферальные данные схемой адресации ресурса, {{glossary("host", "хостом")}} и {{glossary("port", "портом")}}, в то время как переход из того же источника будет включать полный путь реферала;</li>
  <li><code>unsafe-url</code>: Заголовок {{httpheader("Referer")}} будет включать источник и путь, но не фрагмент {{glossary("URL")}}, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищённых {{glossary("TLS")}}, к незащищённым источникам.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("sizes")}}</dt>
 <dd>
 <p>Список из одного или нескольких строк, разделённых запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:</p>

 <ol>
  <li>Условия мёда-запроса. Оно должно быть пропущено для последнего элемента.</li>
  <li>Значения размера источника.</li>
 </ol>

 <p>Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. {{glossary("user agent", "Пользовательские агенты")}} используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом <code>srcset</code>, если эти источники описываются с помощью дескриптора ширины '<code>w</code>' (сокращение от width). Выбранный размер источника влияет на {{glossary("intrinsic size", "внутренний размер")}} изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибут <code>srcset</code> отсутствует или не содержит значений с дескриптором '<code>w</code>', то атрибут <code>sizes</code> не будет иметь никакого эффекта.</p>
 </dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>{{glossary("URL")}} изображения. Этот атрибут является обязательным для элемента <code>&lt;img&gt;</code>. В браузерах, поддерживающих <code>srcset</code>, <code>src</code> обрабатывается как изображение-кандидат с дескриптором плотности пикселей <code>1x</code>, если только изображение с этим дескриптором уже не определено в <code>srcset</code> или если <code>srcset</code> не содержит дескрипторы '<code>w</code>'.</dd>
 <dt>{{htmlattrdef("srcset")}}</dt>
 <dd>
 <p>Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможным источников изображения для использования {{glossary("user agent", "пользовательскими агентами")}}. Каждая строка состоит из:</p>

 <ol>
  <li>{{glossary("URL")}} изображения.</li>
  <li>Необязательного, пробела, сопровождаемого:
   <ul>
    <li>дескриптором ширины или положительным целым числом, за которым сразу же следует '<code>w</code>'. Дескриптор ширины делится на размер источника, полученный из атрибута <code>sizes</code>, для расчёта эффективной плотности пикселей;</li>
    <li>дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует '<code>x</code>'.</li>
   </ul>
  </li>
 </ol>

 <p>Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию: <code>1x</code>.</p>

 <p>Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте <code>srcset</code>. Повторение дескрипторов (например, два источника в одном <code>srcset</code> с одинаковым дескриптором '<code>2x</code>') так же является недопустимым.</p>

 <p>{{glossary("user agent", "Пользовательские агенты")}} выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или {{glossary("bandwidth", "пропускная способность")}}. Смотрите наше руководство "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>" для примера.</p>
 </dd>
 <dt>{{htmlattrdef("width")}}</dt>
 <dd>Внутренняя ширина (см. {{glossary("intrinsic size", "Внутренний размер")}}) изображения в пикселях.</dd>
 <dt>{{htmlattrdef("usemap")}}</dt>
 <dd>
 <p>Неполный {{glossary("URL")}} (начиная с '<code>#</code>') <a href="/en-US/docs/Web/HTML/Element/map">карты-изображения</a>, связанной с элементом.</p>

 <div class="note">
 <p><strong>Заметка:</strong> Вы не можете использовать этот атрибут, если элемент <code>&lt;img&gt;</code> является потомком элемента {{htmlelement("a")}} или {{HTMLElement("button")}}.</p>
 </div>
 </dd>
</dl>

<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3>

<dl>
 <dt>{{htmlattrdef("align")}} {{Obsolete_Inline}}</dt>
 <dd>
 <p>Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован - вместо этого используйте CSS-свойства {{cssxref("float")}} и/или {{cssxref("vertical-align")}}. Вы можете так же использовать CSS-свойство {{cssxref("object-position")}} для позиционирования изображения внутри границ элемента <code>&lt;img&gt;</code>. Допустимые значения:</p>

 <ul>
  <li><code>top</code>: Аналог <code>vertical-align: top</code> или <code>vertical-align: text-top</code>;</li>
  <li><code>middle</code>: Аналог <code>vertical-align: -moz-middle-with-baseline</code>;</li>
  <li><code>bottom</code>: Отсутствует значение по умолчанию, аналог <code>vertical-align: unset</code> или <code>vertical-align: initial</code>;</li>
  <li><code>left</code>: Аналог <code>float: left</code>;</li>
  <li><code>right</code>: Аналог <code>float: right</code>.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("border")}} {{Obsolete_Inline}}</dt>
 <dd>Ширина рамки вокруг изображения. Вы должны использовать CSS-свойство {{cssxref('border')}} вместо этого атрибута.</dd>
 <dt>{{htmlattrdef("hspace")}} {{Obsolete_Inline}}</dt>
 <dd>Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойство {{cssxref('margin')}} вместо этого атрибута.</dd>
 <dt>{{htmlattrdef("longdesc")}} {{Obsolete_Inline}}</dt>
 <dd>
 <p>Ссылка на более подробное описание изображения. Возможными значениями являются {{glossary("URL")}} или {{htmlattrxref("id")}} элемента.</p>

 <div class="note">
 <p><strong>Заметка:</strong> Этот атрибут упомянут в последней версии от {{glossary("W3C")}}, <a class="external" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, но был удалён из <a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">живого стандарта HTML</a> от {{glossary("WHATWG")}}. У него неопределённое будущее; авторы должны использовать альтернативы {{glossary("WAI")}}-{{glossary("ARIA")}}, такие как <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a> или <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details">aria-details</a>.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt>
 <dd>Имя для элемента. Вы должны использовать атрибут {{htmlattrxref("id")}} вместо этого атрибута.</dd>
 <dt>{{htmlattrdef("vspace")}} {{Obsolete_Inline}}</dt>
 <dd>Отступ сверху и снизу от изображения в пикселях. Вы должны использовать CSS-свойство {{cssxref('margin')}} вместо этого атрибута.</dd>
</dl>

<h2 id="Взаимодействие_с_CSS">Взаимодействие с CSS</h2>

<p><code>&lt;img&gt;</code> является <a href="/ru/docs/Web/CSS/Замещаемый_элемент">замещаемым элементом</a>; по умолчанию он имеет значение свойства {{cssxref("display")}} равное <code>inline</code>, но его размеры по умолчанию определяются внутренними значениями (см. {{glossary("Intrinsic Size", "внутренний размер")}}) встроенного изображения. Вы можете установить на изображение такие свойства, как {{cssxref("border")}}/{{cssxref("border-radius")}}, {{cssxref("padding")}}/{{cssxref("margin")}}, {{cssxref("width")}}/{{cssxref("height")}} и так далее.</p>

<p>Однако, часто бывает полезно установить для изображений свойство {{cssxref("display")}} в значение <code>block</code>, так что вы имеете максимальный контроль над стилизацией (например, <code>margin: 0 auto</code> не работает на изображениях с <code>display: inline</code>, легче размещать изображения в контексте с окружающими элементами, когда они являются <a href="/ru/docs/Web/HTML/Block-level_elements">блочными</a>).</p>

<p>У <code>&lt;img&gt;</code> нет базовой линии, когда изображения используются в ситуации со строчным форматированием (<code>display: inline</code>) вместе с {{cssxref("vertical-align")}}<code>: baseline</code>, нижняя граница изображения будет размещена на базовой линии контейнера.</p>

<p>Вы можете использовать свойство {{cssxref("object-position")}} для позиционирования изображения внутри границ элемента <code>&lt;img&gt;</code> и свойством {{cssxref("object-fit")}} регулировать размеры изображения внутри этих границ (например, должно ли изображение помещаться в границы элемента или заполнить элемент полностью, даже если потребуется обрезка).</p>

<p>В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менее {{glossary("Intrinsic Size", "внутренние размеры")}} не обязательны. {{glossary("SVG")}}-изображения, например, могут не иметь внутренних размеров, если для корня их элемента {{SVGElement("svg")}} не заданы <code>width</code> и <code>height</code>.</p>

<h2 id="Примеры">Примеры</h2>

<h3 id="Альтернативный_текст">Альтернативный текст</h3>

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

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

<p>{{ EmbedLiveSample('Альтернативный_текст', '100%', '70') }}</p>

<h3 id="Изображение-ссылка">Изображение-ссылка</h3>

<p>Этот пример основан на предыдущем и показывает как превратить изображение в ссылку. Это очень просто сделать так — вы вставляете тег <code>&lt;img&gt;</code> внутрь элемента {{HTMLElement("a")}}. Также вы должны изменить альтернативный текст, чтобы он описывал назначение ссылки.</p>

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

<p>{{ EmbedLiveSample('Изображение-ссылка', '100%', '70') }}</p>

<h3 id="Использование_атрибута_srcset">Использование атрибута srcset</h3>

<p>В этом примере мы добавляем атрибут <code>srcset</code>, содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения в <code>src</code> на устройствах с высоким разрешением. Изображение указанное в атрибуте <code>src</code>, считается <code>1x</code> кандидатом в {{glossary("user agent", "пользовательских агентах")}}, которые поддерживают <code>srcset</code>.</p>

<pre class="brush: html"> &lt;img src="mdn-logo-sm.png"
      alt="MDN"
      srcset="mdn-logo-HD.png 2x"&gt;
</pre>

<h3 id="Использование_атрибутов_srcset_и_sizes">Использование атрибутов srcset и sizes</h3>

<p>Атрибут <code>src</code> игнорируется в {{glossary("user agent", "пользовательских агентах")}}, которые поддерживают <code>srcset</code>, когда добавлены дескрипторы '<code>w</code>'. Когда условие медиавыражения <code>(max-width: 600px)</code> совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиавыражении), иначе будет загружено другое изображение.</p>

<pre class="brush: html"> &lt;img src="clock-demo-thumb-200.png"
      alt="Часы"
      srcset="clock-demo-thumb-200.png 200w,
          clock-demo-thumb-400.png 400w"
      sizes="(max-width: 600px) 200px, 50vw"&gt;
</pre>

<h2 id="Проблемы_безопасности_и_приватности">Проблемы безопасности и приватности</h2>

<p>Хотя у элементов <code>&lt;img&gt;</code> есть множество безобидных применений, они могут иметь нежелательные последствия для безопасности и приватности пользователя. Смотрите "<a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Заголовок Referer: проблемы приватности и безопасности</a>" для получения дополнительной информации.</p>

<h2 id="Проблемы_доступности">Проблемы доступности</h2>

<h3 id="Создание_значимых_альтернативных_описаний">Создание значимых альтернативных описаний</h3>

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

<h4 id="Плохо">Плохо</h4>

<pre class="brush: html example-bad">&lt;img alt="image" src="penguin.jpg"&gt;
</pre>

<h4 id="Хорошо">Хорошо</h4>

<pre class="brush: html example-good">&lt;img alt="Пингвин на пляже." src="penguin.jpg"&gt;
</pre>

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

<ul>
 <li><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">Дерево решений атрибута alt • Изображения • Веб-руководство WAI по доступности</a>.</li>
 <li><a href="https://axesslab.com/alt-texts/">Альтернативные тексты: максимальное руководство — Axess Lab</a>.</li>
 <li><a href="https://www.deque.com/blog/great-alt-text-introduction/">Как создать отличный альтернативный текст: введение | Deque</a>.</li>
 <li><a href="/ru/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Понимание WCAG, Руководство 1.1. объяснения</a>.</li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Понимание критерия успешного исхода 1.1.1 | W3C Понимание WCAG 2.0</a>.</li>
</ul>

<h3 id="Атрибут_title">Атрибут title</h3>

<p>Атрибут {{htmlattrxref("title")}} не является приемлемой заменой атрибута <code>alt</code>. Кроме того, избегайте повторения значения атрибута <code>alt</code> в атрибуте <code>title</code>, объявленном на том же изображении.</p>

<p>Атрибут {{htmlattrxref("title")}} также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент {{HTMLElement("figure")}} вместе с элементом {{HTMLElement("figcaption")}}.</p>

<ul>
 <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Использование HTML-атрибута title - обновлено | The Paciello Group</a>.</li>
</ul>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
   <td>{{Spec2('Referrer Policy')}}</td>
   <td>Добавлен атрибут <code>referrerpolicy</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '&lt;img&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '&lt;img&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '&lt;img&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>
    <p> </p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<p>{{Compat("html.elements.img")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML">Изображения в HTML</a>.</li>
 <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>.</li>
 <li>Элементы {{HTMLElement("picture")}}, {{HTMLElement("object")}} и {{HTMLElement("embed")}}.</li>
 <li>Связанные с изображениями CSS-свойства: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, и {{cssxref("image-resolution")}}.</li>
</ul>