Auto fixes

6 files changed, 27 insertions, 27 deletions

diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
index 9e6eb3707e..3d241796d9 100644
--- a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
+++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
@@ -20,7 +20,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
   </tr>
   <tr>
    <th scope="row">Цель:</th>
-   <td>Изучить как встроить SVG (векторное) изображение на вебстраницу.</td>
+   <td>Изучить как встроить SVG (векторное) изображение на веб-страницу.</td>
   </tr>
  </tbody>
 </table>
@@ -47,14 +47,14 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
 <p><img alt="Two star images zoomed in, one crisp and the other blurry" src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p>
 
 <div class="note">
-<p><strong>Примечание</strong>: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и веркторным изображениями находится по ссылке: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> !</p>
+<p><strong>Примечание</strong>: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> !</p>
 </div>
 
 <p>Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе.</p>
 
 <h2 id="Что_такое_SVG">Что такое SVG?</h2>
 
-<p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае,  Вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей Вашего векторного изображения) и {{svgelement("mask")}} (примение маски к изображению.)</p>
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае,  Вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей Вашего векторного изображения) и {{svgelement("mask")}} (применение маски к изображению.)</p>
 
 <p>В качестве простого примера, следующий код создает круг и прямоугольник:</p>
 
@@ -134,7 +134,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
 background<code>-image: url("image.svg");
 background-size: contain;</code></pre>
 
-<p>Подобно методу <code>&lt;img&gt;</code>, описанному выше, вставка SVG с использлованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.</p>
+<p>Подобно методу <code>&lt;img&gt;</code>, описанному выше, вставка SVG с использованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.</p>
 
 <p>Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">данная статья укажет вам верное направление</a>.</p>
 
@@ -189,7 +189,7 @@ background-size: contain;</code></pre>
 
 <h2 id="Активное_изучение_поиграйте_с_SVG">Активное изучение: поиграйте с SVG</h2>
 
-<p>В этом разделе ативного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в областе <em>Input,</em> вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А еще вы можете посетить <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящен практике ваших исследовательских навыков и вашему развлечению.</p>
+<p>В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области <em>Input,</em> вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А еще вы можете посетить <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящен практике ваших исследовательских навыков и вашему развлечению.</p>
 
 <p>Если Вы где-то застряли и ваш код не работает, Вы всегда можете начать сначала, нажав кнопку <em>Reset</em>.</p>
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html
index 3bf7b57393..3dc16ecfd2 100644
--- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html
+++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html
@@ -28,7 +28,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
 <p>Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — <code>src</code> (произносится <em>эс-ар-си</em>, иногда говорят его полное название, <em>source</em>). Атрибут <code>src</code> содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута <code>href</code> для элемента {{htmlelement("a")}}.</p>
 
 <div class="note">
-<p><strong>Примечание</strong>: Перед тем как продолжить, вам стоит вспомнить про <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Абсолютные_и_относительные_URL-адреса">типы адресов URL</a>, чтобы обновить в памяти про относительные и абсолютные адресса.</p>
+<p><strong>Примечание</strong>: Перед тем как продолжить, вам стоит вспомнить про <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Абсолютные_и_относительные_URL-адреса">типы адресов URL</a>, чтобы обновить в памяти про относительные и абсолютные адреса.</p>
 </div>
 
 <p>Например, если ваше изображение называется <code>dinosaur.jpg</code>, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:</p>
@@ -49,10 +49,10 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
 
 <pre class="brush: html notranslate">&lt;img src="https://www.example.com/images/dinosaur.jpg"&gt;</pre>
 
-<p>Но это бесмыссленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера.  Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p>
+<p>Но это бессмысленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера.  Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p>
 
 <div class="warning">
-<p><strong>Внимание:</strong> Большиство изображений защищены. Не отображайте изображения на вашем сайте пока:</p>
+<p><strong>Внимание:</strong> Большинство изображений защищены. Не отображайте изображения на вашем сайте пока:</p>
 
 <ul>
  <li>вы не будете владеть изображением</li>
@@ -112,7 +112,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
 
 <h3 id="Ширина_и_высота">Ширина и высота</h3>
 
-<p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего избражение можете найти различными способами. Например, на Mac можно использовать  <kbd>Cmd</kbd> + <kbd>I</kbd>  чтобы  получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p>
+<p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего изображение можете найти различными способами. Например, на Mac можно использовать  <kbd>Cmd</kbd> + <kbd>I</kbd>  чтобы  получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p>
 
 <pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
      alt="The head and torso of a dinosaur skeleton;
