Тег изображения img в HTML - полный разбор для практической верстки

Введение

Тег изображения img в HTML отвечает за вывод графики на веб-странице. Через него вы подключаете иконки, фотографии, иллюстрации, логотипы, схемы и многое другое. От того, насколько грамотно вы используете img, зависит скорость загрузки сайта, доступность для людей с ограничениями по зрению и корректное отображение страницы на разных устройствах.

Здесь я разберу, как работает тег img, какие у него есть атрибуты, как подключать разные форматы изображений, делать их адаптивными, управлять загрузкой и избегать типичных ошибок.

Базовый синтаксис тега img

Самозакрывающийся тег

Тег img — одиночный. У него нет содержимого и закрывающего тега.

Простейший пример:

<img src="photo.jpg" alt="Фотография города ночью">

Комментарии:

<img
  src="photo.jpg"                             
  alt="Фотография города ночью"              
>

• src — путь к файлу изображения
• alt — текстовое описание изображения

Обратите внимание: закрывать img через </img> нельзя, этого тега не существует.

Обязательные атрибуты

Смотрите, ключевые атрибуты, без которых лучше не использовать тег img:

• src — без него браузер не узнает, откуда брать картинку
• alt — без него страдает доступность и SEO, а также сложно отладить ошибки загрузки

Формально HTML разрешает опускать alt, но в реальной разработке его нужно прописывать почти всегда.

Атрибут src и способы указания пути к изображению

Абсолютный и относительный путь

Давайте разберемся, как правильно указывать путь в src.

Абсолютный URL

<img src="https://example.com/images/logo.png" alt="Логотип компании">

Комментарии:

<img
  src="https://example.com/images/logo.png"  <!-- Полный путь до файла -->
  alt="Логотип компании"                     <!-- Текст-замена -->
>

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

Относительный путь

<!-- Текущая папка -->
<img src="logo.png" alt="Логотип">

<!-- Вложенная папка images -->
<img src="images/photo.jpg" alt="Фотография продукта">

<!-- Подняться на уровень выше -->
<img src="../assets/icons/search.svg" alt="Иконка поиска">

Относительные пути чаще используют внутри проекта — их проще поддерживать при переносе сайта.

Путь до локальных файлов и ошибка начинающих

Одна из частых ошибок — указание локальных путей к файлам на компьютере:

<!-- Так делать нельзя -->
<img src="C:\Users\Alex\Pictures\image.jpg" alt="Фото">

Браузер у других пользователей не сможет открыть такой путь, потому что не имеет доступа к вашим локальным файлам.

Правильный подход:

1. Поместите изображение в папку проекта (например, img или assets)
2. Укажите путь относительно HTML-файла:

<img src="img/image.jpg" alt="Изображение из папки проекта">

Атрибут alt и текстовое описание

Зачем нужен alt

Атрибут alt — это альтернативный текст. Он используется:

• экранными дикторами для людей с нарушениями зрения
• поисковыми системами для понимания содержания изображения
• браузером, если картинка не загрузилась

Пример:

<img src="product-1.jpg" alt="Умные часы с черным ремешком на руке">

Комментарии:

<img
  src="product-1.jpg"                                 <!-- Изображение товара -->
  alt="Умные часы с черным ремешком на руке"         <!-- Описание того, что на картинке -->
>

Как правильно писать alt

Смотрите несколько правил:

• описывайте, что именно изображено: кто, что, в каком контексте
• не пишите "картинка", "фото" без необходимости
• используйте ключевые слова естественно, а не ради SEO
• не дублируйте подписи под изображением, если они уже есть рядом и читаются экранным диктором

Примеры удачных alt:

• "Схема архитектуры микросервисов с пятью сервисами и брокером сообщений"
• "Скриншот панели администратора интернет-магазина с разделом заказы"
• "Диаграмма роста выручки по кварталам с 2020 по 2024 год"

Когда alt можно оставить пустым

Иногда alt стоит задать пустым:

<img src="decor.svg" alt="">

Комментарии:

<img
  src="decor.svg"  <!-- Декоративный элемент интерфейса -->
  alt=""           <!-- Пустой alt говорит скринридеру игнорировать картинку -->
