initial commit

4 files changed, 577 insertions, 0 deletions

diff --git a/files/ru/web/api/htmlimageelement/decoding/index.html b/files/ru/web/api/htmlimageelement/decoding/index.html
new file mode 100644
index 0000000000..f1c6109bcb
--- /dev/null
+++ b/files/ru/web/api/htmlimageelement/decoding/index.html
@@ -0,0 +1,67 @@
+---
+title: HTMLImageElement.decoding
+slug: Web/API/HTMLImageElement/decoding
+translation_of: Web/API/HTMLImageElement/decoding
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <strong><code>decoding</code></strong> интерфейса {{domxref("HTMLImageElement")}} предназначено для указания браузеру, как он должен декодировать изображение.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>refStr</var> = <var>imgElem</var>.decoding;
+<var>imgElem</var>.decoding = <var>refStr</var>;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>{{domxref("DOMString")}} предоствляет указания по декодированию. Возможные значения:</p>
+
+<dl>
+ <dd>
+ <ul>
+  <li><strong><code>sync</code></strong>: Декодировать изображение синхронно для отображения одновременно с другим содержимым.</li>
+  <li><strong><code>async</code></strong>: Декодировать содержимое асинхронно для уменьшения задержки в отображении другого содержимого.</li>
+  <li><strong><code>auto</code></strong>: Режим по умолчанию, который не отдаёт предпочтения ни одному режиму декодирования, предоставляя браузеру решать, какой режим для пользователя оптимальнее.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js;highlight:[3]">var img = new Image();
+img.decoding = 'sync';
+img.src = 'img/logo.png';
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</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('HTML WHATWG', 'embedded-content.html#dom-img-decoding', 'decoding')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и пришлите нам pull запрос.</div>
+
+<p>{{Compat("api.HTMLImageElement.decoding")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/img">&lt;img&gt;: The Image Embed element</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/htmlimageelement/image/index.html b/files/ru/web/api/htmlimageelement/image/index.html
new file mode 100644
index 0000000000..1c96e0f2d1
--- /dev/null
+++ b/files/ru/web/api/htmlimageelement/image/index.html
@@ -0,0 +1,36 @@
+---
+title: Image()
+slug: Web/API/HTMLImageElement/Image
+translation_of: Web/API/HTMLImageElement/Image
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<div></div>
+
+<div>Конструктор <strong>Image()</strong> создает новый экземпляр HTMLImageElement. Эквивалентно document.createElement ('img').</div>
+
+<h3 id="Конструктор_элемента_Image">Конструктор элемента Image</h3>
+
+<p><span style="line-height: 1.572;">Имеет два необязательных параметра: <strong>ширину</strong> и <strong><span style="line-height: 1.572;"><strong>высоту</strong></span></strong>: </span></p>
+
+<pre class="brush: js">Image([unsigned long <strong>width</strong>, unsigned long <strong>height</strong>])</pre>
+
+<h3 id="Пример"><span style="line-height: 1.572;">Пример</span></h3>
+
+<h5 id="Исходный_код">Исходный код:</h5>
+
+<pre class="brush: js">var img = new Image(100, 200);
+img.src = 'picture.jpg';
+console.log(img);</pre>
+
+<h5 id="Результат">Результат:</h5>
+
+<pre class="brush: html">&lt;img width="100" height="200" src="picture.jpg"&gt;</pre>
+
+
+
+<div class="note">
+<p>Примечание: этот конструктор существует только для истории, и возвращает экземпляр <a href="/en-US/docs/Web/API/HTMLImageElement" style="line-height: 1.572;" title="en/DOM/HTMLImageElement">HTMLImageElement</a><span style="line-height: 1.572;"> точно также, как и</span><span style="line-height: 1.572;"><code> </code></span><code style="font-size: 14px;">document.createElement('img')</code><span style="line-height: 1.572;">.</span></p>
+</div>
+
+<div></div>
diff --git a/files/ru/web/api/htmlimageelement/index.html b/files/ru/web/api/htmlimageelement/index.html
new file mode 100644
index 0000000000..9aedb53ca9
--- /dev/null
+++ b/files/ru/web/api/htmlimageelement/index.html
@@ -0,0 +1,348 @@
+---
+title: HTMLImageElement
+slug: Web/API/HTMLImageElement
+translation_of: Web/API/HTMLImageElement
+---
+<div>{{ApiRef}}</div>
+
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Интерфейс <code><strong>HTMLImageElement</strong></code>  предоставляет специальные свойства и методы  (расширяя обычный интерфейс {{domxref("HTMLElement")}}  ) для управления вёрсткой и отображением элемента {{HTMLElement("img")}}. </p>
+
+<p>{{InheritanceDiagram(600,120)}} </p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>align</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Указывает расположение картинки зависящее от окружающего контента. Возможные значения:  <code>"left"</code>, <code>"right"</code>, <code>"justify"</code>, и <code>"center"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>alt</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Повторяет аттрибут HTML {{htmlattrxref("alt", "img")}} указывающий на запасной контекст картинки.</td>
+  </tr>
+  <tr>
+   <td><code>border</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Ширина рамки вокруг картинки. Устарело и вместо него следует использовать свойство CSS {{cssxref("border")}}.</td>
+  </tr>
+  <tr>
+   <td><code>complete</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Возвращает true, если браузер закончил загрузку картинки с ошибкой или успешно. Также возвращает true, когда не установлено значение  {{domxref("HTMLImageElement.src", "src")}}, во всех остальных случаях - false.</td>
+  </tr>
+  <tr>
+   <td><code>crossOrigin</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Является {{domxref("DOMString")}}, с настройками CORS для этого элемента изображения. Дополнительная информация: <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes">Атрибуты настроек CORS</a>.  </td>
+  </tr>
+  <tr>
+   <td><code>currentSrc</code>{{readonlyInline}}{{experimental_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Возвращает {{domxref("DOMString")}} с URL-адресом текущего изображения (что может измениться, например, в ответ на запросы мультимедиа).</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Отражает атрибут {{htmlattrxref ("height", "img")}} HTML, указывая визуализированную высоту изображения в пикселях CSS.</td>
+  </tr>
+  <tr>
+   <td><code>hspace</code> {{obsolete_inline}}</td>
+   <td><code>long</code></td>
+   <td>Space to the left and right of the image.</td>
+  </tr>
+  <tr>
+   <td><code>isMap</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.</td>
+  </tr>
+  <tr>
+   <td><code>longDesc</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>URI of a long description of the image.</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>A reference to a low-quality (but faster to load) copy of the image.</td>
+  </tr>
+  <tr>
+   <td><code>name</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>naturalHeight</code> {{readonlyInline}}</td>
+   <td><code>unsigned long</code></td>
+   <td>Intrinsic height of the image in CSS pixels, if it is available; otherwise, <code>0</code>.</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code> {{readonlyInline}}</td>
+   <td><code>unsigned long</code></td>
+   <td>Intrinsic width of the image in CSS pixels, if it is available; otherwise, <code>0</code>.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{htmlattrxref("src")}} HTML attribute, containing the URL of the image.</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>useMap</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.</td>
+  </tr>
+  <tr>
+   <td><code>vspace</code> {{obsolete_inline}}</td>
+   <td><code>long</code></td>
+   <td>Space above and below the image.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Reflects the {{htmlattrxref("width", "img")}} HTML attribute, indicating the rendered width of the image in CSS pixels.</td>
+  </tr>
+  <tr>
+   <td><code>x</code> {{readonlyInline}}{{non-standard_inline}}</td>
+   <td><code>long</code></td>
+   <td>The horizontal offset from the nearest layer. (Mimic an old Netscape 4 behavior)</td>
+  </tr>
+  <tr>
+   <td><code>y</code> {{readonlyInline}}{{non-standard_inline}}</td>
+   <td><code>long</code></td>
+   <td>The vertical offset from the nearest layer. (Mimic an old Netscape 4 behavior)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.Image()")}}</dt>
+ <dd>The <code>Image()</code> constructor, taking two optional <code>unsigned</code> <code>long</code>, the width and the height of the resource, creates an instance of <code>HTMLImageElement</code> not inserted in a DOM tree.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var img1 = new Image(); // Конструктор HTML5
+img1.src = 'image1.png';
+img1.alt = 'alt';
+document.body.appendChild(img1);
+
+var img2 = document.createElement('img'); // Используем <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl" title="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl">HTMLImageElement</a>
+img2.src = 'image2.jpg';
+img2.alt = 'alt text';
+document.body.appendChild(img2);
+
+// выбираем первое изображение на странице
+alert(document.images[0].src);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following property has been added: <code>srcset</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>A constructor (with 2 optional parameters) has been added.<br>
+    The following properties are now obsolete: <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, and <code>longdesc</code>.<br>
+    The following properties are now <code>unsigned long</code>, instead of <code>long</code>: <code>height</code>, and <code>width</code>.<br>
+    The following properties have been added: <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code>, and <code>complete</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>lowSrc</code> property has been removed.<br>
+    The following properties are now <code>long</code>, instead of <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code>, and <code>vspace</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Общая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Общая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The <code>x</code> and <code>y</code> properties were removed in Gecko 7.0 {{geckoRelease("7.0")}} but restored in Gecko 14.0 {{geckoRelease("14.0")}} for compatibility reasons.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Элемент HTML, реализующий этот интерфейс: {{HTMLElement("img")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlimageelement/srcset/index.html b/files/ru/web/api/htmlimageelement/srcset/index.html
new file mode 100644
index 0000000000..b4a817c4d3
--- /dev/null
+++ b/files/ru/web/api/htmlimageelement/srcset/index.html
@@ -0,0 +1,126 @@
+---
+title: HTMLImageElement.srcset
+slug: Web/API/HTMLImageElement/srcset
+translation_of: Web/API/HTMLImageElement/srcset
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary">{{domxref("HTMLImageElement")}} свойство <code><strong>srcset</strong></code> </span>это строка, которая определяет один или несколько<span class="seoSummary"> <strong>строк с источниками изображений</strong>, разделённые запятыми (<code>,</code>) и условия для их использования.</span> Каждая строка предлагаемого изображения содержит <strong>URL</strong> картинки и опциональные <strong>ширину</strong> или <strong>пиксельную плотность</strong> которые указывают при каких условия это изображение должно быть использовано вместо основной картинки обозначенной свойством {{domxref("HTMLImageElement.src", "src")}}.</p>
+
+<p>Свойство <code>srcset</code>, вместе с {{domxref("HTMLImageElement.sizes", "sizes")}}, критически важный атрибут при разработке адаптивных веб-сайтов, ведь они могут использоваться вместе для создания адаптивных страниц, использующих подходящие изображения при определённых условиях.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>htmlImageElement</em>.srcset = <em>imageCandidateStrings</em>;
+let <em>srcset</em> = <em>htmlImageElement</em>.srcset;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>A {{domxref("USVString")}} containing a comma-separated list of one or more image candidate strings to be used when determining which image resource to present inside the {{HTMLElement("img")}} element represented by the <code>HTMLImageElement</code><em>.</em></p>
+
+<p>Each image candidate string must begin with a valid URL referencing a non-interactive graphic resource. This is followed by a comma (<code>,</code>) character and then a condition descriptor that indicates the circumstances in which the indicated image should be used. Space characters, other than the whitespace separating the URL and the corresponding condition descriptor, are ignored; this includes both leading and trailing space, as well as space before or after each comma.</p>
+
+<p>If the condition descriptor is not provided (in other words, the image candidate provides only a URL), the candidate is used as the fallback if none of the other candidates match. Otherwise, the condition descriptor may take one of two forms:</p>
+
+<ul>
+ <li>To indicate that the image resource specified by the image candidate string should be used when the image is being rendered with a particular width in pixels, provide a <strong>width descriptor</strong> comprised the number giving that width in pixels followed by the lower case letter "w". For example, to provide an image resource to be used when the renderer needs a 450 pixel wide image, use the width descriptor string <code>450w</code>. The specified width must be a positive, non-zero, integer, and <em>must</em> match the intrinsic width of the referenced image.</li>
+ <li>Alternatively, you can use a <strong>pixel density descriptor</strong>, which specifies the condition in which th corresponding image resource should be used as the display's pixel density. This is written by stating the pixel density as a positive, non-zero floating-point value followed by the lower-case letter "x". As an example, to state that the corresponding  image should be used when the pixel density is double the standard density, you can give the pixel density descriptor <code>2x</code> or <code>2.0x</code>.</li>
+</ul>
+
+<p>You may mix and match the two types of descriptor. You must not, however, provide multiple image candidate strings that specify the same descriptor. All of the following are valid image candidate strings:</p>
+
+<pre>"images/team-photo.jpg 1x, images/team-photo-retina.jpg 2x, images/team-photo-full 2048w"</pre>
+
+<p>This string provides versions of an image to be used at the standard pixel density (<code>1x</code>) as well as double that pixel density (<code>2x</code>). Also available is a version of the image for use at a width of 2048 pixels (<code>2048w</code>).</p>
+
+<pre>"header640.png 640w, header960.png 960w, header1024.png 1024w, header.png"</pre>
+
+<p>This string provides versions of a header image to use when the {{Glossary("user agent", "user agent's")}} renderer needs an image of width 640px, 960px, or 1024px. An additional, fallback image candidate is provided without any condition at all, to be used for any other width.</p>
+
+<pre>"icon32px.png 32w, icon64px.png 64w, icon-retina.png 2x icon-ultra.png 3x icon.svg"</pre>
+
+<p>Here, options are provided for an icon at widths of 32px and 64px, as well as at pixel densities of 2x and 3x. A fallback image is provided as an SVG file that should be used in all other cases. Notice that the candidates may use different image types.</p>
+
+<p>For more information on what image formats are available for use in the {{HTMLElement("img")}} element, see <a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>The HTML below indicates that the default image is the 200 pixel wide version of the clock image we use in several places throughout our documentation. Also specified by the <code>srcset</code> attribute is that the 200-pixel version should be used for 1x displays while the 400-pixel version should be used for 2x displays.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+  &lt;img src="/files/16797/clock-demo-200px.png"
+       alt="Clock"
+       srcset="/files/16864/clock-demo-200px.png 1x, /files/16797/clock-demo-400px.png 2x"&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>The CSS simply specifies that the image and its surrounding box should be 200 pixels square and should have a simple border around it. Also provided is the {{cssxref("word-break")}} attribute, using the <code>break-all</code> value to tell the browser to wrap the string within the width available regardless of where in the string the wrap must occur.</p>
+
+<pre class="brush: css">.box {
+  width: 200px;
+  border: 2px solid rgba(150, 150, 150, 255);
+  padding: 0.5em;
+  word-break: break-all;
+}
+
+.box img {
+  width: 200px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>The following code is run within a handler for the {{domxref("Window", "window")}}'s {{domxref("Window.load_event", "load")}} event.  It uses the image's  {{domxref("HTMLImageElement.currentSrc", "currentSrc")}} property to fetch and display the URL selected by the browser from the <code>srcset</code>.</p>
+
+<pre class="brush: js">let box = document.querySelector(".box");
+let image = box.querySelector("img");
+
+let newElem = document.createElement("p");
+newElem.innerHTML = `Image: &lt;code&gt;${image.currentSrc}&lt;/code&gt;`;
+box.appendChild(newElem);
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>In the displayed output below, the selected URL will correspond with whether your display results in selecting the 1x or the 2x version of the image. If you happen to have both standard and high density displays, try moving this window between them and reloading the page to see the results change.</p>
+
+<p>{{EmbedLiveSample("Example", 640, 320)}}</p>
+
+<p>For additional examples, see our guide to <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive images</a>.</p>
+
+<h2 id="Спецификации">Спецификации</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', '#dom-img-srcset', 'HTMLImageElement.srcset')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная поддержка</h2>
+
+
+
+<p>{{Compat("api.HTMLImageElement.srcset")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></li>
+</ul>