Картинки в HTML: шпаргалка для новичков

Картинка в HTML вставляется тегом <img> с двумя атрибутами: src задаёт адрес файла, alt описывает содержание словами. Всё остальное – размеры, формат, сжатие и ленивая загрузка – решает, быстро ли откроется страница и не поедет ли на ней вёрстка. Ниже рабочие примеры, которые запускаются копированием, и таблица форматов.

Обновлено: 2026-09-30 22:21:36 Виталий Черкасовавтор материала

Как вставить картинку: минимальный рабочий пример

Создайте папку, а в ней файл index.html. Положите рядом картинку image.png. Скопируйте код ниже в index.html и откройте файл в браузере.

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

Если всё сделано верно, под заголовком появится картинка. Тег <img> одиночный: закрывающего тега у него нет. Без src браузеру нечего показывать, а без alt у страницы пропадёт описание картинки для тех, кто её не видит.

Строка <meta charset="utf-8"> нужна, чтобы кириллица в заголовке и в alt не превратилась в набор нечитаемых знаков.

Пишите атрибуты в прямых кавычках ". Типографские кавычки из текстовых редакторов вроде Word браузер не читает как границы значения, и пример перестаёт работать. Копируйте код из редактора кода, а не из документа Word.

Путь к картинке: относительный, абсолютный и с другого сайта

Адрес в src сообщает браузеру, где лежит файл. Путь считается от папки со страницей. Вот пять форм записи:

• image.png – файл лежит в одной папке со страницей;
• images/image.png – файл в подпапке images рядом со страницей;
• ../image.png – файл на одну папку выше;
• /images/image.png – путь от корня сайта;
• https://example.com/image.png – полный адрес, в том числе чужого сайта.

Для своих картинок берите путь без адреса сайта. Пока вы открываете файл двойным щелчком с компьютера, пишите путь от папки страницы: image.png, images/image.png или ../image.png. Путь от корня /images/image.png проверяйте после загрузки сайта на сервер.

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

Почему картинка не отображается

Вместо картинки видны значок битого файла или текст из alt. Причина почти всегда в адресе. Проверьте по порядку:

1. Откройте файл отдельно. Файл на компьютере перетащите из папки в окно браузера. Файл на сервере откройте по полному адресу в адресной строке. Файл не открылся – адрес или имя записаны неверно.
2. Сверьте имя файла с записью в src буква в букву, включая регистр. Расширения .jpg и .jpeg – разные записи.
3. Убедитесь, что файл лежит в папке, которую называет путь. Для images/image.png нужна подпапка images рядом со страницей.
4. Проверьте начало пути. Открываете страницу с диска, а путь начинается с /? Уберите слеш в начале: images/image.png.
5. После загрузки сайта на сервер проверьте, что вместе со страницей загружена и папка с картинками.
6. Обновите страницу: картинка должна появиться на месте.

alt: зачем он нужен и как его писать

Атрибут alt – текст, который заменяет картинку. Браузер показывает его на месте файла, если тот не загрузился. Скринридер читает его вслух незрячим пользователям. Поисковики используют его, чтобы понять, что изображено.

Пишите в alt то, что видно на картинке, одной короткой фразой. Сравните две записи:

<img src="cat.jpg" alt="Рыжий кот спит на подоконнике">
<img src="cat.jpg" alt="картинка">

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

У декоративной картинки – линии-разделителя или узора – оставьте пустое значение: alt="". Сам атрибут не убирайте. Пустое значение сообщает, что картинка – украшение, и браузеры для незрячих могут её пропустить.

Размеры: width и height, и почему их нужно задавать всегда

Атрибуты width и height – не теги, а атрибуты тега <img>. Впишите в них натуральные размеры файла в пикселях: ширину и высоту самой картинки. Значение – целое число без единиц измерения, то есть 800, а не 800px и не 50%.

<img src="photo.jpg" alt="Рыжий кот спит на подоконнике" width="800" height="600">

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

Размер на экране меняйте в CSS, а не подгонкой атрибутов. Так картинка подстраивается под ширину блока:

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

Правило max-width: 100% не даёт картинке выйти за границы блока. Правило height: auto сохраняет пропорции, потому что высота не фиксируется числом. Так советует и web.dev: не задавать картинке фиксированную высоту в CSS.

Форматы: JPEG, PNG, GIF, SVG, WebP, AVIF

Формат определяет, сколько весит файл и что он умеет. Сравните шесть форматов в таблице.