>

Это уместно, если изображение не несет смысловой нагрузки, а является чисто декоративным: фоновая иконка, декоративная линия, разделитель.

Управление размерами изображений: width и height

Задание размеров через атрибуты

Вы можете указать размеры прямо в теге:

<img src="photo.jpg" alt="Пляж" width="400" height="300">

Комментарии:

<img
  src="photo.jpg"
  alt="Пляж"
  width="400"   <!-- Ширина в пикселях -->
  height="300"  <!-- Высота в пикселях -->
>

Здесь браузер зарезервирует нужное место на странице до загрузки изображения. Это помогает избежать "прыжков" верстки (layout shift).

Важно: значения width и height — это логические пиксели, а не физические. На экранах с высокой плотностью точек одна логическая единица может соответствовать нескольким реальным пикселям.

Задание размеров через CSS

Гораздо гибче управлять размерами через CSS:

<img class="product-photo" src="photo.jpg" alt="Фото товара">

.product-photo {
  width: 100%;        /* Картинка растягивается по ширине родителя */
  height: auto;       /* Высота меняется пропорционально ширине */
  max-width: 500px;   /* Но не больше 500 пикселей */
}

Комментарии:

.product-photo {
  width: 100%;      /* Занимаем всю доступную ширину контейнера */
  height: auto;     /* Сохраняем пропорции изображения */
  max-width: 500px; /* Ограничиваем размер сверху */
}

Так вы сможете легко делать изображения адаптивными.

Сохранение пропорций и "растянутые" картинки

Если задать и width, и height вручную без учета реального соотношения сторон, изображение может исказиться.

Неправильно:

<img src="photo.jpg" alt="Фото" width="300" height="300">

Если изначально фото 600x400, оно станет "сплюснутым". Правильнее:

• задать только одну сторону и height: auto в CSS
• или сохранять корректное соотношение ширины к высоте

Пример:

<img src="photo.jpg" alt="Фото" width="300">

img {
  height: auto;  /* Сохраняем пропорции */
}

Атрибут title и всплывающая подсказка

Атрибут title добавляет всплывающую подсказку при наведении мышью:

<img src="info.png" alt="Иконка информации" title="Подробнее о правилах сервиса">

Комментарии:

<img
  src="info.png"
  alt="Иконка информации"                         <!-- То, что читают скринридеры -->
  title="Подробнее о правилах сервиса"           <!-- Подсказка при наведении мышью -->
>

Но важно понимать:

• title не заменяет alt
• title читается скринридерами не всегда и не везде
• ориентироваться только на title с точки зрения доступности нельзя

Если вам нужен всплывающий текст, который будет доступен всем пользователям, лучше реализовать его через ARIA-атрибуты и собственные всплывающие элементы в разметке и CSS/JS.

Загрузка изображений и атрибут loading

Ленивая загрузка (lazy loading)

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

Пример:

<img src="photo.jpg" alt="Фото" loading="lazy">

Комментарии:

<img
  src="photo.jpg"
  alt="Фото"
  loading="lazy"  <!-- Картинка загрузится только при приближении к зоне видимости -->
>

Значения:

• lazy — отложенная загрузка, когда пользователь приближается к области изображения
• eager — загрузить как можно раньше
• auto — оставить решение браузеру (значение по умолчанию)

Практический подход:

• для изображений "ниже первого экрана" (внизу страницы) используйте loading="lazy"
• для важного контента в зоне первого экрана лучше оставить поведение по умолчанию или явно указать eager

Атрибуты srcset и sizes: адаптивные изображения

Задача: разные изображения для разных устройств

На мобильных устройствах обычно достаточно менее "тяжелых" изображений, а на ретина-экранах нужно больше пикселей, чтобы картинка была четкой. Атрибуты srcset и sizes как раз позволяют подстроиться под эти условия.

Простой пример с плотностью пикселей

Давайте посмотрим пример для обычных и ретина-экранов:

<img
  src="photo-1x.jpg"
  srcset="photo-1x.jpg 1x, photo-2x.jpg 2x"
  alt="Пейзаж с горами"
>

Комментарии:

<img
  src="photo-1x.jpg"                      <!-- Версия по умолчанию -->
  srcset="
    photo-1x.jpg 1x,                      <!-- Для обычных экранов -->
    photo-2x.jpg 2x                       <!-- Для ретина-экранов -->
  "
  alt="Пейзаж с горами"
/>

Браузер сам выберет подходящий вариант, исходя из плотности пикселей экрана.

srcset с указанием ширины изображений

Более гибкий вариант — указывать физическую ширину файла:

<img
  src="banner-600.jpg"
  srcset="
    banner-400.jpg 400w,
    banner-600.jpg 600w,
    banner-900.jpg 900w
  "
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Рекламный баннер с текстом акции"
>

Комментарии:

<img
  src="banner-600.jpg"                 <!-- Файл по умолчанию -->
  srcset="
    banner-400.jpg 400w,              <!-- Файл шириной 400px -->
    banner-600.jpg 600w,              <!-- Файл шириной 600px -->
    banner-900.jpg 900w               <!-- Файл шириной 900px -->
  "
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Рекламный баннер с текстом акции"
/>

Как работает sizes:

• "(max-width: 600px) 100vw" — если ширина окна меньше или равна 600px, предполагаем, что картинка будет занимать всю ширину окна (100vw)
• "600px" — во всех остальных случаях предполагаем, что картинка будет примерно 600px по ширине

На основе этой информации браузер выбирает наиболее подходящий файл из srcset.

Тег picture: разные форматы и условия показа

Когда нужен picture

Тег picture используется, когда вы хотите:

• показывать разные форматы изображений в зависимости от поддержки браузером (например, WebP и PNG)
• менять кадр или композицию изображения на разных размерах экрана, а не только масштаб

Базовый пример:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Пример изображения с поддержкой WebP">
</picture>

Комментарии:

<picture>
  <source
    srcset="image.webp"          <!-- Современный формат WebP -->
    type="image/webp"            <!-- Говорим браузеру тип файла -->
  >
  <source
    srcset="image.jpg"           <!-- Альтернативный формат JPEG -->
    type="image/jpeg"
  >
  <img
    src="image.jpg"              <!-- Фолбэк для браузеров без поддержки <picture> -->
    alt="Пример изображения с поддержкой WebP"
  >
</picture>

Браузер выберет первый поддерживаемый формат. Если <picture> или <source> не поддерживаются, будет использован обычный <img>.

Разные изображения для разных размеров экрана

Представим, что на мобильном вы хотите показывать вертикальную версию баннера, а на десктопе — горизонтальную.

<picture>
  <source
    srcset="banner-mobile.jpg"
    media="(max-width: 600px)"
  >
  <source
    srcset="banner-desktop.jpg"
    media="(min-width: 601px)"
  >
  <img src="banner-desktop.jpg" alt="Рекламный баннер">
</picture>

Комментарии:

<picture>
  <source
    srcset="banner-mobile.jpg"         <!-- Вертикальная версия -->
    media="(max-width: 600px)"        <!-- Для экранов до 600px -->
  >
  <source
    srcset="banner-desktop.jpg"       <!-- Горизонтальная версия -->
    media="(min-width: 601px)"        <!-- Для экранов шире 600px -->
  >
  <img
    src="banner-desktop.jpg"          <!-- Запасной вариант -->
    alt="Рекламный баннер"
  >
</picture>

Так вы можете не только менять размер, но и композицию изображения (обрезка, кадр, содержание).

Форматы изображений и их особенности

Основные форматы

Давайте коротко пройдемся по популярным форматам:

• JPEG (jpg)
  • хорошо подходит для фотографий
  • поддерживает сжатие с потерями
  • не поддерживает прозрачность
• PNG
  • хорошо для иконок, скриншотов, изображений с текстом
  • поддерживает прозрачность
  • может быть довольно "тяжелым" при сложных градиентах
• GIF
  • простая анимация
  • ограниченная палитра, не подходит для качественных фото
• SVG
  • векторная графика (иконки, логотипы, схемы)
  • хорошо масштабируется без потери качества
  • удобно изменять стили через CSS
