Код Справочник по фронтенду

#статьи

18 июл 2025
0

Тег <img> в HTML для вставки картинок: атрибуты, примеры использования

Учимся вставлять изображения в веб-страницы и стилизовать их с помощью атрибутов.

Иллюстрация: Оля Ежак для Skillbox Media

Редакция «Код» Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

Картинки — не просто украшение страницы. Они помогают донести смысл, сделать материал нагляднее и визуально разнообразнее. Чтобы добавить изображение в HTML-документ, используют тег <img>.

Этот тег указывает браузеру: здесь нужно вставить картинку. Работает он просто, но важно учитывать несколько нюансов, чтобы всё отображалось правильно и быстро загружалось.

Содержание

Как вставить изображение с помощью <img>
Что такое атрибут src и почему он обязателен
Какие ссылки можно указывать в src
Форматы изображений <img> и стилизация с помощью CSS
Как тег <img> влияет на SEO и доступность
Типичные ошибки
Практика: подключаем изображения, адаптируем и стилизуем их с помощью CSS

Как вставить изображение с помощью <img>

Чтобы вставить картинку на страницу, достаточно прописать тег <img> с обязательным атрибутом src: он задаёт путь к файлу с изображением:

<img src="logoSkillbox.png">

Если путь указан правильно, браузер загрузит и отобразит файл на странице.

*Скриншот: Google Chrome / Skillbox Media*

Тег <img> одиночный: он не требует закрывающей пары. В HTML5 можно писать его так, без косой черты на конце:

<img src="...">

Это корректный и валидный синтаксис.

Что такое атрибут src и почему он обязателен

Атрибут src (от source, «источник») говорит браузеру, где искать картинку. Без него тег <img> просто не сработает — на странице ничего не появится.

Пример с незаданным src:

<img>

Такой код ничего не покажет — потому что браузер не знает, что загружать.

Какие ссылки можно указывать в src

Пути к изображению в атрибуте src могут быть разными: всё зависит от того, где лежит файл. Рассмотрим основные варианты.

Относительная ссылка. Такой путь указывает на файл, который лежит рядом с HTML-документом — в той же папке.

<img src="logoSkillbox.png">

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

<img src="images/logoSkillbox.png">

Локальная ссылка. Это путь к файлу на вашем компьютере. Такие ссылки работают только на вашей машине и пригодны исключительно для тестов:

<img src="C:/Users/User/Skillbox/images/logoSkillbox.png">

Если просто запустить такой код на другом компьютере, картинка не загрузится — файла по указанному пути там просто нет.

Абсолютная ссылка. Это полный интернет-адрес до изображения, размещённого на внешнем ресурсе. Это может быть URL-адрес, включающий домен и протокол:

<img src="https://cdn.skillbox.pro/wbd-front/skillbox-static/skillbox.svg">

Такие ссылки удобны, если картинка уже размещена на сервере или в CDN и вы хотите просто подключить её.

Атрибут alt

Помимо src, у тега <img> есть важный атрибут — alt (от англ. alternative text — альтернативный текст). Он задаёт текстовую подпись, которая отображается, если изображение не загрузилось, заблокировано браузером или отключено в режиме экономии трафика.

<img src="logoSkillbox.png" 
     alt="Логотип Skillbox">

Атрибут alt можно опустить, но это не рекомендуется. Он важен для SEO, для доступности: на него ориентируются программы, читающие статьи людям с ограничением зрения, а ещё он полезен в ситуациях с нестабильным интернетом.

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

Атрибут title

Атрибут title добавляет всплывающую подсказку — её видно, когда пользователь наводит курсор на изображение.

<img src="logoSkillbox.png" 
     alt="Логотип Skillbox" 
     title="Эта надпись появится при наведении курсора на логотип">

Когда пользователь подведёт курсор, появится небольшое окошко с текстом из title.

title — необязательный атрибут. Он дополняет alt, но не заменяет его. Если картинка не загрузится, браузер покажет текст из alt, а не из title.

Как задать размеры изображения: width и height

По умолчанию тег <img> отображает картинку в её естественном размере — так, как она сохранена в файле. Но если нужно изменить ширину или высоту, используют атрибуты width и height.