WebP и AVIF сегодня – вариант по умолчанию для фотографий. Google приводит такие цифры: WebP без потерь на 26% меньше PNG, а WebP с потерями на 25–34% меньше сопоставимого JPEG при одинаковом индексе качества SSIM. AVIF сжимает ещё сильнее: в сравнении Imgix, которое приводит web.dev, AVIF экономит 60% размера против JPEG и 35% против WebP. Результат зависит от картинки, поэтому проверяйте его на своих файлах.

Поддержка тоже хорошая. Согласно caniuse, WebP открывают браузеры 96,8% пользователей, а AVIF – 95,4%. Как получить такие файлы, читайте в следующем разделе.

Для значков и логотипов берите SVG: векторная картинка остаётся чёткой при любом размере.

Как сжать картинку перед загрузкой

Тяжёлая картинка замедляет загрузку страницы. Два шага дают основной выигрыш: уменьшить размеры в пикселях и сжать сам файл. Единой цифры для веса назвать нельзя, она зависит от макета и аудитории. Сравнивайте размер файла до и после сжатия и останавливайтесь, пока потери не видны глазом.

1. Узнайте ширину блока, куда встанет картинка: она задана в макете или в CSS страницы. Для блока шириной 800 пикселей файл шириной 4000 пикселей не нужен.
2. Уменьшите картинку до этой ширины. Для экранов с двойной плотностью пикселей подготовьте вторую копию вдвое шире.
3. Сохраните копию в WebP или JPEG и пропустите её через инструмент сжатия.
4. Сравните результат с оригиналом на глаз и по размеру файла в его свойствах.

Сжимайте копию, а не оригинал: потерянные при сжатии детали не вернуть.

Вот инструменты, которые можно взять:

• Squoosh (squoosh.app) – сервис Google Chrome Labs. Squoosh работает в браузере и обрабатывает файл на вашем устройстве, а не на сервере. Он умеет сжимать в WebP, AVIF, MozJPEG и OxiPNG;
• TinyPNG (tinypng.com) – в бесплатной версии принимает до 20 картинок за раз, каждая до 5 МБ;
• ImageOptim – бесплатное приложение для macOS с открытым кодом;
• SVGO – оптимизатор SVG с открытым кодом.

Сервис не открылся из вашей сети – сожмите картинку в графическом редакторе. Экспортируйте её в WebP или JPEG и снижайте качество, пока разница не станет заметной.

Адаптивные картинки: srcset, sizes и picture

Телефону хватит узкого файла, широкому монитору нужен побольше. Атрибуты srcset и sizes дают браузеру выбор из нескольких файлов. Вот пример с тремя размерами:

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

В srcset перечислены три файла. Дескриптор w обязан совпадать с реальной шириной файла. Запись 400w значит «файл шириной 400 пикселей».

В sizes вы описываете, сколько места займёт картинка. Если ширина экрана до 600 пикселей, она занимает всю ширину окна (100vw), на широких экранах – 800 пикселей. Браузер учитывает размер и плотность экрана, находит в sizes первое истинное условие и выбирает из srcset файл, равный слоту. Слот – это место, которое картинка займёт на странице.

Плотность экрана сдвигает выбор. Для слота в 800 пикселей на обычном экране браузер возьмёт photo-800.jpg. На экране с двойной плотностью пикселей для того же слота он возьмёт photo-1600.jpg.

Атрибуты width и height остаются в теге: по ним браузер резервирует место. Если размер картинки на странице фиксирован, хватит дескрипторов плотности 1x и 2x:

<img src="logo.png" srcset="logo.png 1x, logo-2x.png 2x" alt="Логотип сайта" width="200" height="60">

Экрану с удвоенной плотностью пикселей достанется файл logo-2x.png.

Теперь другая задача: отдать современный формат тем, кто его понимает, а остальным – JPEG. Для этого служит элемент <picture>:

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

Браузер идёт по source сверху вниз и берёт первый, у которого совпали условие media и тип type. Если ни один не подошёл, показывается img. Элемент img внутри picture обязателен: без него картинка не появится. Он же хранит alt и размеры.

Элемент picture поддерживают браузеры 97% пользователей согласно caniuse.

Ускорение загрузки: lazy loading и приоритеты

Браузер по умолчанию грузит все картинки страницы сразу, даже те, что лежат далеко внизу. Атрибут loading="lazy" откладывает загрузку, пока картинка не приблизится к видимой области. Добавьте его картинкам ниже первого экрана:

<img src="photo.jpg" alt="Рыжий кот спит на подоконнике" width="800" height="600" loading="lazy" decoding="async">

Значение loading по умолчанию – eager: браузер грузит картинку сразу. Атрибут decoding="async" просит раскодировать картинку после отрисовки остального содержимого. Атрибут decoding допускает значения sync, async и auto; по умолчанию выбор остаётся за браузером.

