Revision 728493 of <img>

<h2 id=".D0.A0.D0.B5.D0.B7.D1.8E.D0.BC.D0.B5">Резюме</h2>

<p><strong><code>&lt;img&gt; — элемент HTML,&nbsp;</code></strong> предназначенный для показа изображений.</p>

<div class="note">
<p><strong>Usage note:</strong><br />
 Browsers do not always display the image referenced by the element. This is the case for non-graphical browsers (including those used by people with vision impairments), or if the user chooses not to display images, or if the browser is unable to display the image because it is invalid or an <a href="#Supported_image_formats" title="HTML/Element/Img#Supported_Image_Formats">unsupported type</a>. In these cases, the browser may replace the image with the text defined in this element's <strong>alt</strong> attribute.</p>
</div>

<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, embedded content, palpable content. If the element has a {{htmlattrxref("usemap", "img")}} attribute, it also is a part of the interactive content category.</li>
 <li><dfn>Permitted content</dfn> None, it is an {{Glossary("empty element")}}.</li>
 <li><dfn>Tag omission</dfn> Must have a start tag and must not have an end tag.</li>
 <li><dfn>Permitted parent elements</dfn> Any element that accepts embedded content.</li>
 <li><dfn>DOM interface</dfn> {{domxref("HTMLImageElement")}}</li>
</ul>

<h2 id=".D0.90.D1.82.D1.80.D0.B8.D0.B1.D1.83.D1.82.D1.8B">Атрибуты</h2>

<p><span style="line-height: 21px;">Кроме перечисленных ниже, к элементу также применимы <a href="/ru/docs/HTML/Глобальные_атрибуты" title="HTML/Глобальные атрибуты">глобальные атрибуты</a>.</span></p>