Оба атрибута задаются в пикселях:

<img src="logoSkillbox.png" 
     alt="Логотип Skillbox" 
     width="300" 
     height="500">

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

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

<img src="logoSkillbox.png" 
     alt="Логотип Skillbox" 
     width="300">

Как адаптировать изображение под разные экраны: srcset и sizes

Изображение, которое хорошо смотрится на ноутбуке, может оказаться слишком большим на телефоне. Чтобы подстроить картинку под размер экрана пользователя, используют атрибуты srcset и sizes.

Атрибут srcset. С помощью srcset можно указать несколько версий одного изображения в разных разрешениях. Браузер сам выберет подходящую версию в зависимости от размера экрана и плотности пикселей.

<img src="logo.png" 
     srcset="logo-small.png 320w, logo-medium.png 768w" 
     alt="Логотип Skillbox">

logo-small.png будет загружаться на экранах шириной от 320 пикселей;
logo-medium.png — на экранах шириной от 768 пикселей;
logo.png — это изображение по умолчанию, которое подгрузится, если ни одно из условий не подошло или если браузер не поддерживает srcset.

Атрибут sizes подсказывает браузеру, сколько места на экране займёт изображение. Это нужно, чтобы браузер мог заранее выбрать нужную версию картинки из srcset.

<img src="logo.png" 
     srcset="logo-small.png 320w, logo-medium.png 768w" 
     sizes="(max-width: 768px) 50vw, 20vw"
     alt="Логотип Skillbox">

Логика такая:

Если ширина экрана не больше 768 пикселей, браузер подставит картинку, которая займёт 50% ширины окна (50vw);
Если ширина экрана больше 768 пикселей, картинка займёт 20% ширины окна (20vw).

vw (viewport width) — это единица измерения, равная 1% ширины окна браузера.

Атрибуты srcset и sizes работают в паре: один определяет доступные варианты, второй — то, как выбрать нужный.

Как ускорить загрузку страницы: loading и decoding

Если на странице много изображений, они могут загружаться дольше, особенно при медленном интернете. Чтобы ускорить загрузку и не перегружать браузер, используют «ленивую» подгрузку — изображения появляются только тогда, когда пользователь до них доскролливает.

Для этого у тега <img> есть специальный атрибут loading. Он принимает два значения:

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

<img src="logoSkillbox.png" 
     loading="lazy"
     alt="Логотип Skillbox">

Ещё быстрее: добавляем decoding

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

<img src="logoSkillbox.png" 
     loading="lazy"
     decoding="async"
     alt="Логотип Skillbox">

Значения у decoding такие:

sync — декодировать сразу;
async — декодировать асинхронно, когда удобно браузеру;
auto — оставить решение за браузером.

Лучше всего использовать loading="lazy" и decoding="async« вместе — так изображения не только загружаются позже, но и обрабатываются без лишней нагрузки на страницу.

Форматы изображений <img> и стилизация с помощью CSS

Форматы изображений <img>

Тег <img> поддерживает несколько форматов изображений:

JPEG — обычно используется для фотографий. Поддерживает сжатие с потерями, зато весит немного.
PNG — подходит для изображений с прозрачным фоном. Качество выше, чем у JPEG, но и размер файла больше.
SVG — векторный формат. Используется для логотипов, иконок и простых иллюстраций. Хорошо масштабируется, не теряя в качестве.
GIF — поддерживает простую анимацию.
WepP — современный формат, разработанный в Google. Поддерживает прозрачность и анимацию, при этом сжимает изображения эффективнее, чем JPEG и PNG.
AVIF — ещё более продвинутый формат. Обеспечивает высокое качество при минимальном размере файла, но поддерживается не во всех браузерах.

Современные браузеры умеют работать с WebP и AVIF, но лучше всегда указывать резервный вариант в стандартном формате — например, в PNG.

Как стилизовать <img> с помощью CSS

Сами по себе изображения отображаются как есть. Но с помощью CSS можно сделать их адаптивными, придать им форму или добавить эффект — например, тень или скруглённые углы.

Допустим, у нас есть базовый HTML-код:

<img src="logoSkillbox.png" 
     alt="Логотип Skillbox" 
     title="Skillbox">