Не откладывайте загрузку картинок, которые видны сразу при открытии страницы. Браузер покажет их позже, и первый экран будет открываться медленнее. Ленивую загрузку ставьте только тем, что лежат ниже.

Главной картинке первого экрана добавьте fetchpriority="high". Для главной картинки первого экрана web.dev рекомендует высокий приоритет загрузки: браузер возьмёт её раньше остальных.

<img src="hero.jpg" alt="Рыжий кот на подоконнике у окна" width="1200" height="600" fetchpriority="high">

Учтите: fetchpriority – подсказка, а не команда, браузер вправе её не выполнить.

Согласно caniuse, loading=lazy понимают браузеры 95,8% пользователей, а fetchpriority – 93,7%. Браузер, который атрибута не знает, его игнорирует, а картинка загружается как обычно.

Картинка-ссылка и подпись

Чтобы картинка вела на другую страницу, оберните её тегом <a>:

<a href="https://example.com/catalog.html"><img src="catalog.jpg" alt="Перейти в каталог товаров" width="300" height="200"></a>

Здесь alt описывает не саму картинку, а то, куда ведёт ссылка. Другого текста у такой ссылки нет, и по alt человек понимает, куда попадёт.

Для подписи используйте пару <figure> и <figcaption>:

<figure>
  <img src="cat.jpg" alt="Рыжий кот спит на подоконнике" width="800" height="600">
  <figcaption>Кот Барсик любит спать у окна</figcaption>
</figure>

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

Фон: как это делается сейчас

Фоновую картинку задают в CSS, а не в HTML. Свойство background-image принимает адрес файла в url(). Сохраните texture.jpg и hero.jpg рядом с файлом страницы и откройте его в браузере:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Страница с фоном</title>
<style>
body {
  background-image: url("texture.jpg");
  background-repeat: repeat;
}
.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 300px;
}
</style>
</head>
<body>
<div class="hero">
<h1>Заголовок на фоне</h1>
</div>
</body>
</html>

Страница получит текстуру на всём экране, а блок с заголовком – свою картинку. Разберём свойства:

• background-size: cover – масштабирует картинку так, чтобы она закрыла весь блок; лишнее обрезается;
• background-repeat – значение repeat укладывает картинку плиткой, что подходит для текстуры, а no-repeat оставляет одну копию;
• background-position: center – выбирает, какая часть картинки останется видна: здесь середина.

Атрибут background у <body> из старых учебников устарел. Спецификация HTML относит его к устаревшим и советует использовать вместо него CSS. Не берите его в новые страницы.

У фона нет alt. Важную картинку держите в <img>, а фоном оформляйте только украшения.

Устаревшие атрибуты и чем их заменить

В примерах десятилетней давности встречаются атрибуты, которыми сегодня пользоваться нельзя. Спецификация HTML называет атрибуты align, hspace и vspace у img устаревшими и запрещает авторам ими пользоваться. Для атрибута border у img спецификация допускает только значение 0 и советует использовать CSS.

Вот как выглядит замена align="left" и hspace="20". Сначала в HTML на картинку ставится класс left:

<img src="cat.jpg" alt="Рыжий кот спит на подоконнике" width="400" height="300" class="left">

Затем правило для этого класса кладётся в CSS: внутрь тега <style> в <head> страницы или в файл стилей:

<style>
.left {
  float: left;
  margin: 0 20px 10px 0;
}
</style>

Текст обтекает картинку справа, а отступ в 20 пикселей отодвигает его от края. Внутри файла стилей теги <style> не нужны: там пишут одно правило. Атрибуты width и height у <img> устаревшими не считаются: ставьте их всегда.

Частые ошибки новичка

• Кириллица и пробелы в имени файла. Называйте файлы латиницей, строчными буквами, через дефис: ryzhiy-kot.jpg. Такое имя одинаково читается в любой системе;
• Перепутанные слеши. В адресах пишите прямой слеш /, а не обратный \ из проводника Windows. Единая запись не подведёт при переносе на сервер;
• Регистр в имени файла. Многие серверы различают Cat.JPG и cat.jpg. Страница, которая работает у вас на компьютере, после загрузки покажет пустое место. Пишите имена и пути одним регистром;
• Растянутая маленькая картинка. Файл шириной 200 пикселей в блоке шириной 800 выглядит мутным: браузеру нечем заполнить недостающие пиксели. Берите файл не уже блока;
• Нет alt. Добавляйте атрибут каждой картинке, а декоративной оставляйте alt="";
• Картинка на несколько мегабайт. Уменьшите размеры и сожмите файл, как в разделе про сжатие.

Совет от нашей редакции: начните с четырёх атрибутов – src, alt, width и height, а остальное добавляйте по мере надобности.