<dl>
 <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}} Use the {{cssxref('vertical-align')}} CSS property</dt>
 <dd>Задает выравнивание изображения относительно другого содержимого документа.</dd>
 <dt>{{htmlattrdef("alt")}}</dt>
 <dd>С помощью этого атрибута задается альтернативный текст для изображения. Он будет показан вместо изображения, если оно не загружено.
 <div class="note">
 <p><strong>Usage note: </strong>Omitting this attribute indicates that the image <em>is</em> a key part of the content, but no textual equivalent is available. Setting this attribute to the empty string indicates that this image is <em>not</em> a key part of the content; non-visual browsers may omit it from rendering.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
 <dd>Устанавливает ширину рамки вокруг изображения.</dd>
 <dt>{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Этот атрибут определяет, используется ли CORS при загрузке изображения. Изображения, <a href="/en-US/docs/CORS_Enabled_Image" title="CORS Enabled Image">загруженные с помощью CORS</a>, могут использоваться в элементах {{HTMLElement("canvas")}}, не ограничивая функциональность последних (<em>англ. - tainted canvas)</em>. У этого атрибута есть 2 допустимых значения:
 <dl>
  <dt>anonymous</dt>
  <dd>В этом случае перед загрузкой изображения выполняется cross-origin запрос (т.е., используется <code>Origin:</code> HTTP header). Однако, при этом не передаются параметры доступа (ни cookie, ни сертификат X.509, ни логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовок <code>Access-Control-Allow-Origin:</code> HTTP header, иначе использование изображения в {{HTMLElement("canvas")}} ограничивается.</dd>
  <dt>use-credentials</dt>
  <dd>Перед загрузкой изображения выполняется cross-origin запрос (<code>Origin:</code> HTTP header) с указанием параметров доступа (в виде cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок <code>Access-Control-Allow-Origin:</code> HTTP header, иначе использование изображения в {{HTMLElement("canvas")}} ограничивается.</dd>
 </dl>
 Если данный атрибут не задан, CORS при загрузке изображения не используется (нет заголовка <code>Origin:</code> HTTP header), и использование изображения в {{HTMLElement('canvas')}} ограничивается всегда. При неверном значении атрибута (например, при опечатке), используется значение <strong>anonymous</strong>. Для дополнительной информации обратитесь к статье <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a>.</dd>
 <dt>{{htmlattrdef("height")}}</dt>
 <dd>Задает высоту изображения {{HTMLVersionInline(5)}} в пикселях, {{HTMLVersionInline(4)}} в пикселях или процентах.</dd>
 <dt>{{htmlattrdef("hspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
 <dd>Задает горизонтальный отступ от изображения в пикселях.</dd>
 <dt>{{htmlattrdef("ismap")}}</dt>
 <dd>Булев атрибут, определяющий, является ли изображение фрагментом карты. Если задано значение true, при клике на картинку точные координаты клика передаются на сервер.
 <div class="note">
 <p><strong>Usage note: </strong>This attribute is allowed only if the <code>&lt;img&gt;</code> element is a descendant of an {{htmlelement("a")}} element with a valid {{htmlattrxref("href","a")}} attribute.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("longdesc")}}{{HTMLVersionInline(4)}} only</dt>
 <dd>Атрибут, в котором можно указать URL с более длинным, чем в <strong>alt</strong>, описанием изображения. В {{HTMLVersionInline(5)}} для этих целей рекомендуется использовать более привычный элемент {{HTMLElement("a")}}.</dd>
 <dt>{{htmlattrdef("name")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
 <dd>Задает имя элмента. Поддерживается только в {{HTMLVersionInline(4)}} для обратной совместимости. В настоящее время рекомендуется использовать атрибут <strong>id</strong>.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>Обязательный атрибут, в котором указывается URL файла изображения. В браузерах, поддерживающих элемент <strong>srcset</strong>, при наличии последнего <strong>src</strong> игнорируется.</dd>
 <dt>{{htmlattrdef("sizes")}}{{HTMLVersionInline(5)}}</dt>
 <dd>Позволяет задать размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте <strong>srcset</strong>. Значением атрибута является одна или несколько строк, разделенных запятой. В состав каждой строки входят:
 <ol>
  <li>media query: ширина экрана или плотность пикселей,</li>
  <li>относительный размер изображения, по умолчанию равняется <code>100vw</code>.</li>
 </ol>

 <p>Данный атрибут относится к экспериментальным возможностям HTML5.</p>
 </dd>
 <dt>{{htmlattrdef("srcset")}}{{HTMLVersionInline(5)}}</dt>
 <dd>Атрибут, расширяющий возможности <strong>src</strong>. Может использоваться вместо него и позволяет задавать различные URL изображений в зависимости от ширины экрана или плотности пикселей. Значением атрибута является одна или несколько строк, разделенных запятой. В состав каждой строки входят:
 <ol>
  <li>URL файла с изображением,</li>
  <li>значение ширины viewport (им должно быть положительное целое число, за которым следует символ <code>'w'</code>), по умолчанию равно бесконечности,</li>
  <li>значение плотности пикселей (им должно быть положительное число, за которым следует символом <code>'x'</code>), по умолчанию равно <code>1x</code>.</li>
 </ol>

 <p>Каждая строка должна содержать URL графического файла и хотя бы один из двух других компонентов (значение ширины и значение плотности пикселей), разделенные пробелом. Значение каждой строки в <strong>srcset</strong> должно быть уникальным.</p>
 </dd>
 <dt>{{htmlattrdef("width")}}</dt>
 <dd>Задает ширины изображения в пикселях или процентах.</dd>
 <dt>{{htmlattrdef("usemap")}}</dt>
 <dd>С помощью этого атрибута можно указать фрагмент URL (начинающийся с '#') <a href="/en-US/docs/HTML/Element/map" title="/HTML/Element/map">карты изображения</a>, ассоциированной с элементом.
 <div class="note">
 <p><strong>Usage note: </strong>You cannot use this attribute if the <code>&lt;img&gt;</code> element is a descendant of an {{htmlelement("a")}} or {{HTMLElement("button")}} element.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("vspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
 <dd>Задает вертикальный отступ от изображения в пикселях.</dd>
</dl>

<h2 id="Supported_image_formats">Поддерживаемые графические форматы</h2>

<p>Стандарт HTML не содержит требований, какие графические форматы должны поддерживаться браузером. Поэтому разные браузерные движки поддерживают разные наборы форматов. К примеру, Gecko поддерживает следующие:</p>

<ul>
 <li><a class="external" href="https://en.wikipedia.org/wiki/JPEG" title="https://en.wikipedia.org/wiki/JPEG">JPEG</a></li>
 <li><a class="external" href="https://en.wikipedia.org/wiki/Graphics_Interchange_Format" title="https://en.wikipedia.org/wiki/Graphics_Interchange_Format">GIF</a>, включая анимированные изображения</li>
 <li><a class="external" href="https://en.wikipedia.org/wiki/Portable_Network_Graphics" title="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></li>
 <li><a href="/en-US/docs/Animated_PNG_graphics" title="Animated PNG graphics">APNG</a> {{gecko_minversion_inline("1.9.2")}}</li>
 <li><a href="/en-US/docs/SVG" title="SVG">SVG</a> {{gecko_minversion_inline("2.0")}}</li>
 <li><a class="external" href="https://en.wikipedia.org/wiki/BMP_file_format" title="https://en.wikipedia.org/wiki/BMP_file_format">BMP</a></li>
 <li><a class="external" href="https://en.wikipedia.org/wiki/ICO_%28file_format%29" title="https://en.wikipedia.org/wiki/ICO_%28file_format%29">BMP ICO</a></li>
 <li><a class="external" href="https://en.wikipedia.org/wiki/ICO_%28file_format%29" title="https://en.wikipedia.org/wiki/ICO_%28file_format%29">PNG ICO</a> {{gecko_minversion_inline("9.0")}}</li>
</ul>

<div class="note">
<p><strong>Note:</strong><br />
 Support for the <a class="external" href="https://en.wikipedia.org/wiki/X_BitMap" title="https://en.wikipedia.org/wiki/X_BitMap">XBM</a> format has been removed in Gecko 1.9.2.</p>
</div>

<h2 id="Interaction_with_CSS">Interaction with CSS</h2>

<p>Regarding CSS, an <code>&lt;img&gt;</code> is a <a href="/en-US/docs/CSS/Replaced_element" title="CSS/Replaced_element">replaced element</a>. It has no baseline, meaning, when used in an inline formatting context with {{cssxref("vertical-align")}}<code>: baseline</code>, the bottom of the image will be posed on the container's baseline.</p>

<p>Depending of its type, an <em>image</em> may have an intrinsic dimension, but this is not a necessary condition: a SVG image has no intrinsic dimension, a raster image has one.</p>

<h2 id="Example_1">Example 1</h2>

<pre class="brush: html">
&lt;img src="mdn-logo-sm.png" alt="MD Logo" /&gt;
</pre>

<p><img alt="MD Logo" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" /></p>

<h2 id="Example_2.3A_Image_link">Example 2: Image link&nbsp;</h2>

<pre class="brush: html">
&lt;a href="https://developer.mozilla.org/"&gt;&lt;img src="mdn-logo-sm.png" alt="MDN Logo" /&gt; &lt;/a&gt;
</pre>

<p><a href="https://developer.mozilla.org/"><img alt="MDN Logo" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" /> </a></p>

<h2 id="Specifications" name="Specifications">Example 3: Using the <code>srcset </code>attribute</h2>

<p>The <code>src</code> attribute is ignored on browsers supporting <code>srcset</code> when this one is provided. The displayed images will depend of the type of screen.</p>

<pre class="brush: html">
 &lt;img src="mdn-logo-sm.png" 
      alt="MD Logo" 
      srcset="mdn-logo-HD.png 2x, mdn-logo-small.png 15w, mdn-banner-HD.png 100w 2x" /&gt;</pre>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'embedded-content-1.html#the-img-element', '&lt;img&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '&lt;img&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '&lt;img&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>srcset attribute</td>
   <td>{{CompatChrome(34.0)}}</td>
   <td>{{CompatGeckoDesktop("32.0")}} (behind a pref)</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOpera(21)}}</td>
   <td>{{CompatSafari(7.1)}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>srcset attribute</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>iOS 8</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{HTMLElement("object")}} and {{HTMLElement("embed")}} elements</li>
</ul>

<div>{{HTMLRef}}</div>