Как вставить картинку в HTML

Справочник · HTML и CSS · 2 минуты чтения

Картинка вставляется пустым тегом <img>:

HTML

<img src="images/photo.jpg" alt="Группа на экскурсии в Несвиже" width="800" height="600">

src — путь к файлу картинки;
alt — что на ней изображено: текст видно, если картинка не загрузилась, его читают программы для незрячих и учитывают поисковики;
width и height — ширина и высота в пикселях, числом без px. Браузер заранее оставит место, и текст не будет прыгать при загрузке.

Закрывающего тега у <img> нет.

Путь к файлу

Положите картинку в папку сайта — удобнее в подпапку images — и укажите путь относительно страницы:

Где картинка	Путь в `src`
рядом со страницей	`photo.jpg`
в подпапке `images`	`images/photo.jpg`
страница в подпапке, картинка в `images` уровнем выше	`../images/photo.jpg`
на другом сайте	`https://example.com/photo.jpg`

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

Размер на странице

Атрибуты width и height лучше оставлять равными настоящему размеру файла, а размер на странице задавать в CSS:

CSS

img {
  max-width: 100%;
  height: auto;
}

Так картинка не вылезет за край узкого экрана и сохранит пропорции. Подробнее — в справке Как сделать адаптивную картинку.

Картинка с подписью

HTML

<figure>
  <img src="images/photo.jpg" alt="Группа на экскурсии в Несвиже" width="800" height="600">
  <figcaption>Экскурсия в Несвиж, май</figcaption>
</figure>

Если картинка не отображается

Путь. Сравните его с расположением файла: путь отсчитывается от папки страницы, а не от корня сайта.
Имя до буквы. Photo.JPG и photo.jpg на сервере — разные файлы, .jpg и .jpeg — разные расширения.
Пробелы и русские буквы в имени — при загрузке на сервер такие имена могут исказиться. Переименуйте файл латиницей без пробелов: excursion-2026.jpg.
Путь на диске вида C:\Users\… работает только у вас; на сайте файл должен лежать в папке сайта.
Файл не загружен на хостинг — страницу выложили, а папку с картинками забыли.

Быстрая проверка: откройте инструменты разработчика (F12), вкладку «Network» («Сеть»), обновите страницу. Строка картинки с кодом 404 — файл не найден, а рядом виден адрес, по которому его искал браузер.

Какой формат

Фото — JPEG или WebP, рисунки с прозрачностью — PNG или WebP, логотипы и значки — SVG. Большие фотографии с телефона перед выкладкой уменьшите до 1200–2000 пикселей по длинной стороне: страница будет открываться быстрее.