Как вставить картинку в HTML: тег img, путь к файлу и атрибуты

Картинку в HTML вставляют тегом <img>. В атрибут src пишете путь к файлу, в alt короткое описание того, что на картинке: <img src="img/cat.jpg" alt="Рыжий кот спит на подоконнике">. Закрывающего тега у <img> нет, текст внутрь не пишется.

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

CheckroiПодборка курсов по HTML207 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

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

Для проверки хватит текстового редактора и браузера. Как завести файл страницы, показано в инструкции как создать HTML-файл index.html.

1. Положите картинку рядом со страницей. Удобнее всего завести папку img в той же папке, где лежит index.html, и сохранить фото туда.
2. Добавьте тег <img> в нужное место страницы и пропишите в src путь к файлу вместе с расширением.
3. Заполните alt: одной фразой опишите, что изображено. Сохраните файл и обновите страницу в браузере.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Моя первая страница</title>
</head>
<body>
  <h1>Мой кот</h1>
  <img src="img/cat.jpg" alt="Рыжий кот спит на подоконнике" width="600" height="400">
</body>
</html>

Писать </img> не нужно: валидатор W3C считает такой закрывающий тег ошибкой. Запись со слешем <img ... /> допустима, но ничего не меняет.

Как указать путь к картинке в src

Картинка не появляется чаще всего из-за пути. Браузер ищет файл относительно той страницы, на которой стоит тег, поэтому один и тот же src работает на главной и ломается на странице из вложенной папки.

Возьмём сайт с такой структурой:

site/
├── index.html
├── img/
│   └── cat.jpg
└── pages/
    └── about.html

Если на странице pages/about.html оставить src="img/cat.jpg", браузер пойдёт искать файл по адресу pages/img/cat.jpg и получит ошибку 404.

Путь от корня со слешем в начале удобен на настоящем сайте: он одинаково работает на любой странице. Но если открыть файл двойным щелчком с диска, корнем станет корень диска, и картинка пропадёт. Как открыть страницу через браузер правильно, разобрано в статье как открыть HTML-файл.

Картинка с другого сайта

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

Атрибуты тега img: что за что отвечает

Обязательных атрибутов два: src и alt. Остальные добавляют по задаче.

Подробные описания всех значений есть в справочнике MDN по элементу img.

Что писать в alt

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

• Фото по делу: alt="Схема подключения датчика к Arduino", а не alt="картинка".
• Чистое украшение вроде узора или разделителя: пустой alt="". Так экранный чтец его пропустит. Совсем убирать атрибут нельзя, без него валидатор выдаёт ошибку.
• Картинка-ссылка: в alt пишут, куда ведёт ссылка, например alt="Перейти в корзину". Сам тег ссылки разобран в инструкции про тег a.

Поисковикам alt тоже нужен. В рекомендациях Google по картинкам сказано: «Определяя тему изображения, Google учитывает описания в атрибутах alt». Там же совет не перегружать alt ключевыми словами: список из десятка синонимов через пробел выглядит как спам.

Как задать размер картинки

Атрибуты width и height пишут числом без px. Значение width="600px" валидатор считает ошибкой.

Ставить оба атрибута стоит даже тогда, когда размер на экране потом задаёт CSS. По справке MDN, «Including height and width enables the aspect ratio of the image to be calculated by the browser prior to the image being loaded». Браузер заранее оставит под картинку место, и текст не будет прыгать вниз, когда она догрузится.

Чтобы большое фото не вылезало за край экрана телефона, добавьте в CSS одно правило:

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

Не забывайте про height: auto. Если оставить только max-width, ширина ужмётся, а высота останется из атрибута. Фото 600 × 400 в колонке шириной 300 пикселей станет 300 × 400 и вытянется по вертикали. Как подключить стили к странице, рассказано в статье как подключить CSS к HTML.

Картинка под разные экраны: srcset и picture

Телефону незачем качать фото шириной 1600 пикселей, если на экране оно займёт 400. Атрибут srcset перечисляет несколько версий файла с их шириной, а sizes подсказывает, какую ширину картинка займёт на странице. Браузер сам выберет подходящий файл:

<img src="img/cat-800.jpg"
     srcset="img/cat-400.jpg 400w, img/cat-800.jpg 800w, img/cat-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Рыжий кот спит на подоконнике" width="800" height="533">

В src остаётся запасной файл для браузеров, которые srcset не понимают. Адаптивную вёрстку целиком, от гибкой сетки до картинок под разные экраны, подробно проходят на курсах по HTML.

Тег <picture> нужен, когда хочется отдать новый формат с запасным вариантом. Браузер берёт первый <source>, который умеет показать, а если не подошёл ни один, показывает обычный <img> внутри:

