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

Не требует закрывающего тега.

Картинки на сайте также можно размещать с помощью фона. См. CSS свойство background.

Тег по умолчанию строчно-блочный. Про строчные и блочные элементы см. свойство display.

См. также теги figure и figcaption, которые созданы для группировки изображений и подписей под ними.

Атрибуты

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

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

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

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

Примеры

Пример

В данном примере на сайт добавлена картинка. Так как не заданы атрибуты height и width, картинка будет иметь свой реальный размер:

<img src="images/img.jpg" alt="Обезьянка">

Результат выполнения кода:

Обезьянка

Пример

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

<img src="images/img.jpg" width="200" alt="Обезьянка">

Результат выполнения кода:

Обезьянка

Пример

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

<img src="images/img.jpg" height="100" alt="Обезьянка">

Результат выполнения кода:

Обезьянка

Пример

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

<img src="images/img.jpg" height="100" width="300" alt="Обезьянка">

Результат выполнения кода:

Обезьянка

Пример

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

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

Результат выполнения кода:

Обезьянка