@@ -126,7 +126,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
 
 <p>Это хорошая практика, в результате страница загрузится быстрее и более гладко.</p>
 
-<p>Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы сталкнётесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.</p>
+<p>Однако, вы не должны изменять размеры ваших изображений используя HTML атрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнетесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу веб-страницу.</p>
 
 <div class="note">
 <p><strong>Примечание</strong>: Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого <a href="/ru/docs/Learn/CSS">CSS</a>.</p>
diff --git a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
index d3233346a2..8cbd9191df 100644
--- a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
+++ b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
@@ -35,7 +35,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla
 
 <h2 id="Описание_проекта">Описание проекта</h2>
 
-<p>В этом задании мы представляем вам почти законченый сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:</p>
+<p>В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:</p>
 
 <h3 id="Подготовка_изображений">Подготовка изображений</h3>
 
@@ -51,7 +51,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla
 
 <p>Вместе с <code>mdn.svg</code>, эти изображения будут иконками для ссылок на другие ресурсы внутри секции <code>further-info</code>. Вы также дадите ссылку на логотип Firefox в шапке сайта. Сохраните все копии внутри той же папки, что и <code>index.html</code>.</p>
 
-<p>Затем создайте фоновую версию  <code>red-panda.jpg </code>шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распозновать их. Сохраните обе копии внутри той же папки, что и <code>index.html</code>.</p>
+<p>Затем создайте фоновую версию  <code>red-panda.jpg </code>шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распознавать их. Сохраните обе копии внутри той же папки, что и <code>index.html</code>.</p>
 
 <div class="note">
 <p><strong>Note</strong>: Следует  обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. <a href="https://tinypng.com/">tinypng.com</a> - отличный сервис для этого.</p>
@@ -65,7 +65,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla
 
 <p>Внутри элемента {{htmlelement("article")}} (сразу после открывающего тэга), вставьте ролик с YouTube по ссылке <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, используя подходящие инструменты YouTube для генерации кода. Видео должно быть 400px в ширину.</p>
 
-<h3 id="Добавление_отзывчивых_изображений_к_ссылкам_с_доп._информацей">Добавление отзывчивых изображений к ссылкам с доп. информацей</h3>
+<h3 id="Добавление_отзывчивых_изображений_к_ссылкам_с_доп._информацией">Добавление отзывчивых изображений к ссылкам с доп. информацией</h3>
 
 <p>Внутри {{htmlelement("div")}} с классом <code>further-info</code> вы найдёте четыре элемента {{htmlelement("a")}}  — каждый из которых ссылается на интересную страницу, связанную с Mozilla. Для завершения этой секции вам необходимо поместить элемент {{htmlelement("img")}} внутрь каждого элемента {{htmlelement("a")}} дополнив подходящими атрибутами {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}}.</p>
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
index 7ad838ef1b..7d32a65685 100644
--- a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
+++ b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
@@ -355,7 +355,7 @@ textarea.onkeyup = function(){
 
 <h2 id="Заключение">Заключение</h2>
 
-<p>Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить ее простым, знакомым способом, который сразу же станет актуальным, но все же намекает на некоторые из более сложных функций вовлеченных технологий. Начнем с того, что вы вряд ли будете использовать большое количество встраиваний стороннего контента, помимо встроенных карт и видео на своих страницах.</p>
+<p>Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить ее простым, знакомым способом, который сразу же станет актуальным, но все же намекает на некоторые из более сложных функций вовлеченных технологий. Начнем с того, что вы вряд ли будете использовать большое количество встраивании стороннего контента, помимо встроенных карт и видео на своих страницах.</p>
 
 <p>Существует много других технологий, которые включают в себя внедрение внешнего контента, помимо тех, которые мы обсуждали здесь. Мы видели некоторые из ранних статей, например {{htmlelement ("video")}}, {{htmlelement ("audio")}} и {{htmlelement ("img")}}, но есть и другие. Например, {{htmlelement ("canvas")}} для 2D-и 3D-графики, сгенерированной JavaScript, и {{SVGElement ("svg")}} для встраивания векторной графики. Мы рассмотрим SVG в следующей статье модуля.</p>
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html
index b65ec750e1..d08e65fc01 100644
--- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html
+++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html
@@ -107,9 +107,9 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
  <li>Загрузит изображение из списка из <code>srcset</code>, которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота. </li>
 </ol>
 
-<p>И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие <code>(max-width: 480px)</code> будет истинно, следовательно, будет выбран слот <code>440px</code>, тогда будет загружено изображение <code>elva-fairy-480w.jpg</code>, так как свойство ширины (<code>480w</code>) наиболее близко значение <code>440px</code>. Условно, изоображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.</p>
+<p>И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие <code>(max-width: 480px)</code> будет истинно, следовательно, будет выбран слот <code>440px</code>, тогда будет загружено изображение <code>elva-fairy-480w.jpg</code>, так как свойство ширины (<code>480w</code>) наиболее близко значение <code>440px</code>. Условно, изображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.</p>
 
-<p>Старые брузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута {{htmlattrxref("src", "img")}}.</p>
+<p>Старые браузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута {{htmlattrxref("src", "img")}}.</p>
 
 <div class="note">
 <p><strong>Note</strong>: В описании элемента {{htmlelement("head")}} вы найдёте строку <code>&lt;meta name="viewport" content="width=device-width"&gt;</code>: это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)</p>