<picture>
  <source srcset="img/cat.avif" type="image/avif">
  <source srcset="img/cat.webp" type="image/webp">
  <img src="img/cat.jpg" alt="Рыжий кот спит на подоконнике" width="800" height="533">
</picture>

alt, размеры и класс для стилей пишут у <img>, а не у <picture>.

Подпись к фото: figure и figcaption

Если под фото нужна видимая подпись, оберните картинку в <figure> и добавьте <figcaption>. Так подпись связана с изображением прямо в разметке. Google, по его справке, берёт сведения о картинке в том числе из подписей к ним:

<figure>
  <img src="img/graph.png" alt="Рост продаж с января по июнь" width="800" height="450">
  <figcaption>Продажи за первое полугодие</figcaption>
</figure>

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

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Как сделать картинку ссылкой

Оберните <img> в тег <a>, и по клику на картинку откроется адрес из href:

<a href="https://checkroi.ru/courses/navyk/html/">
  <img src="img/banner.png" alt="Курсы по HTML" width="300" height="250">
</a>

У такой ссылки нет текста, поэтому объяснить, куда она ведёт, может только alt. Пустой alt здесь оставит экранный чтец без подсказки, куда ведёт ссылка. Атрибуты href, target и rel подробно разобраны в инструкции как сделать ссылку в HTML.

Картинка фоном через CSS

Узоры, текстуры и фон шапки сайта ставят не тегом, а свойством background-image:

.hero {
  background-image: url("../img/pattern.png");
  background-size: cover;
  min-height: 300px;
}

Путь внутри url() считается от файла со стилями, а не от страницы. Если CSS лежит в папке css/, к картинкам в соседней img/ ведёт ../img/.

Для однотонного фона картинка не нужна, хватит свойства background-color и кода цвета. Как записывают цвет в RGB и HEX, разобрано в статье о цветах RGB.

Фоном стоит делать только украшения. В справке Google прямо сказано: «Google не индексирует изображения CSS». Экранные чтецы фон тоже не озвучивают, поэтому фото товара, схему или график вставляйте через <img>.

Какой формат выбрать

Все шесть форматов из таблицы показывают современные браузеры. Разница в весе файла и в том, что формат умеет.

В руководстве MDN по форматам для растровых картинок советуют WebP или AVIF, а запасной PNG или JPEG отдавать через <picture>. Для иконок и схем там рекомендуют SVG. Google Поиск, по его справке, поддерживает BMP, GIF, JPEG, PNG, WebP, SVG и AVIF.

Как ускорить загрузку картинок

Вот что ускоряет загрузку страницы с картинками:

1. Уменьшите файл до нужного размера. Фото с камеры шириной 4000 пикселей в колонке на 800 пикселей весит лишние мегабайты. Сохраните копию нужной ширины и сожмите её.
2. Добавьте loading="lazy" картинкам, которые ниже первого экрана. Браузер скачает их, когда человек до них прокрутит.
3. Не ставьте lazy на главное фото вверху страницы. В руководстве web.dev так и написано: «Don’t lazy-load images that are likely to be in-viewport when the page loads». Такой картинке, наоборот, можно дать fetchpriority="high".
4. Прописывайте width и height, чтобы страница не дёргалась при загрузке.
5. Называйте файлы понятно: ryzhij-kot.jpg вместо IMG_0023.JPG. Google в той же справке называет имена вроде image1.jpg шаблонными и советует их избегать.

Частые ошибки, из-за которых картинка не видна

Признак почти всегда один: вместо фото виден текст из alt или значок сломанной картинки. Откройте инструменты разработчика (F12), вкладку Console: там будет строка с адресом, который браузер не смог загрузить.

Проверить разметку целиком можно в валидаторе W3C: вставьте код страницы, и он покажет пропущенный alt, единицы в width и ошибки в путях. Устаревшие атрибуты вроде align валидатор отмечает предупреждением и предлагает заменить их на CSS. Другие теги, которые встречаются рядом с картинками, собраны в обзоре основных тегов HTML.

Где освоить HTML и CSS системно

Чтобы вставить картинку, хватит одного тега. Свёрстанная страница, которая одинаково выглядит на телефоне и мониторе, требует уверенного HTML, CSS и адаптивной вёрстки. Если хочется разобраться в этом по порядку с проверкой заданий, посмотрите курсы, где HTML разбирают с нуля:

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	29 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям29 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по HTML

Если вы ещё выбираете направление, прочитайте, чем занимается HTML-верстальщик и сколько он зарабатывает.