description.ru.yml

---

name: Изображения
theory: |

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

  Картинки на странице не существуют сами по себе. Предварительно они должны быть загружены в директорию на сервере или на специальный хостинг картинок. Для вставки картинки на страницу используется непарный тег `<img>`, у которого два обязательных атрибута: `src` и `alt`.

  ## Атрибут src

  В атрибуте `src` указывается путь к изображению. Это тоже ссылка, как и в теге `<a>`, только теперь не происходит перенаправление пользователя, а браузер загружает изображение по этому пути, если оно существует. Путь к картинке может быть как _относительный_, так и _абсолютный_.

  ```html
  <img src="/images.png">
  ```

  ## Атрибут alt

  Что делать, если картинка в данный момент недоступна? В этом случае браузеры показывают маленькую картинку, обозначающую, что изображение недоступно.

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

  Для этого используется атрибут `alt`, значением которого является текст. Он будет показан при невозможности загрузить изображение

  ```html
  <img src="https://example.com/images.png" alt="Аналитика компании за 2007 год">
  ```

  Помимо функции «рассказать то, что не удалось показать» атрибут `alt` выполняет важнейшую роль для людей, которые пользуются скринридерами — программами для чтения информации с экрана. Так как изображение невозможно прочитать, то программы читают то, что было указано в атрибуте `alt`

  ## Размеры изображения

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

  ```html
  <img src="https://example.com/images.png" alt="Аналитика компании за 2007 год" width="320" height="240">
  ```

  Картинка будет отображена в размере 320x240 пикселей.

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

instructions: |
  Вставьте в редактор картинку по адресу https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png и текстом **W3C** для случаев, если картинка недоступна