• WebP / AVIF
  • современные форматы с высокой степенью сжатия
  • позволяют уменьшить размер файлов без заметной потери качества
  • поддержка уже хорошая, но иногда еще нужен фолбэк

Выбор формата на практике

Примеры решений:

• иконки, логотипы, простые схемы — SVG
• фотографии товаров, людей, фоновая фотографика — JPEG или WebP/AVIF
• изображения с прозрачностью (например, логотип поверх фона) — PNG или WebP/AVIF
• короткая иллюстративная анимация — WebP-анимация или видео, GIF только если других вариантов нет

Стилизация изображений через CSS

Закругленные углы и рамки

Теперь вы увидите, как легко добавить оформление:

<img class="avatar" src="user.jpg" alt="Аватар пользователя">

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;        /* Делаем круг */
  object-fit: cover;         /* Обрезаем лишнее, сохраняя заполнение */
  border: 2px solid #ccc;    /* Легкая рамка */
}

Комментарии:

.avatar {
  width: 120px;           /* Фиксируем размер контейнера */
  height: 120px;
  border-radius: 50%;     /* Превращаем квадрат в круг */
  object-fit: cover;      /* Заполняем контейнер, обрезая лишнее */
  border: 2px solid #ccc; /* Добавляем рамку */
}

object-fit: управление обрезкой и масштабированием

Свойство object-fit важно, когда вы задаете фиксированный контейнер:

• cover — заполняет контейнер полностью, может обрезать часть изображения
• contain — вписывает изображение целиком, могут появиться поля
• fill — растягивает, может исказить пропорции
• none — не масштабирует, показывает изображение в оригинальном размере
• scale-down — берет меньшее из none и contain

Пример:

.product-photo {
  width: 300px;
  height: 200px;
  object-fit: cover;   /* Картинка обрежется, но заполнит контейнер */
}

Семантика и доступность изображений

Изображение как часть текста и как отдельный контент

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

Пример с подписью:

<figure>
  <img src="chart.png" alt="График роста числа пользователей по месяцам">
  <figcaption>Рост числа пользователей с января по июнь 2024 года</figcaption>
</figure>

Комментарии:

<figure>
  <img
    src="chart.png"
    alt="График роста числа пользователей по месяцам"
  >
  <figcaption>
    Рост числа пользователей с января по июнь 2024 года
  </figcaption>
</figure>

Здесь:

• alt помогает тем, кто не видит картинку вообще
• figcaption дает подпись для всех пользователей

Кликабельные изображения и ссылки

Если вы используете изображение как ссылку, alt должен описывать действие или цель ссылки:

<a href="/home">
  <img src="logo.svg" alt="Перейти на главную страницу">
</a>

Комментарии:

<a href="/home">
  <img
    src="logo.svg"
    alt="Перейти на главную страницу"   <!-- Описывает действие при клике -->
  >
</a>

Так пользователю понятно, что произойдет при активации ссылки.

Оптимизация изображений

Размер файла и скорость загрузки

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

1. Обрезать изображение до реального нужного размера
2. Сжать его через инструменты оптимизации
3. Использовать современные форматы (WebP, AVIF), оставляя фолбэк для старых браузеров
4. Использовать srcset и sizes, чтобы не загружать лишние пиксели

Пример с picture для WebP:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <source srcset="photo.jpg" type="image/jpeg">
  <img src="photo.jpg" alt="Фото продукта" loading="lazy">
</picture>

Спрайты и SVG-иконки

Раньше для иконок часто использовали растровые спрайты. Сейчас чаще применяют:

• SVG-спрайты
• inline SVG
• иконки через шрифты (реже)

SVG хорошо подходит для иконок, потому что:

• не теряет четкость на ретина-экранах
• легко красится и трансформируется через CSS
• не размывается при изменении размеров

Типичные ошибки при работе с img

Отсутствие alt или alt по умолчанию

Ошибка:

<img src="photo.jpg" alt="">

или

<img src="photo.jpg" alt="Фото">

в ситуации, когда изображение содержит важную информацию.

Как исправить:

• пишите осмысленный alt
• используйте пустой alt только для декоративной графики

Неуказанные размеры и "прыгающая" верстка

Когда вы не задаете width и height (в атрибутах или CSS), браузер не знает, сколько места резервировать, и верстка может "прыгать" после загрузки картинок.

Минимальное решение:

<img src="photo.jpg" alt="Фото" width="600" height="400">

Комментарии:

<img
  src="photo.jpg"
  alt="Фото"
  width="600"    <!-- Реальная ширина изображения -->
  height="400"   <!-- Реальная высота -->
>

Либо аналогично задайте размеры через CSS, сохранив соотношение сторон.

Использование больших изображений там, где нужны маленькие

Например, вы вставляете фото 4000x3000, а на странице показываете его в 400x300, просто сжимая через CSS. Браузер все равно качает полный файл.

Правильнее:

• подготовить несколько версий изображения под разные размеры
• использовать srcset и sizes

Текст как часть изображения

Если вы размещаете важный текст прямо на картинке (без текстовой копии в HTML), то:

• поисковые системы не "увидят" этот текст
• пользователи с проблемами зрения могут не получить эту информацию
• текст сложно адаптировать под разные экраны и языки

Лучше:

• использовать живой текст в HTML
• оставлять в изображении только фон, иллюстрацию

Заключение

Тег изображения img — один из самых часто используемых в HTML, но при этом именно с ним у разработчиков возникает множество мелких, но критичных ошибок. Правильное использование src и alt, задание размеров, адаптивные изображения через srcset, sizes и picture, а также внимательное отношение к доступности и оптимизации файлов позволяют одновременно улучшить и качество интерфейса, и скорость работы сайта.

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

Частозадаваемые технические вопросы по тегу img

Как сделать так, чтобы изображение не выходило за пределы контейнера

Используйте CSS:

img {
  max-width: 100%;  /* Не шире контейнера */
  height: auto;     /* Сохраняем пропорции */
}

Комментарии:

img {
  max-width: 100%;  /* Ограничиваем ширину размером родителя */
  height: auto;     /* Автоматически подстраиваем высоту */
}

Это базовый прием для адаптивных изображений.

Почему изображение не обновляется после замены файла

Браузер кеширует файлы. Чтобы "пробить" кеш:

<img src="photo.jpg?v=2" alt="Фото">

Комментарии:

<img
  src="photo.jpg?v=2"  <!-- query-параметр меняется при обновлении файла -->
  alt="Фото"
/>

При каждой замене файла меняйте версию (v=3, v=4 и тд). Можно автоматизировать через сборщик.

Как сделать черно-белое изображение по ховеру без замены файла

Используйте CSS-фильтры:

img {
  filter: grayscale(100%);         /* Черно-белое по умолчанию */
  transition: filter 0.3s ease;    /* Плавный переход */
}

img:hover {
  filter: grayscale(0);            /* Цветное при наведении */
}

Комментарии:

img {
  filter: grayscale(100%);     /* Применяем монохром */
  transition: filter 0.3s;     /* Плавная анимация изменения фильтра */
}

img:hover {
  filter: grayscale(0);        /* Убираем фильтр при наведении */
}

Как сделать, чтобы при загрузке страницы сначала показывалась "заглушка" вместо тяжелого изображения

Используйте фоновый цвет или небольшую заглушку плюс атрибут loading:

<img
  class="preview"
  src="placeholder.jpg"
  data-src="big-photo.jpg"
  alt="Фото"
/>

// Пример очень простой "ленивой" подмены
const img = document.querySelector('.preview');
// Здесь мы создаем новый объект Image
const real = new Image();
real.src = img.dataset.src;          // Берем реальный путь из data-src
real.onload = () => {                // Когда загрузилось
  img.src = real.src;                // Подменяем src у тега img
};

Комментарии в JS:

const img = document.querySelector('.preview'); // Ищем картинку-заглушку
const real = new Image();                       // Создаем объект для загрузки реальной картинки
real.src = img.dataset.src;                     // Указываем путь к "тяжелому" изображению
real.onload = () => {                           // Ждем завершения загрузки
  img.src = real.src;                           // После чего подменяем заглушку на настоящее изображение
};

Так пользователь сразу видит заглушку, а реальное изображение подгружается "поверх" нее.