Чтобы задать стиль, подключим CSS. Вот пример базовой стилизации:

img {
  width: 100%; /* Делает изображение адаптивным */
  max-width: 300px; /* Ограничивает максимальную ширину */
  height: auto; /* Сохраняет пропорции */
  border: 4px solid #BB00FF; /* Добавляет сиреневую рамку */
  border-radius: 32px; /* Скругляет углы */
  box-shadow: 0 18px 24px rgba(0, 200, 0, 0.7); /* Добавляет тень */
}

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

Как тег <img> влияет на SEO и доступность

Тег <img> важен не только для внешнего вида страницы. Он влияет на то, как страницу воспринимают поисковые системы и люди с ограничениями зрения. Если использовать тег неправильно, можно испортить и доступность, и SEO.

Поисковые роботы не могут «увидеть» изображения, но умеют читать текст. Атрибут alt помогает им понять, что изображено на картинке.

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

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

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

Это сигнал, что подпись не нужна и скринридер может её пропустить.

Имена файлов тоже имеют значение

Если файл называется __pic0024435.png, поисковая система ничего не поймёт. А если имя осмысленное — это дополнительное пояснение содержимого изображения.

Не лучший вариант:

<img src="__pic0024435.png" alt="Логотип Skillbox">

Лучше:

<img src="Skillbox-logo.png" alt="Логотип Skillbox">

Размеры и адаптация влияют на производительность

Если не задать width и height, у браузера не выйдет заранее выделить место под изображение и страница может дёргаться при загрузке — это плохо и для UX, и для оценки скорости в SEO-инструментах.

Кроме того, если проигнорировать loading="lazy" и decoding="async", это может замедлить страницу, особенно на телефонах и при медленном интернете.

Типичные ошибки

1. Ошибка в имени файла или пути

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

Пример ошибки — нет расширения файла:

/* Неверно */
<img src="logoSkillbox" alt="Логотип Skillbox">

Чтобы избежать такой ситуации, проверьте:

указан ли правильный путь до файла;
есть ли у файла расширение — .png, .jpg, .svg или иное;
не используете ли вы локальные пути вроде C:/Users/... — они работают только на вашем компьютере.

2. Нет адаптации под разные экраны

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

3. Конфликт между HTML и CSS

Можно задать размеры изображения в HTML через атрибуты width и height, а можно — в CSS. Если значения не совпадают, браузер отдаст приоритет CSS.

HTML:

<img src="logoSkillbox.png" width="10000" height="10000"> 
/* Размер 10000 на 10000 */

CSS:

img {
  width: 500px;
  height: 400px;
}
/* Размер 500 на 400 */

В этом случае изображение будет отображаться по CSS — 500 на 400 пикселей, а не 10000 на 10000, как указано в HTML.

Лучше задавать стили через CSS, а в HTML использовать только базовые атрибуты — путь к файлу, alt, адаптивные параметры (srcset, sizes) и оптимизацию загрузки (loading, decoding).

Практика: подключаем изображения, адаптируем и стилизуем их с помощью CSS

Разберёмся на практике, как вставлять изображения в HTML, подключать к ним стили и делать так, чтобы они адаптировались под разные экраны.

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

Что понадобится

Для начала подготовим несколько картинок. Их размеры в пикселях не критичны — важно только, чтобы были версии для разных экранов.

Вы можете использовать любые изображения в этом проекте, но если хотите взять те же, что используем мы, скачайте файлы с Google-диска.

Для разрешения 1366×768 пикселей:

triangle-small.png
star-small.png

Для разрешения 1920×1080 пикселей:

triangle-large.png
star-large.png

Теперь создадим каталог, например project, добавим в него два пустых текстовых файла и новую папку:

index.html — основной файл с HTML-кодом.
styles.css — CSS-файл, украшающий страницу.
images — папка, в которой будут находиться ресурсы изображений.

В папке images создадим ещё два каталога:

small — папка для изображений с низким разрешением.
large — папка для изображений с высоким разрешением.

Поместим подготовленные файлы картинок triangle-small.png и star-small.png в папку small, а triangle-large.png и star-large.png — в папку large. Общая структура должна получиться такой:

*Скриншот: Mermaid Chart / Skillbox Media*

Далее открываем файл index.html с помощью текстового редактора и пишем следующий код:

<!DOCTYPE html>
<html lang="ru">
<head>
	/* Установка кодировки UTF-8 */
    <meta charset="UTF-8">
	/* Подключение CSS-стилей */
    <link rel="stylesheet" href="styles.css">
	/* Указание заголовка страницы */
    <title>Упражнение IMG</title>
</head>
<body>
	/* Контейнер для группировки изображений и стилизации */
    <div class="image-container"
        <!-- Картинка с треугольником -->
		/* src указывает путь к изображению по умолчанию
             srcset задаёт адаптивные версии изображения
             alt добавляет альтернативный текст */
       <img src="images/small/triangle-small.png" 
             srcset="images/small/triangle-small.png 1366w, 
			         images/large/triangle-large.png 1900w" 
             alt="Треугольник">

        /* Картинка со звёздочкой */
        <img src="images/small/star-small.png" 
             srcset="images/small/star-small.png 1366w, images/large/star-large.png 1900w" 
             alt="Звёздочка">
    </div>
</body>
</html>

В атрибуте src указывается изображение по умолчанию — оно будет загружено, если браузер не поддерживает srcset или не выполняется ни одно из условий.

В srcset через запятую перечислены версии для разных ширин экрана. Если экран 1900 пикселей в ширину — загрузится изображение из папки large, если 1366 — из small.

Обратите внимание на пути: они относительные, указываются от места, где лежит HTML-файл. Не забудьте закрыть все теги — особенно div, чтобы структура документа оставалась валидной.

Сохраните файл и закройте его. Остался финальный этап — написание CSS для более красивого отображения <img>, с применением технологии Flexbox для горизонтального отображения картинок и дополнительной анимацией при наведении hover.

Открываем файл styles.css в текстовом редакторе и дописываем следующие свойства отображения:

/* Общие стили для контейнера изображений */
.image-container {
    display: flex; /* Контейнер Flexbox для упрощённого размещения элементов */
    justify-content: center; /* Центрирует элементы */
    gap: 20px; /* Промежуток между элементами */
    padding: 20px; /* Внутренние отступы */
    background-color: #f0f0f0; /* Серый фоновый цвет */
}

/* Стили для изображений */
img {
    max-width: 100%; /* Автоматическая высота  */
    height: auto; /* Автоматическая высота */
    border: 2px solid #ddd; /* Добавление рамки */
    border-radius: 10px; /* Округление рамки */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Добавление тени */
    transition: transform 0.3s; /* Добавление эффекта перехода */
}

/* Анимация при наведении */
img:hover {
    transform: scale(1.05); /* Увеличивает изображение на 5 процентов при наведении курсора */
}

Здесь мы:

делаем изображения адаптивными (максимальная ширина — 100% от контейнера);
добавляем визуальные улучшения — рамку, тень, скругление;
используем Flexbox, чтобы изображения располагались в одну строку;
добавляем лёгкую анимацию при наведении.

Проверяем результат

Сохраняем оба файла и открываем index.html в браузере.

Если окно браузера открыто не на весь экран, вы увидите изображения из папки small.

Обратите внимание: на мобильных устройствах браузер разворачивается сразу на весь экран, поэтому может сразу загружаться large-версия. Всё зависит от ширины окна, а не от типа устройства.

Когда увеличите окно до полной ширины (например, на экране 1920×1080), браузер автоматически подгрузит изображения из папки large.

Домашнее задание

Добавьте третью группу изображений, например medium, и адаптируйте по аналогии для трёх разных разрешений на ваше усмотрение. Поменяйте разрешения на 480 для small, 768 для medium и 1200 для large.
Адаптируйте изображения под мобильные разрешения, ориентируясь на ширину экрана менее 768 пикселей. Для лучшего восприятия <img>, уменьшите отступы в CSS.
Добавьте визуальный отклик для изображения. Сделайте так, чтобы оно светилось при клике. Для этого используйте функцию active в CSS. Примеры работы функции посмотрите самостоятельно в интернете.

Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!

Читайте также: