Адаптивные изображения - Изучение веб-разработки

Адаптивные изображения
======================

* Назад
* Обзор: Multimedia and embedding
* Далее

В данной статье мы изучим концепцию гибких (responsive) изображений — таких, которые отображаются хорошо на устройствах с сильно отличающимися размерами экрана, разрешением, и другими характеристиками — и рассмотрим инструменты, которые имеются в HTML для их реализации. Responsive images - только одна часть (и хорошее начало) гибкого веб-дизайна, темы, которая будет рассмотрена подробнее в будущем модуле на тему CSS.

| Требования: | Предполагается, что вы уже знакомы с основами HTML и умеете добавлять статичные изображения на веб-страницу. |
| --- | --- |
| Цель: | Узнать, как использовать такие элементы, как `srcset` и `<picture>` чтобы обеспечить работу гибких изображения на веб-сайтах. |

Почему адаптивные изображения?
------------------------------

Какую проблему мы пытаемся решить адаптивными изображениями? Давайте рассмотрим типичный сценарий. Обычный веб-сайт может содержать изображение в заголовке, для улучшения визуального восприятия пользователем, а также несколько изображений в контенте под ним. Вы, вероятно, захотите, чтобы изображение в заголовке занимало всю ширину окна, а изображения в контенте размещались где-то внутри колонки с контентом. Давайте посмотрим на следующий простой пример:

![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.](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images/picture-element-wide.png)

Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть посмотреть демо-пример и найти исходный код на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:

* Содержимому тега `main` задана максимальная ширина 1200 пикселей. Если ширина окна браузера больше этого значения, то содержимое сайта остаётся на 1200 пикселей и центрирует себя в доступном пространстве. Если ширина окна браузера меньше, содержимое устанавливается в 100% от ширины экрана.
* Изображение в шапке всегда будет оставаться в центре тега header вне зависимости от ширины браузера. Если сайт будет просматриваться на узких экранах, то важные детали в центре изображения (люди) всё равно будут видны. Все, что выходит за пределы ширины экрана будет скрыто. Высота шапки 200 пикселей.
* Изображения в содержимом заданы так, что если ширина body становится меньше чем ширина изображения, то изображения начинают сжиматься и остаются всегда внутри body и не выступают за его пределы.

Всё хорошо, однако проблемы начинаются, когда вы просматриваете сайт на устройстве с небольшим экраном – шапка внизу выглядит нормально, но теперь она занимает значительную высоту экрана; первое изображение в контенте напротив, выглядит ужасно – при таком размере едва можно рассмотреть людей!

![Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images/non-responsive-narrow.png)

Было бы намного лучше показывать обрезанную версию изображения, на котором видны важные детали снимка, когда сайт отображается на узком экране, и, возможно, что-то среднее между обрезанным и оригинальным изображениями для экранов средней ширины, таких как планшеты – это известно как **art direction problem**.

Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется **resolution switching problem** — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали векторную графику, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.

Сложность в том, что для некоторых устройств с большим разрешением экрана нужны изображения большего чем ожидается размера, чтобы чётче отображалось. По сути это всё одна задача в разных условиях.

Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше.

Такого рода проблемы не было в начале существования веба, в первой половине 90-х годов – тогда единственными устройствами для просмотра веб-страниц были настольные компьютеры и ноутбуки, так что создатели браузеров и авторы спецификаций даже не задумывались о создании решения. *Технологии отзывчивых изображений* были реализованы недавно для решения проблем, указанных выше. Они позволяют вам предоставить браузеру несколько изображений, каждое из которых отображает одно и то же, но содержит разное количество пикселей (*resolution switching*), или разные изображения с отдельными областями основного изображения (*art direction*).

**Примечание:** Новые возможности обсуждаются в статье — `srcset`/`sizes`/`<picture>` — все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).

Как сделать изображения отзывчивыми?
------------------------------------

В этом разделе рассмотрим две вышеописанные проблемы и покажем, как их решить с использованием инструментов HTML `<img>`. Как показано на примере выше - изображение в заголовке используется только как украшение сайта и установлено как фоновое с помощью CSS. CSS больше подходит для адаптивного дизайна чем HTML, об этом поговорим в следующем модуле о CSS.

### Разные разрешения: Разные размеры

Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент `<img>` обычно позволяет указать только один путь к файлу:

```html
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />
```

Однако есть два новых атрибута — `srcset` и `sizes` — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: responsive.html (также смотри источник кода).

```html
<img
 srcset="
 elva-fairy-320w.jpg 320w,
 elva-fairy-480w.jpg 480w,
 elva-fairy-800w.jpg 800w
 "
 sizes="(max-width: 320px) 280px,
 (max-width: 480px) 440px,
 800px"
 src="elva-fairy-800w.jpg"
 alt="Elva dressed as a fairy" />
```

Атрибуты `srcset` и `sizes` кажутся сложными, но они не так плохи, если вы отформатируете их как в примере выше: каждая часть значения атрибута с новой строки. Значение состоит из списка элементов через запятую, каждый из которых включает три части. Давайте рассмотрим эти значения:

**`srcset`** включает названия изображений, среди которых браузер выберет нужное и их размеры. Перед каждой запятой части значения в таком порядке:

1. Название изображения (`elva-fairy-480w.jpg`.)
2. Пробел.
3. **Актуальная ширина картинки** **в пикселах** (`480w`) — заметьте, что здесь используется `w` вместо `px`, как вы могли ожидать. Эта настоящая ширина изображения, которая может быть просмотрена в свойствах картинки на вашем компьютере (например, на Mac нужно открыть картинку в Finder и нажать
 `Cmd`
 +
 `I`
 , чтобы вывести информацию на экран).

**`sizes`** определяет перечень медиавыражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиавыражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:

1. **Медиа-условие** (`(max-width:480px)`) — вы можете больше узнать об этом в CSS topic, но сейчас давайте скажем, что медиа-условие описывает возможное состояние экрана. В этом случае, мы говорим "когда viewport width меньше или равен 480 пикселям".
2. Пробел.
3. **Ширину слота** (в оригинале "width of the slot"), занимаемую изображением, когда медиа-условие истинно. (`440px`)

**Примечание:** Для ширины слота, вы можете указать абсолютные значения (`px`, `em`) или значение относительно окна просмотра (`vw`), но НЕ проценты. Вы могли заметить, что у последнего слота нет медиа-условия — это значение по умолчанию, которое станет актуальным, если ни одно из предыдущих медиа-условий не будет истинно. Браузер игнорирует все последующие проверки после первого совпадения, так что будьте внимательнее к порядку их объявления.

Итак, с такими атрибутами, браузер сделает следующее:

1. Посмотрит на ширину экрана устройства.
2. Попытается определить подходящее медиа-условие из списка в атрибуте `sizes`.
3. Посмотрит на размер слота к этому медиавыражению.
4. Загрузит изображение из списка из `srcset`, которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота.

И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие `(max-width: 480px)` будет истинно, следовательно, будет выбран слот `440px`, тогда будет загружено изображение `elva-fairy-480w.jpg`, так как свойство ширины (`480w`) наиболее близко значение `440px`. Условно, изображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.

Старые браузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута `src`.

**Примечание:** В описании элемента `<head>` вы найдёте строку `<meta name="viewport" content="width=device-width">`: это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)

### Полезные инструменты разработчика

Есть несколько полезных браузерных инструментов разработчика, чтобы помочь с определением необходимой ширины слотов и т. д., которые вам нужно использовать. Когда я работал над ними, я сначала загружал фиксированную версию моего примера (`not-responsive.html`), затем открывал Responsive Design View (*Tools > Web Developer > Responsive Design View*), который позволяет взглянуть на layout вашей веб-страницы как если бы они были просмотрены через устройства с различными размерами экрана.

Я устанавливал viewport width на 320px, затем на 480px; для каждой я обращался к DOM Inspector, кликал по элементу `<img>` в котором мы заинтересованы, далее смотрел размер во вкладке Box Model с правой стороны дисплея. Это должно дать вам необходимую ширину изображения

![A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images/box-model-devtools.png)

А дальше вы можете проверить работает ли `srcset` если установить значение viewport width таким каким вы хотите (например, установить узкую ширину), открыв Network Inspector (*Tools > Web Developer > Network*) и затем перезагрузить страницу. Это должно дать вам перечень ресурсов которые были загружены чтобы составить (собрать) web-страницу, и тут вы можете проверить какой файл изображения был выбран для загрузки.

![a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images/network-devtools.png)

### Переключения разрешений: Одинаковый размер, разные разрешения

Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя `srcset` с x-дескриптором и без `sizes` — более простой синтаксис! Найти пример как это выглядит можно здесь srcset-resolutions.html (смотрите также the source code):

```html
<img
 srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
 src="elva-fairy-640w.jpg"
 alt="Elva dressed as a fairy" />
```

![A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images/resolution-example.png)В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):

```css
img {
  width: 320px;
}
```

В этом случае, нет необходимости в `sizes` — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с `srcset`. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение `elva-fairy-320w.jpg` (применён x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение `elva-fairy-640w.jpg`. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.

### Художественное оформление

Подводя итоги, **проблема художественного оформления** заключается в желании изменить отображаемое изображение чтобы оно соответствовало разным размерам отображения изображения. Например, если на веб-сайте отображается большой пейзажный снимок с человеком посередине при просмотре в браузере на настольном компьютере, то при просмотре веб-сайта в мобильном браузере он уменьшается; он будет выглядеть плохо так как человек будет очень маленьким, и его будет тяжело разглядеть. Вероятно будет лучше показать меньшую портретную картинку в мобильной версии на которой человек отображается в увеличении (в приближении). Элемент `<picture>` позволяет нам применять именно такое решение.

Возвращаясь к нашему оригинальному примеру not-responsive.html, мы имеем изображение которое очень нуждается в художественном оформлении:

```html
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
```

Давайте исправим это при помощи элемента `<picture>`! Так же как `<video>` и `<audio>`, элемент `<picture>` это обёртка содержащая некоторое количество элементов `<source>` которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента `<img>`. Код responsive.html выглядит так:

```html
<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>
```

* Элемент `<source>` принимает атрибут `media`, который содержит медиа-условие; при помощи этих условий определяется, какое изображение будет выведено. В данном случае, если ширина viewport'a составит 799px или меньше, будет выведено изображение первого элемента `<source>`. Если ширина составит 800px и более — второго.
* Атрибут `srcset` содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с `<img>` выше, `<source>` может принимать атрибуты `srcset` и `sizes` с несколько предопределёнными изображениями. Так вы можете не только поместить группу изображений внутри элемента `<picture>`, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.
* Вы всегда должны использовать элемент `<img>`, с `src` и `alt`, прямо перед `</picture>`, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент `<source>)` или браузер не поддерживает элемент `<picture>`.

Этот код позволяет нам выводить отзывчивое изображение и на широких, и на узких экранах, как показано ниже:

![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.](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images/picture-element-wide.png)
![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](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images/picture-element-narrow.png)

**Примечание:** вам следует использовать атрибут `media` только при художественном оформлении; когда вы используете `media`, не применяйте медиа-условия с атрибутом `sizes`.

### Почему это нельзя сделать посредством CSS и JavaScript?

Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решения, как `srcset`. Например, вы не могли бы загрузить элемент `<img>`, потом определить ширину вьюпорта при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.

### Смело используйте современные форматы изображений

Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удаётся сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.

`<picture>` позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута `type`, браузер сразу определит файлы такого типа как неподдерживаемые:

```html
<picture>
  <source type="image/svg+xml" srcset="pyramid.svg" />
  <source type="image/webp" srcset="pyramid.webp" />
  <img
 src="pyramid.png"
 alt="regular pyramid built from four equilateral triangles" />
</picture>
```

* Не используйте атрибут `media`, если вам не нужно художественное оформление.
* В элементе `<source>` можно указывать путь к изображениям только того типа, который указан в `type`.
* Как и в предыдущих примерах, при необходимости вы можете использовать `srcset` и `sizes`.
Активное обучение: реализация собственных адаптивных изображений
----------------------------------------------------------------

Самостоятельно создайте отзывчивое, художественно оформленное изображение для широких и узких экранов, используя `<picture>` и `srcset`.

1. Напишите простую HTML-разметку.
2. Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).
3. Используйте элемент `<picture>` для работы с художественно оформленной картинкой.
4. Обозначьте несколько разных размеров для этой картинки.
5. Используйте `srcset`/`size` для описания переключения при смене размеров вьюпорта

**Примечание:** Используйте инструменты разработчика, чтобы отследить смену размера, как было описано выше.

Заключение
----------

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

* **Художественное оформление**: Проблема, при которой вы хотите использовать обрезанные изображения для различных макетов - например, ландшафтное изображение для полных экранов на макете компьютера и портретное изображение, показывающее увеличенный основной объект, для мобильного макета. Всё это может быть решено с помощью `<picture>` элемента.
* **Переключение разрешений**: Проблема, при которой вы хотите использовать файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях, а также дополнительно, что вы хотите использовать изображения разного разрешения для экранов с высокой/низкой плотностью. Эту проблему можно решить с помощью векторной графики (SVG изображений), и `srcset` и `sizes` атрибуты.

Это так же подводит нас к окончанию целого модуля "Мультимедиа и встраивание"! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше - это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!

Посмотрите так же
-----------------

* Отличное введение в отзывчивые изображения от Джейсона Григсби
* Отзывчивые изображения: Если вы только меняете разрешения используйте srcset — включает больше объяснений того,как браузер выбирает,какое изображение использовать
* `<img>`
* `<picture>`
* `<source>`
* Назад
* Обзор: Multimedia and embedding
* Далее


Изображения в HTML - Изучение веб-разработки

Изображения в HTML
==================

* Обзор: Multimedia and embedding
* Далее

В начале Web был просто текстом, что было довольно скучно. К счастью, это продолжалось не долго - до появления возможности вставлять изображения (и другие, более интересные, типы контента) в веб-страницы. Существуют и другие типы мультимедиа, однако логичнее начать со скромного `<img>` элемента, используемого для вставки простого изображения в веб-страницу. В этой статье мы рассмотрим, как использовать элемент, начиная с основ, снабжать примечаниями, используя `<figure>`, и разберём, как это относится к фоновым изображениям CSS.

| Необходимы: | Базовые знания компьютера, установленное базовое ПО, базовые знания по работе с файлами, знания основ HTML (как описано в статье Начало работы с HTML). |
| --- | --- |
| Цель: | Узнать, как встраивать изображения в HTML, как добавлять к ним описания и как изображения HTML связаны с фоновыми изображениями CSS. |

Как разместить картинку на странице?
------------------------------------

Чтобы разместить изображение на странице, нужно использовать тег `<img>`. Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — `src` (произносится *эс-ар-си*, иногда говорят его полное название, *source*). Атрибут `src` содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута `href` для элемента `<a>`.

**Примечание:** Перед тем как продолжить, вам стоит вспомнить про типы адресов URL, чтобы обновить в памяти про относительные и абсолютные адреса.

Например, если ваше изображение называется `dinosaur.jpg`, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:

```html
<img src="dinosaur.jpg" />
```

Если изображение было в поддиректории `images` , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:

```html
<img src="images/dinosaur.jpg" />
```

И так далее.

**Примечание:** Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому присваивайте вашим изображениям смысловые имена: `dinosaur.jpg` лучше, чем `img835.png`.

Вы можете встроить изображение используя абсолютный URL, например:

```html
<img src="https://www.example.com/images/dinosaur.jpg" />
```

Но это бессмысленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.

**Предупреждение:** **Внимание:** Большинство изображений защищены. Не отображайте изображения на вашем сайте пока:

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

Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своём атрибуте `src` ссылку на изображение, размещённое на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.

Наш код выше даст нам следующий результат:

![A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/basic-image.png)

**Примечание:** Такие элементы как `<img>` и `<video>` иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в Замещаемых элементах.

**Примечание:** вы можете найти готовый пример этого раздела, размещённый на Github (смотрите также исходный код).

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

Следующий атрибут, который мы рассмотрим — `alt`. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута `alt` на практике, внесём изменения в код из предыдущего примера:
```

<img src="images/dinosaur.jpg"
     alt="Голова и туловище скелета динозавра;
         у него большая голова с длинными острыми зубами">
```

Самый простой способ увидеть атрибут `alt` в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как `dinosooooor.jpg`, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута `alt`:

![The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/alt-text.png)Итак, в каких случаях текст из атрибута `alt` может быть нам полезен? Приведём несколько примеров:

* Пользователь с нарушением зрения использует устройство чтения с экрана, которое может читать вслух описание элементов веб-страницы. На самом деле, наличие текста в атрибуте `alt` для описания изображения может быть полезно для большинства пользователей.
* В случае, если была допущена ошибка в имени файла или пути к нему (как было описано выше).
* Браузер не поддерживает формат данного изображения. Некоторые люди до сих пор используют текстовые браузеры, такие как Lynx, которые вместо изображений отображают текст из атрибута `alt`.
* Если вы хотите добавить возможность найти ваше изображение с помощью поисковых систем. Например, поисковые системы могут искать совпадения поисковых запросов с текстом атрибута `alt`.
* Если пользователи отключили отображение изображений на странице для уменьшения объёма передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.

Что именно вы должны писать в атрибут `alt`? В первую очередь, это зависит от того, *зачем* изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:

* **Декорация.** Вы должны использовать Фоновые изображения CSS для декоративных изображений, но если вы должны использовать HTML, добавьте пустой alt = "". Если изображение служит просто украшением и не является частью содержимого, добавьте пустой `alt=""`. Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя.
* **Контент.** Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий `alt`. Или даже лучше, в *главном* тексте, который все увидят. Не используйте `alt` , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы *параграфы* были написаны дважды в *главном контенте*? Если изображение адекватно описано в основном тексте, можете просто использовать `alt=""`.
* **Ссылка.** Если вы помещаете изображение в `<a>`, для того, чтобы сделать из него ссылку, вы всё ещё должны использовать чёткие формулировки описания ссылок. В таком случае, вы сможете использовать элемент `<a>` или атрибут `alt` . Старайтесь выбрать лучший вариант.
* **Текст.** Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого CSS вместо добавления текста в изображение. Однако, если *действительно этого не избежать*, то вам следует дополнить текст в атрибуте `alt`.

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

**Примечание:** Более подробную информацию, смотрите здесь: Альтернативный текст.

### Ширина и высота

Вы можете использовать атрибуты `width` и `height`, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего изображение можете найти различными способами. Например, на Mac можно использовать `Cmd` + `I` чтобы получить информацию по изображению. Повторяя наш пример, мы можем сделать так:

```html
<img
 src="images/dinosaur.jpg"
 alt="The head and torso of a dinosaur skeleton;
 it has a large head with long sharp teeth"
 width="400"
 height="341" />
```

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

![The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/alt-text-with-width-height.png)

Это хорошая практика, в результате страница загрузится быстрее и более гладко.

Однако, вы не должны изменять размеры ваших изображений используя HTML атрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнётесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное соотношение сторон. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу веб-страницу.

**Примечание:** Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого CSS.

### Заголовок изображения

Как и для ссылок, вы также можете добавить атрибут `title` для изображений, чтобы при необходимости предоставить дополнительную информацию. В нашем примере мы могли бы сделать это так:

```html
<img
 src="images/dinosaur.jpg"
 alt="The head and torso of a dinosaur skeleton;
 it has a large head with long sharp teeth"
 width="400"
 height="341"
 title="A T-Rex on display in the Manchester University Museum" />
```

Это даёт нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:

![The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum ](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/image-with-title.png)

Однако это не рекомендуется - `title` имеет ряд проблем с доступностью, в основном из-за того, что поддержка программ чтения с экрана очень непредсказуема, и большинство браузеров не будут отображать её, если вы не наведёте курсор мыши (например, нет доступа для пользователей клавиатуры). Зачастую лучше включить такого рода вспомогательную информацию в основной текст статьи, чем прикреплять её к изображению. Однако, она полезна в некоторых обстоятельствах; например, в галереях изображений, когда у вас нет места для их заголовков.

### Активное обучение: встраивание изображения

Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по встраиванию. Вы будете обеспечены простым `<img>` тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur\_small.jpg

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

Мы также хотели бы, чтобы вы:

* Добавили любой альтернативный текст, и проверили как это работает внеся ошибку в ссылку на изображение.
* Установите правильные значения `width` и `height` (подсказка: это 200px по ширине и 171px по высоте), после поэкспериментируйте с другими значениями, чтобы увидеть какой будет эффект.
* Установите `title` для изображения.

Если вы сделаете ошибку, вы всегда можете очистить код, используя кнопку *Reset*. Если вы реально не будете понимать как сделать, нажмите кнопку *Show solution*, чтобы увидеть ответ:
```

<h2>Input</h2>
<textarea id="code" class="input"><img></textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
body {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

.input,
.output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function () {
  textarea.value =
    '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur\_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
```

Придание изображению структуры и установка заголовка
----------------------------------------------------

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

```html
<div class="figure">
  <img
 src="images/dinosaur.jpg"
 alt="The head and torso of a dinosaur skeleton;
 it has a large head with long sharp teeth"
 width="400"
 height="341" />

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>
```

Это нормально. Это содержит всё что вам нужно, и красиво стилизуется с помощью CSS. Но, есть проблема: здесь нет ничего, что семантически связывает изображение с его заголовком, и это может вызвать сложности для читателей. Например, когда у вас есть 50 изображений и заголовков, какой заголовок идёт вместе с каким изображением?

Лучшим решением будет использование элементов HTML5 `<figure>` и `<figcaption>`. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и чётко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:
```

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
```

Элемент `<figcaption>` говорит браузерам и вспомогательной технологии, что заголовок описывает содержимое элемента `<figure>`.

**Примечание:** С точки зрения доступности, заголовки и `alt` имеют различные предназначения. Заголовки помогают даже тем, кто имеет возможность просматривать изображение, тогда как `alt` обеспечивает замену функциональности отсутствующего изображения. Таким образом, заголовки и `alt` не подразумевают под собой одни и те же вещи, потому что оба используются браузером при отсутствии изображения. Попробуйте отключить изображения в своём браузере, чтобы увидеть как это выглядит.

Тег <figure> не является изображением. Он представляет собой независимый структурный элемент, который:

* Передаёт смысл компактным, интуитивно понятным способом.
* Может использоваться в различных местах страницы.
* Предоставляет ценную информацию, поддерживающую основной текст.

Тег <figure> может быть несколькими изображениями, куском кода, аудио, видео, уравнением, таблицей, либо чем-то другим.

### Активное изучение: создание <figure>

В этом разделе активного изучения мы хотели бы, чтобы вы взяли текст из предыдущего раздела активного изучения и преобразовали его в <figure>:

* Оберните его в `<figure>` элемент.
* Скопируйте текст из атрибута `title`, удалите атрибут `title`, и вбейте текст в элемент `<figcaption>`.

В случае допущения ошибки, вы всегда можете набрать код повторно, нажав кнопку *Reset*. Если вы застряли, нажмите кнопку *Show solution*, чтобы увидеть ответ:
```

<h2>Input</h2>
<textarea id="code" class="input"></textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
body {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

.input,
.output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function () {
  textarea.value =
    '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur\_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
```

Фоновые изображения CSS
-----------------------

Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). Параметры CSS `background-image` и другие `background-*` применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:

```css
p {
  background-image: url("images/dinosaur.jpg");
}
```

Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же возиться с HTML изображениями? Как указано выше, фоновые изображения CSS предназначены только для украшения. Если вы просто хотите добавить что-то красивое на свою страницу, чтобы улучшить визуальные эффекты, это нормально. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, они невидимы для программ чтения с экрана. Вот где блистают HTML-изображения!

Итог: если изображение имеет важность, в контексте содержимого вашей страницы, вам следует использовать HTML изображения. Если же картинка является банальной декорацией, используйте фоновые изображения CSS.

**Примечание:** вы можете узнать больше о фоновых изображениях CSS в нашей теме о CSS.

Проверьте свои навыки!
----------------------

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

Резюме
------

На этом пока все. Мы подробно рассмотрели изображения и их заголовки. В следующей статье мы рассмотрим, как использовать HTML для встраивания видео и аудио на веб-страницы.

* Обзор: Multimedia and embedding
* Далее


Видео и аудио контент - Изучение веб-разработки

Видео и аудио контент
=====================

* Назад
* Обзор: Multimedia and embedding
* Далее

Теперь, когда мы спокойно добавляем простые изображения на веб-страницу, сделаем следующий шаг — начнём добавлять видео и аудиоплееры в ваши HTML-документы! В этой статье вы увидите, как это делать с элементами `<video>` и `<audio>` ; а в завершение посмотрите, как добавить титры и субтитры к вашим видео.

| Предпосылки: | Базовая компьютерная грамотность, установка базового ПО, базовые знания работа с файлами, знакомство с основами HTML (как описано в Начало работы с HTML) и Изображения в HTML. |
| --- | --- |
| Задача: | Узнать, как вставлять видео и аудиоконтент в веб-страницу, а также добавлять титры или субтитры к видео. |

Аудио и видео в Интернете
-------------------------

Веб-разработчики хотели использовать видео и аудио в Интернете в течение длительного времени, начиная с начала 2000-х годов, когда пропускная способность сети стала достаточной, чтобы поддерживать любое видео (видеофайлы намного больше, чем текст, или даже изображения). На раннем этапе базовые веб-технологии, такие как HTML, не имели возможности размещения на сайтах видео и аудио контента, поэтому запатентованные технологии (или плагины), такие как Flash (а затем и Silverlight), стали популярными для обработки такого контента. Эти технологии работали нормально, но у них было много недостатков, в числе которых плохая поддержка возможностей HTML и CSS, проблемы безопасности и проблемы доступности.

Собственное решение устранило бы большую часть этой проблемы, если бы оно было реализовано правильно. К счастью, несколько лет спустя в спецификации HTML5 были добавлены такие функции, с элементами `<video>` и `<audio>`, и некоторые новые JavaScript API для их управления. Мы не будем рассматривать JavaScript здесь - только необходимые основы, которые могут быть достигнуты с помощью HTML.

Мы не будем учить вас, как создавать аудио и видеофайлы - для этого требуется совершенно другой набор навыков. Мы предоставили вам образцы аудио и видеофайлов и пример кода для вашего собственного эксперимента, на случай, если у вас нет под рукой собственных.

**Примечание:** Прежде всего, вы также должны знать, что есть немало OVPs (провайдеров онлайн-видео) вроде YouTube, Dailymotion и Vimeo, а также онлайн аудио-провайдеров вроде Soundcloud. Такие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться об огромном потреблении трафика. OVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы. Если вы пойдёте по этому пути, то сможете избежать некоторых трудностей, которые мы обсуждаем в этой статье.

### Элемент <video>

Элемент `<video>` позволяет вам вставлять видео достаточно легко. Очень простой пример выглядит так:

```html
<video src="rabbit320.webm" controls>
  <p>
    Ваш браузер не поддерживает HTML5 видео. Используйте
    <a href="rabbit320.webm">ссылку на видео</a> для доступа.
  </p>
</video>
```

Описание параметров:

`src`

Точно так же, как для элемента `<img>` , атрибут `src` (source — источник) содержит путь к видео, которое вы хотите внедрить. Он работает точно так же.

`controls`

Пользователи должны иметь возможность контролировать воспроизведение видео и аудио (особенно это важно для людей, которые больны эпилепсией). Вы должны либо использовать атрибут `controls`, чтобы использовать встроенный в браузер интерфейс управления или создать собственный интерфейс, используя соответствующие JavaScript API. Как минимум, интерфейс должен включать способ запуска и остановки медиа-носителя и регулировки громкости.

Параграф внутри тегов `<video>`

Это называют **резервный контент** — он будет отображаться, если браузер, показывающий страницу, не поддерживает элемент `<video>`, позволяя нам обеспечить поддержку для старых версий браузеров. Это может быть все, что вы захотите; в нашем примере мы предоставили прямую ссылку на видеофайл, поэтому пользователь может хотя бы получить к нему доступ, независимо от того, какой браузер он используют.

Встроенное видео будет выглядеть примерно так:

![A simple video player showing a video of a small white rabbit](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/simple-video.png)

Вы можете посмотреть живой пример (взгляните также на исходный код).

### Поддержка нескольких форматов

Присутствует одна проблема с приведённым выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет воспроизводиться!

Давайте кратко рассмотрим терминологию. Форматы, такие как MP3, MP4 и WebM, называются **форматами контейнеров**. Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.

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

Аудио и видео треки также находятся в разных форматах, например:

* Контейнер WebM обычно загружает звук Ogg Vorbis с видео VP8 / VP9. Поддерживается в основном в Firefox и Chrome.
* Контейнер MP4 часто включает аудио AAC или MP3 с видео H.264. Поддерживается в основном в Internet Explorer и Safari.
* Более старый контейнер Ogg имеет тенденцию идти с аудио Ogg Vorbis и видео Ogg Theora. Поддерживалось главным образом в Firefox и Chrome, но было вытеснено более качественным форматом WebM.

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

Ещё одна такая ситуация - всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах `<video>` и `<audio>`, они могут поддерживать MP3 из-за его популярности.

Аудиоплеер обычно воспроизводит аудиодорожку напрямую, например файл MP3 или Ogg. Для этого не нужны контейнеры.

#### Поддержка медиафайлов в браузерах

Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные кодеки, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придётся предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.

**Примечание:** Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года, так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.

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

Из-за сложности обеспечения возможности просмотра мультимедийных файлов вашего приложения в любой комбинации браузеров, платформ и устройств, которые вы хотите использовать, выбор наилучшего сочетания кодеков и контейнера может оказаться сложной задачей. Смотрите выбор подходящего контейнера (en-US) для получения помощи по выбору формата файла контейнера, наиболее подходящего для ваших нужд; аналогичным образом смотрите выбор видеокодека (en-US) и выбор аудиокодека (en-US) для помощи в выборе первых медиакодеков, которые будут использоваться для вашего контента и вашей целевой аудитории.

Ещё одна вещь, о которой следует помнить: мобильные браузеры могут поддерживать дополнительные форматы, не поддерживаемые их настольными эквивалентами, точно так же, как они могут не поддерживать все те же форматы, что и настольная версия. Вдобавок ко всему, как настольные, так и мобильные браузеры могут быть спроектированы так, чтобы разгрузить обработку воспроизведения мультимедиа (либо для всех мультимедиа, либо только для определённых типов, которые он не может обрабатывать внутренне). Это означает, что поддержка мультимедиа частично зависит от того, какое программное обеспечение установил пользователь.

Так как мы это сделаем? Взгляните на следующий обновлённый пример (и попробуйте живой пример):

```html
<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Ваш браузер не поддерживает HTML5 видео. Вот
    <a href="rabbit320.mp4">ссылка на видео</a> взамен.
  </p>
</video>
```

Здесь мы изъяли атрибут `src` из нашего тега `<video>`, и вместо этого включали отдельные элементы `<source>`, каждый из которых ссылается на собственный источник. В этом случае браузер пройдётся по элементам `<source>` и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.

Каждый элемент `<source>` также имеет атрибут `type`. Он не обязательный, но рекомендуется его включать — он содержит MIME types видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если `type` не включён, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.

**Примечание:** Наша статья о поддерживаемых медиаформатах описывает некоторые распространённые MIME types.

### Другие параметры <video>

Есть ряд других параметры, которые вы можете включить в HTML5 элемент `video`. Взгляните на наш третий пример:

```html
<video
 controls
 width="400"
 height="400"
 autoplay
 loop
 muted
 poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML5 video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>
```

На выходе получим нечто, подобное этому:

\*\*
 ![A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/extra-video-features.png)\*\*Новые параметры:

**`width` and `height`**

Вы можете контролировать размер видео либо с помощью этих атрибутов, либо с помощью CSS. В обоих случаях видео поддерживают собственное соотношение ширины и высоты — известное как соотношение сторон. Если соотношение сторон не поддерживается установленными вами размерами, видео будет увеличиваться, чтобы заполнить пространство по горизонтали, а заполненному пространству по умолчанию будет задан сплошной цвет фона.

**`autoplay`**

Этот атрибут позволяет сразу начать воспроизведение звука или видео, пока остальная часть страницы загружается. Вам не рекомендуется использовать автовоспроизведение видео (или аудио) на ваших сайтах, потому что пользователи могут найти это действительно раздражающим.

**`loop`**

Этот атрибут позволяет воспроизводить видео (или аудио) снова, когда он заканчивается. Это также может раздражать, поэтому используйте тогда, когда это действительно необходимо.

**`muted`**

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

**`poster`**

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

**`preload`**

этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трёх значений:

* `"none"` не буферизирует файл
* `"auto"` буферизирует медиафайл
* `"metadata"` буферирует только метаданные файла

Вы можете найти приведённый выше пример для воспроизведения на Github (также просмотрите исходный код.) Обратите внимание, что мы не включили атрибут `autoplay` в live-версию - если видео начнёт воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!

### Элемент <audio>

Элемент `<audio>` работает точно так же, как элемент `<video>`, с несколькими небольшими отличиями, которые описаны ниже. Типичный пример может выглядеть так:

```html
<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support HTML5 audio. Here is a
    <a href="viper.mp3">link to the audio</a> instead.
  </p>
</audio>
```

В браузере это вызывает следующее:

![A simple audio player with a play button, timer, volume control, and progress bar](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/audio-player.png)

**Примечание:** Примечание: вы можете запустить аудио-демо в Github (см. также исходный код аудиоплеера.)

Он занимает меньше места, чем видеоплеер, поскольку нет визуального компонента - вам просто нужно отображать элементы управления для воспроизведения звука. Другие отличия от видео HTML5 заключаются в следующем:

* Элемент `<audio>` не поддерживает атрибуты `width` и `height` - опять же, нет визуального компонента, поэтому присваивать ширину или высоту не к чему.
* Он также не поддерживает атрибут `poster` опять же, из-за отсутствия визуального компонента.

Помимо этого, `<audio>` поддерживает все те же функции, что и `<video>` - просмотрите приведённые выше разделы для получения дополнительной информации о них.

Отображение текстовых дорожек к видео
-------------------------------------

Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио или видео контент, который они находят в Интернете, по крайней мере, в определённое время. Например:

* У многих людей есть слуховые нарушения (более известные как слабослышащие или глухие).
* Другие могут не слышать звук, потому что они находятся в шумной обстановке (например, в переполненном баре при показе спортивной игры) или, возможно, не хотят беспокоить других, если они находятся в тихом месте (например, в библиотеке).
* Люди, которые не говорят на языке из видео, могут захотеть увидеть текстовую расшифровку или даже перевод, чтобы помочь им понять медиа-контент.

Разве было бы неплохо иметь возможность предоставить этим людям транскрипцию слов, произносимых в аудио или видео? Благодаря HTML5 вы можете это сделать с форматом WebVTT (en-US) и элементом `<track>`.

**Примечание:** "Транскрибировать" значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».

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

**субтитры**

Переводы иностранного материала, для людей, которые не понимают слов, произнесённых в аудио.

**титры**

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

**рассчитанные описания**

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

Типичный файл WebVTT будет выглядеть примерно так:
```

WEBVTT

1
00:00:22.230 --> 00:00:24.606
Это первый субтитр.

2
00:00:30.739 --> 00:00:34.074
Это второй.

  ...
```

Чтобы отобразить это вместе с воспроизведением мультимедиа HTML, вам необходимо:

1. Сохраните его как `.vtt`- файл, в разумном месте.
2. Ссылка на файл `.vtt` с элементом `<track>`. `<track>` должен быть помещён в `<audio>` или `<video>`, но после элементов `<source>`. Используйте атрибут `kind`, чтобы указать, являются ли реплики `субтитрами`, `титрами` или `описаниями`. Кроме того, используйте `srclang`, чтобы сообщить браузеру, на каком языке вы записывали субтитры.

Вот пример:

```html
<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles\_en.vtt" srclang="en" />
</video>
```

Это приведёт к просмотру видео с субтитрами, таким как:

![Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/video-player-with-captions.png)

Подробнее читайте в разделе добавление титров и субтитров к видео HTML5. Вы можете найти пример, который соответствует этой статье в Github, написанной Яном Девлином (см. также исходный код). В этом примере используется JavaScript, позволяющий пользователям выбирать между различными субтитрами. Обратите внимание, что для включения субтитров вам нужно нажать кнопку «CC» и выбрать вариант - английский, немецкий или испанский.

**Примечание:** Текстовые треки также помогут вам с SEO, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.

### Активное обучение: Внедрение собственного аудио и видео

Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придётся сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как Miro Video Converter и Audacity. Мы хотели бы, чтобы вы попробовали сделать это!

Если у вас нет какого-либо видео или аудио, вы можете свободно пользоваться нашими образцами аудио и видео файлов для выполнения этого упражнения. Вы также можете использовать наш образец кода для справки.

Мы хотим, чтобы вы сделали следующие действия:

1. Сохраните аудио и видео файлы в новом каталоге на вашем компьютере.
2. Создайте новый HTML файл в том же каталоге и назовите его `index.html`.
3. Добавьте элементы `<audio>` и `<video>` на страницу; чтобы они отображали элементы управления браузером по умолчанию.
4. Введите оба варианта элемента `<source>`, чтобы браузеры находили оптимальный формат звука, который он поддерживает и загружает. Они должны включать `type` атрибуты.
5. Дайте элементу `<video>` заставку, которая будет отображаться до начала воспроизведения видео. Получайте удовольствие, создавая свою собственную заставку к видео.

Для дополнительного бонуса вы можете попробовать исследовать текстовые треки и выяснить, как добавить некоторые титры к вашему видео.

Краткое изложение
-----------------

Мы надеемся, что вам понравилось играть с видео и аудио на веб-страницах! В следующей статье мы рассмотрим другие способы встраивания контента в Web, используя такие технологии, как `<iframe>` (en-US) и `<object>` (en-US).

Смотрите также
--------------

* `<audio>`
* `<video>`
* `<source>`
* `<track>`
* Adding captions and subtitles to HTML5 video
* Audio and Video delivery (en-US): Множество деталей встраивания аудио и видео в страницу используя HTML и Javascript.
* Audio and Video manipulation (en-US): Множество способов управления аудио и видео с помощью Javascript(вроде добавления фильтров).
* Автоматические опции по переводу(translate multimedia).
* Назад
* Обзор: Multimedia and embedding
* Далее


Добавление векторной графики в веб-документ - Изучение веб-разработки

Добавление векторной графики в веб-документ
===========================================

* Назад
* Обзор: Multimedia and embedding
* Далее

Векторная графика очень полезна во многих случаях. Она имеет малые размеры файла и высокую масштабируемость – при увеличении масштаба пиксели не увеличиваются вместе с графикой. В данной статье мы покажем, как встраивать векторную графику на Вашу страницу.

| Навыки: | Знание основ HTML и умение добавлять изображение в веб-документ. |
| --- | --- |
| Цель: | Изучить как встроить SVG (векторное) изображение на веб-страницу. |

**Примечание:** Данная статья не научит вас векторной графике, а даст понимание что это и как её использовать в веб-документах.

Что такое векторная графика?
----------------------------

В веб-разработке вы будете сталкиваться с двумя типами изображений - растровым и векторным:

* Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)
* Векторное изображение определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер может вычислить как должно выглядеть изображение, когда выводится на экран.SVG формат позволяет нам создавать векторную графику для использования в веб-документах.

Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как vector-versus-raster.html — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое - SVG.

Различия становятся заметны, когда вы изменяете масштаб страницы — PNG изображение становится неровным (становятся видны пиксели), потому что оно содержит информацию о положении и цвете каждого пикселя. При увеличении каждый пиксель также увеличивается, охватывая несколько пикселей дисплея, поэтому становятся заметны "кирпичики". Векторное изображение продолжает выглядеть ровным и красивым, потому что фигуры, масштабируются совместно с ним.

![Two star images](/ru/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web/raster-vector-default-size.png)

![Two star images zoomed in, one crisp and the other blurry](/ru/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web/raster-vector-zoomed.png)

**Примечание:** Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: vector-versus-raster.html !

Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе.

Что такое SVG?
--------------

SVG это язык на базе XML для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае, вы можете использовать элементы для создания простых фигур, таких как `<circle>`(круг) и `<rect>`(прямоугольник). Более сложные SVG элементы включают `<feColorMatrix>` (en-US) (разложение цвета с использованием матрицы), `<animate>` (анимация частей вашего векторного изображения) и `<mask>` (en-US) (применение маски к изображению.)

В качестве простого примера, следующий код создаёт круг и прямоугольник:

```html
<svg
 version="1.1"
 baseProfile="full"
 width="300"
 height="200"
 xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>
```

В результате получается следующее:

Исходя из примера выше, может показаться, что SVG легко создавать вручную. Да, простые SVG можно создавать, используя текстовый редактор, но в случае сложного изображения это становится сложным. Для создания SVG изображений используются редакторы векторной графики, такие как Inkscape или Illustrator. Данные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)

Дополнительные преимущества SVG:

* Текст в векторном изображении остаётся машинописным (то есть доступным для поисковика, что улучшает SEO).
* SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.

Так почему же тогда вообще используют растровые изображения, а не только SVG? Дело в том, что SVG имеет ряд недостатков:

* SVG может очень быстро стать сложным в том смысле, что размер файла увеличивается; сложные SVG-изображения также создают большую вычислительную нагрузку на браузер.
* SVG может быть сложнее создать, нежели растровое изображение, в зависимости от того, какое изображение необходимо создать.
* не поддерживается старыми версиями браузеров, то есть не подойдёт для сайтов, поддерживающих Internet Explorer 8 или старее.

В целом, растровая графика лучше подходит для сложных изображений, например, фотографий.

**Примечание:** В приложении Inkscape сохраняйте файлы как Plain SVG, для экономии места. Также, пожалуйста перейдите на статью, описывающую как подготовить SVG изображение для веб-документа.

Добавление SVG на страницы
--------------------------

В данном разделе мы рассмотрим различные варианты, с помощью которых можно добавить SVG векторную графику на веб-страницу.

### Быстрый путь: `<img>`

Чтобы встроить SVG используя элемент `<img>`, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут `height` или `width` (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите Изображения в HTML.

```html
<img
 src="equilateral.svg"
 alt="triangle with all three sides equal"
 height="87px"
 width="100px" />
```

#### Плюсы

* Быстрый, знакомый синтаксис изображения со встроенным текстовым эквивалентом, доступным в атрибуте `alt`
* Вы можете легко превратить изображение в гиперссылку, поместив `<image>` в элемент `<a>`.

#### Минусы

* Вы не можете изменять изображение с помощью JavaScript.
* Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)
* Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например `:focus`).
### Устранение неполадок и кросс-браузерная поддержка

Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в `src` атрибуте и использовать `srcset` атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае SVG будут загружаться только поддерживающими браузерами - старые же браузеры будут загружать PNG:

```html
<img
 src="equilateral.png"
 alt="triangle with equal sides"
 srcset="equilateral.svg" />
```

Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:

```css
background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;
```

Подобно методу `<img>`, описанному выше, вставка SVG с использованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.

Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то данная статья укажет вам верное направление.

### Как включить SVG в ваш HTML код

Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (**SVG inline** или **inlining SVG**). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов `<svg></svg>` (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:

```html
<svg width="300" height="200">
  <rect width="100%" height="100%" fill="green" />
</svg>
```

#### Плюсы

* Вставка вашего SVG путём **SVG inline** позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.
* Вы можете присваивать `class`-ы и `id` элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой атрибут представления SVG как свойство CSS.
* **SVG inline** единственный метод, который позволяет вам использовать CSS-взаимодействия (как `:focus`) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).
* Вы можете разметить SVG как гиперссылку, обернув в элемент `<a>`.

#### Минусы

* Этот метод подходит, только если вы используете SVG лишь в одном месте. Дублирование делает обслуживание ресурсоёмким.
* Дополнительный SVG код увеличивает размер вашего HTML файла.
* Браузер не может кешировать встроенный SVG, так как он кеширует обычные изображения.
* Вы можете добавить альтернативный вариант в элементе `<foreignObject>`, но браузеры поддерживающие SVG будут продолжать загружать все альтернативные изображения. Вы должны взвесить действительно стоит ли поддержка устаревших браузеров дополнительных накладных расходов (ресурсов).
### Как встраивать SVG при помощи <iframe>

Вы можете открывать ваши SVG изображения в браузере просто как веб-страницы. Таким образом встраивание SVG документа с помощью `<iframe>` выполняется как мы изучали ранее в главе От <object> к <iframe> — другие технологии внедрения.

Вот краткий обзор:

```html
<iframe src="triangle.svg" width="500" height="500" sandbox>
  <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>
```

Это - определённо не самый лучший метод для выбора:

#### Минусы

* Как вы можете видеть, у `iframe`-ов есть резервный механизм, но браузеры отображают резервный вариант только если они вообще не поддерживают `iframe`-ы.
* Более того, до тех пор пока SVG и ваша текущая веб-страница имеют одинаковый origin, вы не можете использовать JavaScript на вашей основной веб-странице, чтобы манипулировать SVG.
Активное изучение: поиграйте с SVG
----------------------------------

В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области *Input,* вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А ещё вы можете посетить SVG Element Reference, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящён практике ваших исследовательских навыков и вашему развлечению.

Если Вы где-то застряли и ваш код не работает, вы всегда можете начать сначала, нажав кнопку *Reset*.
```

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="width: 95%;min-height: 200px;">
  <svg width="100%" height="100%">
    <rect width="100%" height="100%" fill="red" />
    <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
    <polygon points="120,0 240,225 0,225" fill="green"/>
    <text x="50" y="100" font-family="Verdana" font-size="55"
 fill="white" stroke="black" stroke-width="2">
            Hello!
    </text>
  </svg>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" disabled />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var output = document.querySelector(".output");
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

var htmlSolution = "";
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

Заключение
----------

Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руководством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы ещё не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.

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

Смотрите также
--------------

* SVG tutorial on MDN
* Quick tips for responsive SVGs
* Sara Soueidan's tutorial on responsive SVG images
* Accessibility benefits of SVG
* How to scale SVGs (it's not as simple as raster graphics!)
* Назад
* Обзор: Multimedia and embedding
* Далее


Страница о Mozilla - Изучение веб-разработки

Страница о Mozilla
==================

* Назад
* Обзор: Multimedia and embedding

В этом задании мы проверим ваши знания приёмов, рассмотренных в статьях этого модуля, через добавление изображений и видео на забавную страницу о Mozilla!

| Предпосылки: | Прежде чем приступить к этому заданию, вы должны проработать остальную часть модуля мультимедиа и встраивания. |
| --- | --- |
| Задача: | Для проверки знаний о встраивании изображений и видео в веб-страницы, фреймы и методы визуального восприятия HTML. |

Отправная точка
---------------

Для начала этого задания скачайте все HTML файлы и изображения, доступные на github(mdn-splash-page-start). Сохраните содержимое index.html в файле с именем `index.html` на вашем диске в новой папке. Затем сохраните pattern.png в той же папке (правый клик на изображении для выбора опции сохранения).

Сохраните изображения из папки originals тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.

**Примечание:** Приведённый для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри `<body>` элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.

Описание проекта
----------------

В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углублённого ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:

### Подготовка изображений

Используя ваш любимый редактор изображений, создайте версии шириной 400px и 120px, следующих изображений:

* `firefox_logo-only_RGB.png`
* `firefox-addons.jpg`
* `mozilla-dinosaur-head.png`

Назовите их как-нибудь разумно, например `firefoxlogo400.png` и `firefoxlogo120.png`.

Вместе с `mdn.svg`, эти изображения будут иконками для ссылок на другие ресурсы внутри секции `further-info`. Вы также дадите ссылку на логотип Firefox в шапке сайта. Сохраните все копии внутри той же папки, что и `index.html`.

Затем создайте фоновую версию `red-panda.jpg` шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распознавать их. Сохраните обе копии внутри той же папки, что и `index.html`.

**Примечание:** Следует обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. tinypng.com - отличный сервис для этого.

### Добавление логотипа в шапку

Добавьте внутрь элемента `<header>` элемент `<img>`, который вставит уменьшенную версию логотипа Firefox в шапку.

### Добавление видео к основному содержанию статьи

Внутри элемента `<article>` (сразу после открывающего тэга), вставьте ролик с YouTube по ссылке https://www.youtube.com/watch?v=ojcNcvb1olg, используя подходящие инструменты YouTube для генерации кода. Видео должно быть 400px в ширину.

### Добавление отзывчивых изображений к ссылкам с доп. информацией

Внутри `<div>` с классом `further-info` вы найдёте четыре элемента `<a>` — каждый из которых ссылается на интересную страницу, связанную с Mozilla. Для завершения этой секции вам необходимо поместить элемент `<img>` внутрь каждого элемента `<a>` дополнив подходящими атрибутами `src`, `alt`, `srcset` и `sizes`.

В каждом случае (кроме одного - какой из них по сути отзывчивый?) мы хотим, чтобы браузер использовал изображение шириной 120px , когда экран меньше или равен 480px, либо шириной 400px в других случаях.

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

**Примечание:** Для проверки правильности работы `srcset`/`sizes` , вам нужно загрузить ваш сайт на сервер (используйте Github pages - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в Responsive images: useful developer tools.

### Искусственно изменённая красная панда

Внутри элемента `<div>` с классом `red-panda`, мы хотим поместить элемент `<picture>` , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.

Пример
------

Следующие скриншоты демонстрируют, как сайт-визитка выглядит, при правильной разметке, на широких и узких экранах.

![A wide shot of our example splash page](/ru/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page/wide-shot.png)

![A narrow shot of our example splash page](/ru/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page/narrow-shot.png)

Заключение
----------

Если вы выполняете это задание как часть организованного курса вам следует передать вашу работу учителю/наставнику для оценки. Если вы обучаетесь самостоятельно, то вы легко можете получить отметку в ветке форума этого упражнения, либо в IRC канале #mdn на Mozilla IRC. Сначала попробуйте выполнить упражнение - жульничеством ничего не добиться!

* Назад
* Обзор: Multimedia and embedding