@@ -129,7 +129,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
 
 <h3 id="Переключения_разрешений_Одинаковый_размер_разные_разрешения">Переключения разрешений: Одинаковый размер, разные разрешения</h3>
 
-<p>Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя <code>srcset</code> с x-дисриптором и без <code>sizes</code> — более простой синтаксис! Найти пример как это выглядит можно здесь <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (смотрите также <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p>
+<p>Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя <code>srcset</code> с x-дескриптором и без <code>sizes</code> — более простой синтаксис! Найти пример как это выглядит можно здесь <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (смотрите также <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p>
 
 <pre class="brush: html notranslate">&lt;img srcset="elva-fairy-320w.jpg,
              elva-fairy-480w.jpg 1.5x,
@@ -137,13 +137,13 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
      src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"&gt;
 </pre>
 
-<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называмое CSS-пикселями):</p>
+<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):</p>
 
 <pre class="brush: css notranslate">img {
   width: 320px;
 }</pre>
 
-<p>В этом случае, нет необходимости в <code>sizes</code> — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с <code>srcset</code>. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответсвтует) каждый CSS-пиксель, то будет загружено изображение <code>elva-fairy-320w.jpg</code> (применен x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение <code>elva-fairy-640w.jpg</code>. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.</p>
+<p>В этом случае, нет необходимости в <code>sizes</code> — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с <code>srcset</code>. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение <code>elva-fairy-320w.jpg</code> (применен x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение <code>elva-fairy-640w.jpg</code>. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.</p>
 
 <h3 id="Художественное_оформление">Художественное оформление</h3>
 
@@ -153,7 +153,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
 
 <pre class="brush: html notranslate">&lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;</pre>
 
-<p>Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code>&lt;video&gt;</code> и <code>&lt;audio&gt;</code></a>, элемент <code>&lt;picture&gt;</code> это обертка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождаении крайне важного элемента {{htmlelement("img")}}. Код <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> выглядит так:</p>
+<p>Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code>&lt;video&gt;</code> и <code>&lt;audio&gt;</code></a>, элемент <code>&lt;picture&gt;</code> это обертка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента {{htmlelement("img")}}. Код <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> выглядит так:</p>
 
 <pre class="brush: html notranslate">&lt;picture&gt;
   &lt;source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"&gt;
@@ -163,8 +163,8 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
 </pre>
 
 <ul>
- <li>Элемент <code>&lt;source&gt;</code> принимает атрибут <code>media</code>, который содержит медиа-условие; при помощи этих условий опредяется, какое изображение будет выведено. В данном случае, если ширина viewport'a составит 799px или меньше, будет выведено изображение первого элемента <code>&lt;source&gt;</code>. Если ширина составит 800px и более — второго.</li>
- <li>Атрибут <code>srcset</code> содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <code>&lt;img&gt;</code> выше, <code>&lt;source&gt;</code> может принимать атрибуты <code>srcset</code> и <code>sizes</code> с несколько предопределенными изображниями. Так вы можете не только поместить группу изображений внутри элемента <code>&lt;picture&gt;</code>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.</li>
+ <li>Элемент <code>&lt;source&gt;</code> принимает атрибут <code>media</code>, который содержит медиа-условие; при помощи этих условий определяется, какое изображение будет выведено. В данном случае, если ширина viewport'a составит 799px или меньше, будет выведено изображение первого элемента <code>&lt;source&gt;</code>. Если ширина составит 800px и более — второго.</li>
+ <li>Атрибут <code>srcset</code> содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <code>&lt;img&gt;</code> выше, <code>&lt;source&gt;</code> может принимать атрибуты <code>srcset</code> и <code>sizes</code> с несколько предопределенными изображениями. Так вы можете не только поместить группу изображений внутри элемента <code>&lt;picture&gt;</code>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.</li>
  <li>Вы всегда должны использовать элемент <code>&lt;img&gt;</code>, с <code>src</code> и <code>alt</code>, прямо перед <code>&lt;/picture&gt;</code>, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент <code>&lt;source&gt;)</code> или браузер не поддерживает элемент <code>&lt;picture&gt;</code>.</li>
 </ul>
 
@@ -173,12 +173,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
 <p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p>
 
 <div class="note">
-<p><strong>Примечание</strong>: Вам следует использовать атрибут <code>media</code> только при художественном оформлении; когда вы используюте <code>media</code>, не применяйте медиа-условия с атрибутом <code>sizes</code>.</p>
+<p><strong>Примечание</strong>: Вам следует использовать атрибут <code>media</code> только при художественном оформлении; когда вы используете <code>media</code>, не применяйте медиа-условия с атрибутом <code>sizes</code>.</p>
 </div>
 
 <h3 id="Почему_это_нельзя_сделать_посредством_CSS_и_JavaScript">Почему это нельзя сделать посредством CSS и JavaScript?</h3>
 
-<p>Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решeния, как <code>srcset</code>. Например, вы не могли бы загрузить элемент <code>&lt;img&gt;</code>, потом определить ширину viewport'а при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.</p>
+<p>Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решения, как <code>srcset</code>. Например, вы не могли бы загрузить элемент <code>&lt;img&gt;</code>, потом определить ширину viewport'а при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.</p>
 
 <ul>
 </ul>
@@ -210,7 +210,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
  <li>Напишите простую HTML-разметку.</li>
  <li>Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).</li>
  <li>Используйте элемент <code>&lt;picture&gt; </code>для работы с художественно оформленной картинкой.</li>
- <li>Обозначьте несколько разных размеров для этой картикни.</li>
+ <li>Обозначьте несколько разных размеров для этой картинки.</li>
  <li>Используйте <code>srcset</code>/<code>size</code> для описания переключения при смене размеров viewport'а</li>
 </ol>
 
@@ -227,7 +227,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
  <li><strong>Переключение разрешений</strong>: Проблема, при которой вы хотите использовать <span class="tlid-translation translation" lang="ru"><span title="">файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях</span></span>, а также дополнительно, что вы хотите использовать изображения разного разрешения для экранов с высокой/низкой плотностью. Эту проблему можно решить с помощью <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">векторной графики</a> (SVG изображений), и {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}} атрибуты.</li>
 </ul>
 
-<p>Это так же подводит нас к окончанию целого модуля <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">"Мультимедия и встраивание"</a>! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше <span class="tlid-translation translation" lang="ru"><span title="">- это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!</span></span></p>
+<p>Это так же подводит нас к окончанию целого модуля <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">"Мультимедиа и встраивание"</a>! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше <span class="tlid-translation translation" lang="ru"><span title="">- это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!</span></span></p>
 
 <h2 id="Посмотрите_так_же">Посмотрите так же</h2>
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
index e37ffaabd4..84751810da 100644
--- a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
+++ b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
@@ -86,7 +86,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 <p>Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные {{Glossary("Codec","кодеки")}}, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придется предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.</p>
 
 <div class="note">
-<p><strong>Примечание:</strong> Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года,  так что браузеры, которые не являются держетелями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.</p>
+<p><strong>Примечание:</strong> Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года,  так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.</p>
 </div>
 
 <p>Все становится немного сложнее, потому что каждый браузер не только поддерживает свой набор форматов файлов-контейнеров, но и каждый из них поддерживает свой выбор кодеков. Чтобы максимизировать вероятность того, что ваш веб-сайт или приложение будет работать в браузере пользователя, вам может потребоваться предоставить каждый медиафайл, который вы используете, в нескольких форматах. Если ваш сайт и браузер пользователя не используют общий медиаформат, ваши медиа просто не будут воспроизводиться.</p>