# Тег img

Тег `img` создает картинку. Путь к картинке прописывается в атрибуте `src`. Не требует закрывающего тега.

## Атрибуты

Атрибут | Описание
--- | ---
`src` | Задает путь к картинке. Обязательный атрибут.
`alt` | Альтернативный текст, который будет показан вместо картинки, если она не найдена (к примеру, неправильно прописан путь к ней). Обязательный атрибут. При его отсутствии будет ругаться валидатор (программа, которая проверяет корректность HTML или CSS).
`width` | Ширина картинки, в пикселях (в этом случае единицы измерения не указываются) или процентах от родителя картинки.
`height` | Высота картинки, в пикселях (в этом случае единицы измерения не указываются) или процентах от родителя картинки.

## Нюансы

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

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

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

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

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

## Пример

Давайте на сайт добавим картинку и не будем задавать атрибуты `height` и `width`. Картинка будет иметь свой реальный размер:

`<img src="monkey.png" alt="обезьянка">`

:

## Пример

Давайте попробуем картинке добавить ширина с помощью атрибута `width`, высота при этом должна подстроиться так, чтобы сохранить пропорции картинки:

`<img src="monkey.png" width="200" alt="обезьянка">`

:

## Пример

А теперь давайте картинке добавим высоту с помощью атрибута `height`, ширина при этом подстроится так, чтобы сохранить пропорции картинки:

`<img src="monkey.png" height="100" alt="обезьянка">`

:

## Пример

Давайте одновременно картинке добавим и высоту, и ширину. Пропорции картинки при этом должны стать искаженными (не обязательно, но в данном случае высота и ширина подобраны так, чтобы пропорции исказились):

`<img src="monkey.png" height="100" width="300" alt="обезьянка">`

:

## Пример

Давайте поставим неправильный путь к картинке (для простоты оставим его пустым). Вместо картинки мы увидим содержимое атрибута `alt` (кажется, что это обычный текст - но попробуйте его скопировать - у вас ничего не получится, он будет тянутся как картинка):

`<img src="" alt="обезьянка">`

:

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

- свойство `width`,
  которое задает ширину элемента
- свойство `height`,
  которое задает ширину элемента
- свойство `background-image`,
  которое задает фоновую картинку

←→
↑