Тег img (от английского image, «изображение») выводит на странице картинку: браузер берёт адрес файла из атрибута src, загружает его и показывает на месте тега. Тег одиночный: содержимого у него нет, поэтому закрывающий тег не нужен.
Сам файл изображения в код страницы не входит: в HTML записана только ссылка на него, а загрузку и показ выполняет браузер. Если картинка что-то сообщает читателю (фото товара, схема, иллюстрация к статье), её выводят тегом img. Если картинка нужна только для вида, например узор или фон блока, её лучше задать в CSS через background-image. Основы коротко разобраны в уроке «Тег img и атрибут src», а здесь собрано всё остальное: обязательные атрибуты, пути, размеры, картинка-ссылка, стили, форматы и причины, по которым картинка не появляется.
<img src="kot.jpg"
alt="Горы под солнцем"
width="400" height="300">Пример: как браузер показывает картинку
Переключайте кнопки. Вместо файла kot.jpg в примере встроенная картинка, а сбой загрузки имитируется.
В этой статье
- Тег img в HTML: что это и для чего нужен
- Обязательный атрибут тега img: src и alt
- Атрибут src тега img: путь к файлу
- Атрибут alt тега img: для чего нужен
- Атрибут title тега img: всплывающая подсказка и отличие от alt
- Атрибуты width и height тега img: размер картинки
- Тег img внутри тега a: картинка-ссылка
- Стили тега img в CSS: выравнивание, отступы и рамка
- Тег img блочный или строчный
- Какие форматы поддерживает тег img: JPEG, PNG, SVG, WebP
- Почему тег img не отображается
- Атрибуты тега img: актуальные и устаревшие
Тег img в HTML: что это и для чего нужен
Сначала о том, как тег записывается и куда его можно добавить на страницу.
Тег img относится к встраиваемому содержимому: на его месте браузер выводит внешний файл. Внутри у него ничего быть не может, поэтому закрывающий тег не нужен. Если всё же написать </img>, браузер отбросит лишний тег, а валидатор сообщит об ошибке. Слеш в конце, <img ... />, допустим, но ничего не меняет и сохранился с времён XHTML. Текст между <img> и </img> в картинку не попадает и остаётся обычным текстом рядом с ней.
<img src="a.png" alt="k">
<img src="a.png" alt="k" />
<img src="a.png" alt="k"></img>
<img src="a.png" alt="k">текст</img>Пример: как браузер разбирает четыре записи
Нажимайте кнопки: каждую запись браузер разбирает на ваших глазах, ниже видно результат, число элементов img и судьбу текста.
Куда можно добавить картинку: везде, где допустим обычный текст, то есть в абзац, ссылку, кнопку, элемент списка, ячейку таблицы. Прямо в ul, ol, table или head её не записывают: там допустимы только li, строки таблицы и служебные теги. Внутри тега picture картинка обязательна: img там служит и основным вариантом, и запасным.
Обязательный атрибут тега img: src и alt
Какой атрибут обязателен для тега img: у него их два, но нужны они по разным причинам.
Атрибут src обязателен по самой сути: без адреса браузеру нечего загружать. По стандарту допускается и srcset вместо него, но для первого знакомства считайте src обязательным. Атрибут alt обязателен для правильного HTML: браузер картинку без него покажет, но валидатор сообщит об ошибке, а те, кто не видит картинку, и поисковые системы лишатся описания. Исключения для alt в стандарте узкие, поэтому в обычной вёрстке пишите его всегда, а у декоративной картинки делайте его пустым: alt="".
Поэтому обязательным называют то один src, то оба атрибута: страница работает с одним src, а корректной по валидатору становится только с обоими.
<img src="kot.jpg" alt="Горы под солнцем">
<img src="kot.jpg">
<img alt="Горы под солнцем">
<img>Пример: что браузер делает без src и без alt
Четыре сочетания src и alt. Тег создаётся настоящий, размер блока читается из него, а пояснение под ним объясняет результат.
| Атрибут | Почему обязателен | Пример записи |
|---|---|---|
src | Без адреса нечего загружать. Вместо него допустим srcset | src="kot.jpg" |
alt | Описание нужно программам чтения с экрана, поисковым системам и валидатору; при сбое загрузки оно показывается вместо картинки | alt="Рыжий кот" |
width и height | Обязательными не считаются, но без них страница прыгает при загрузке, см. раздел про размер | alt="Кот" width="400" height="300" |
Атрибут src тега img: путь к файлу
Значение src — это адрес файла, и от способа записи зависит, найдёт ли его браузер.
Адрес можно записать тремя способами. Относительный адрес считается от папки, в которой находится страница: kot.jpg или img/kot.jpg, а ../ поднимает на уровень выше. Адрес от корня сайта начинается со слеша: /img/kot.jpg, и от места страницы не зависит. Абсолютный адрес содержит домен: https://example.com/img/kot.jpg, так подключают картинки с других сайтов. Кроме адреса в src допустим и сам файл, закодированный в строку (data:), но для обычных картинок такая запись неудобна.
Регистр букв важен: серверы на Linux различают Kot.jpg и kot.jpg. На компьютере с Windows ошибка незаметна, а после загрузки на сайт картинка пропадает. Путь вида C:\photos\kot.jpg работает только на вашем компьютере. Опечатка scr вместо src ошибкой для браузера не считается: он просто не видит src и ведёт себя так, как будто атрибута нет.
<!-- страница: https://example.com/blog/post.html -->
<img src="kot.jpg" alt="">
<img src="img/kot.jpg" alt="">
<img src="../img/kot.jpg" alt="">
<img src="/img/kot.jpg" alt="">Пример: какой файл найдёт браузер
Нажимайте значения src. Для страницы /blog/post.html вычисляется итоговый адрес и проверяется, есть ли такой файл среди трёх файлов сайта.
Атрибут alt тега img: для чего нужен
Текст в alt заменяет картинку там, где её не видно, поэтому его стоит продумать.
Текст из alt показывается вместо картинки, если файл не загрузился, его читает вслух программа чтения с экрана, и по нему поисковая система понимает, что изображено. Поэтому alt описывает смысл картинки, а не её внешний вид и не название файла. Слова «картинка» и «фото» в него не пишут: программа чтения и без них сообщает, что это изображение.
Пустой alt="" — это осознанное сообщение «картинка нужна только для вида, описание не требуется»: программа чтения такую картинку пропускает. Если атрибута нет вообще, неизвестно, важна ли картинка, и валидатор это отметит. Есть особенность при сбое загрузки: в некоторых браузерах, если у картинки непустой alt, она превращается в обычную строку со значком и текстом, а заданные width и height перестают действовать. Если alt пустой или его нет, а размеры заданы, остаётся пустая рамка нужного размера.
<img src="kot.jpg" alt="Горы под солнцем">
<img src="line.png" alt="">
<img src="kot.jpg">Пример: как alt и размеры ведут себя при сбое
Сочетайте вид alt и состояние файла. Размер блока считается по настоящему тегу: при ненайденном файле и тексте в alt он перестаёт быть равным заданным 160 на 120.
| Что на картинке | Что написать в alt | Пример записи |
|---|---|---|
| Фото товара | Что на нём и чем отличается от других | alt="Чёрные кроссовки с белой подошвой" |
| График или схема | Главный вывод, который показывает картинка | alt="Продажи выросли втрое за год" |
| Логотип без ссылки | Название компании | alt="Кофейня Зерно" |
| Значок рядом со словом, которое его повторяет | Ничего: пустой alt | alt="" |
| Узор или разделительная линия | Ничего: пустой alt | alt="" |
| Текст на картинке | Тот же текст | alt="Скидка 20% до пятницы" |
| Картинка-ссылка | Куда ведёт ссылка, см. раздел про картинку-ссылку | alt="В магазин" |
Атрибут title тега img: всплывающая подсказка и отличие от alt
Атрибут title часто путают с alt, но у него другая задача и другая судьба при сбое загрузки.
Атрибут title относится к глобальным и допустим у любого тега, в том числе у img. При наведении курсора на картинку браузер показывает его текст во всплывающей подсказке. На сенсорных экранах и при работе с клавиатуры подсказки нет, поэтому важное в title записывать нельзя. Заменить alt он не может: хорошо, когда title добавляет то, чего нет в alt, например место съёмки или автора, и не повторяет его.
Есть и другие отличия. Если у картинки нет alt, при сбое загрузки браузер может показать текст из title вместо него. Если есть и то и другое, показывается alt. А если alt пустой, но есть title, браузер может перестать считать картинку декоративной и дать ей название из title, поэтому на декоративных картинках title не пишут.
<img src="kot.jpg" alt="Горы">
<img src="kot.jpg" title="Алтай">
<img src="kot.jpg" alt="Горы" title="Алтай">Пример: подсказка title и текст alt
Наведите курсор на картинки: подсказка есть у второй и третьей. Нажмите «Файл не найден» и сравните, какой текст браузер показывает вместо файла.
| Что записано | Что произойдёт | Пример записи |
|---|---|---|
Только alt | При сбое виден текст alt, подсказки при наведении нет | alt="Горы" |
Только title | Подсказка при наведении; при сбое браузер может показать title вместо alt | title="Алтай" |
alt и title | При сбое виден alt, при наведении подсказка с title | alt="Горы" title="Алтай" |
Пустой alt и title | Браузер может взять название картинки из title и не считать её декоративной | alt="" title="Алтай" |
Атрибуты width и height тега img: размер картинки
Размер задают атрибуты width и height, и главная их польза не в размере, а в том, что страница не прыгает.
Атрибуты width и height задают размер картинки в пикселях и пишутся числом без единиц. Если указать оба, браузер знает пропорции до загрузки файла и заранее резервирует под картинку место, поэтому текст ниже не сдвигается, когда файл придёт (из атрибутов браузер выводит соотношение сторон вида aspect-ratio: auto 400 / 300). Если указать только одно число, второе браузер вычислит по пропорциям файла. Если задать оба с другим соотношением, картинка исказится.
Записывайте настоящие размеры файла или пропорциональные им. Записи width="200px" и width="50%" браузеры понимают, но валидатор принимает только целые числа. Если те же размеры заданы и в CSS, они сильнее атрибутов. Учтите и особенность из раздела про alt: при сбое загрузки у картинки с текстом в alt в некоторых браузерах место не сохраняется.
<img src="kot.jpg" alt="Горы" width="400" height="300">img {
max-width: 100%;
height: auto;
}Пример: на сколько сдвигается текст под картинкой
Нажмите «Загрузить картинки». Слева картинка с width и height, справа без них; под каждой показано, на сколько пикселей сдвинулся текст после загрузки.
Атрибуты дают пропорции, а подгонкой под ширину страницы занимается CSS. Правило max-width: 100% не даёт картинке выйти за пределы блока, а height: auto пересчитывает высоту по пропорциям. Без height: auto высота остаётся равной атрибуту, и в узком блоке картинка сплющивается.
Пример: картинка в узком блоке
Двигайте ползунок. У трёх одинаковых картинок размер блока читается из браузера: у второй высота остаётся прежней, у третьей пропорции сохраняются.
Тег img внутри тега a: картинка-ссылка
Картинку можно сделать ссылкой, записав img внутрь тега a, и здесь есть детали, которых нет у текстовой ссылки.
Про сами ссылки (href, target, rel) рассказано на странице о теге a, а здесь только то, что меняется из-за картинки. Главное: названием ссылки становится alt картинки. Если в ссылке только картинка и у неё пустой alt, у ссылки нет ни текста, ни названия, и понять, куда она ведёт, нельзя. Если рядом со значком есть слово, alt значка делают пустым, чтобы не повторять его.
Рамка у картинки-ссылки: в старых браузерах вокруг неё рисовалась рамка цвета ссылки, поэтому в старых руководствах встречается border="0". Сейчас ширина рамки у такой картинки нулевая, и этот атрибут не нужен. Ещё два ограничения из стандарта: картинка с атрибутом usemap (карта-изображение) считается интерактивным содержимым, а внутрь ссылки его записывать нельзя; атрибут ismap допустим только у картинки, вокруг которой есть ссылка с href.
<a href="/shop/"><img src="shop.jpg" alt="В магазин"></a>
<a href="/catalog/">
<img src="cup.svg" alt="" width="24" height="24"> Каталог
</a>Пример: название ссылки у картинки
Три варианта ссылки. Название ссылки вычисляется из текста и alt, а кнопка «Показать границы ссылки» подсвечивает область, которую занимает ссылка вокруг картинки.
Стили тега img в CSS: выравнивание, отступы и рамка
Выравнивание, отступы и рамку у картинки задают в CSS, а старые атрибуты для этого давно заменены.
Раньше положение и оформление картинки задавали атрибутами align, hspace, vspace и border. Сейчас они устарели, и всё это делается в CSS. Браузеры их всё ещё понимают, но валидатор выдаёт предупреждение. Отдельно стоит слово valign: у img такого атрибута не было никогда, его путают с CSS-свойством vertical-align.
img {
width: 120px;
height: 80px;
float: left;
margin-right: 12px;
border: 3px solid #1F2430;
border-radius: 16px;
object-fit: cover;
}Пример: как свойства меняют картинку
Включайте свойства кнопками. Под картинкой собирается CSS из включённых свойств. Обратите внимание на object-fit: cover: он убирает растяжение при размерах, не совпадающих с пропорциями файла.
| Что нужно | Какое свойство | Пример записи |
|---|---|---|
| Обтекание текстом слева или справа | float и отступ с противоположной стороны | float: left; margin-right: 12px; |
| Отступы вокруг картинки | margin | margin: 8px 16px; |
| Рамка | border | border: 3px solid #1F2430; |
| Скругление или круглая аватарка | border-radius | border-radius: 50%; |
| Обрезать картинку по размеру рамки без искажений | object-fit и object-position | object-fit: cover; |
| Не выходить за пределы блока | max-width и height | max-width: 100%; height: auto; |
| Расположить по центру | display: block и margin: 0 auto, либо text-align: center у родителя | display: block; margin: 0 auto; |
Тег img блочный или строчный
Коротко: тег img строчный, а не блочный, и из этого вытекают зазор под картинкой и особенности центрирования.
По умолчанию у img значение display: inline, и ведёт он себя как слово в строке. Поэтому его можно выровнять через text-align: center у родителя, а margin: 0 auto на нём не центрирует. Ширина и высота у него при этом работают, потому что картинка относится к замещаемым элементам. Главная неприятность: картинка стоит на базовой линии строки, а под этой линией браузер резервирует место для хвостов букв, поэтому под картинкой появляется зазор в несколько пикселей.
Убрать зазор можно по-разному. Самый надёжный способ — display: block, но картинка тогда занимает отдельную строку. Если картинка должна остаться в строке, меняют vertical-align (top, middle или bottom дают одинаковый результат) либо обнуляют line-height у родителя.
img {
display: block;
}
/* или, если картинка должна остаться в строке */
img {
vertical-align: middle;
}Пример: зазор под картинкой
Нажимайте способы. Под картинкой на тонированном фоне виден зазор, а его высота считается как разница высот блока и картинки.
| Способ | Что происходит | Пример записи |
|---|---|---|
display: block | Картинка занимает отдельную строку, зазора нет | display: block; |
vertical-align | Картинка остаётся в строке, зазора нет; подойдут top, middle, bottom | vertical-align: middle; |
line-height: 0 у родителя | Зазора нет, но у текста в этом родителе пропадёт межстрочный интервал | line-height: 0; |
font-size: 0 у родителя | Зазора нет, но пропадает и сам текст в родителе | font-size: 0; |
Какие форматы поддерживает тег img: JPEG, PNG, SVG, WebP
Тег img показывает не любой файл, поэтому полезно знать, какие форматы поддерживаются и чем они различаются.
Все актуальные браузеры показывают через img форматы JPEG, PNG, GIF, SVG, WebP и AVIF. Формат определяет содержимое файла, а не расширение: если переименовать .png в .jpg, файл не превратится в другой формат.
Файл SVG остаётся чётким при любом увеличении, но внутри img его скрипты не выполняются и внешние ресурсы не загружаются. Если нужны скрипты или стили страницы для частей рисунка, SVG записывают прямо в HTML. Часто спрашивают, можно ли вывести через img видео. Нельзя: файл .mp4 или .webm картинкой не покажется. Анимацию даёт GIF или анимированный WebP, а видео выводит тег video.
<img src="logo.svg" alt="Кофейня Зерно"
width="120" height="40">
<img src="photo.webp" alt="Зал кофейни"
width="800" height="600">Пример: растровая картинка и SVG при увеличении
Двигайте ползунок. Растровая картинка размером 30 пикселей при увеличении расплывается, SVG остаётся чётким, а скрипт во вложенном SVG не сработал: его фон остался таким же, как у соседней картинки.
| Формат | Для чего | Особенности | Пример записи |
|---|---|---|---|
| JPEG | Фотографии | Без прозрачности и анимации | src="photo.jpg" alt="Зал" |
| PNG | Скриншоты, логотипы, схемы | Есть прозрачность, у фотографий большой вес | src="scheme.png" alt="Схема" |
| GIF | Простая анимация | Не больше 256 цветов | src="load.gif" alt="" |
| SVG | Логотипы, значки, схемы | Не теряет чёткости; скрипты внутри img не работают | src="logo.svg" alt="Зерно" |
| WebP | Фотографии и графика с меньшим весом | Есть прозрачность и анимация | src="photo.webp" alt="Зал" |
| AVIF | Фотографии с ещё меньшим весом | Есть прозрачность и анимация | src="photo.avif" alt="Зал" |
Почему тег img не отображается
Если картинки на странице нет, помогает простая проверка: сначала смотрим, что именно видно на месте тега.
Признак подсказывает причину. Значок и текст значат, что файл не загрузился: проверьте путь, регистр букв и расширение. Пустая рамка нужного размера значит то же самое, только alt не задан. Если места нет совсем, возможно, нет атрибута src (например, из-за опечатки scr). А если файл загрузился, но его не видно, виноват CSS. Различить эти случаи помогают два свойства картинки в консоли браузера: complete и naturalWidth. Если naturalWidth равно нулю, файл не загрузился.
const img = document.querySelector("img");
console.log(img.complete, img.naturalWidth);Пример: от признака к причине
Четыре признака. Для каждого случая создаётся настоящий тег, свойства complete и naturalWidth читаются из него, а под ними написано, где искать причину. Сбой загрузки имитируется.
- Откройте адрес картинки в отдельной вкладке. Если сервер отвечает «не найдено», ошибка в пути.
- Сверьте регистр букв и расширение с настоящим названием файла.
- Проверьте, что вместо
srcне написано другое слово и значение не пустое. - На странице с адресом
httpsкартинка по адресуhttpможет не загрузиться: используйтеhttps. - Посмотрите CSS картинки и её родителей:
display: none, нулевые размеры,opacity: 0, обрезка черезoverflow: hidden. - Отключите блокировщик рекламы: он может скрывать картинки, в пути которых есть слова вроде
bannerилиads.
Атрибуты тега img: актуальные и устаревшие
Список атрибутов тега img полезно знать целиком, а особенно то, какие из них устарели и чем их заменить.
Полный перечень атрибутов приведён в стандарте HTML. Здесь актуальные и устаревшие собраны в одной таблице. Устаревшие атрибуты браузеры пока понимают, поэтому старые страницы выглядят как раньше, но в новом коде их не пишут.
<img src="photo-800.jpg"
srcset="photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(min-width: 900px) 800px, 100vw"
alt="Зал кофейни" width="800" height="600"
loading="lazy" decoding="async">Пример: что делают устаревшие атрибуты на самом деле
Атрибут записывается в настоящий тег, а браузер сообщает, какие CSS-свойства из-за него применились: так видно, чем заменить его в CSS.
| Атрибут | Статус | Что делает | Пример записи |
|---|---|---|---|
src | Актуален | Адрес файла картинки | src="kot.jpg" |
alt | Актуален | Текст вместо картинки | alt="Кот" |
width, height | Актуален | Размер в пикселях и пропорции | alt="" width="400" height="300" |
srcset | Актуален | Список файлов для разной ширины и плотности экрана | srcset="a.jpg 1x, b.jpg 2x" alt="" |
sizes | Актуален | Ширина, которую картинка займёт на странице; нужен вместе с srcset | sizes="100vw" srcset="a.jpg 800w" alt="" |
loading | Актуален | lazy откладывает загрузку, пока картинка не окажется рядом с экраном | alt="" loading="lazy" |
decoding | Актуален | Подсказывает, можно ли обрабатывать картинку без остановки страницы | alt="" decoding="async" |
fetchpriority | Актуален | Приоритет загрузки; high для главной картинки экрана | alt="" fetchpriority="high" |
crossorigin | Актуален | Загрузка с чужого сайта в режиме CORS | alt="" crossorigin="anonymous" |
referrerpolicy | Актуален | Что браузер сообщит сайту-источнику о странице | alt="" referrerpolicy="no-referrer" |
usemap, ismap | Актуален | Карта-изображение: клиентская и серверная | alt="Карта" usemap="#m" |
title | Актуален | Подсказка при наведении (глобальный атрибут) | alt="Кот" title="Алтай" |
align | Устарел | Обтекание и выравнивание. Заменяют float и vertical-align | alt="" align="left" |
hspace, vspace | Устарел | Отступы слева и справа, сверху и снизу. Заменяет margin | alt="" hspace="10" |
border | Устарел | Рамка. Заменяет border в CSS | alt="" border="1" |
name, longdesc | Устарел | Название для скриптов и ссылка на подробное описание. Используйте id, а описание выводите в figcaption | alt="" name="cat" |
Частый вопрос: чем img отличается от picture. Тег picture не заменяет img, а дополняет его: внутри picture всегда есть img, который задаёт alt, размеры и запасную картинку, а теги source подсказывают браузеру другие файлы для разных условий, например другой формат или другую ширину экрана.
Частые ошибки с тегом img
Большинство промахов с картинками сводится к трём причинам: путь, описание и размеры.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
<img src="kot.jpg"> | Нет alt: валидатор сообщает об ошибке, при сбое загрузки пусто | Добавить описание: alt="Горы под солнцем" |
<img src="kot.jpg"></img> | Лишний закрывающий тег: браузер его отбрасывает, валидатор отмечает ошибку | Убрать </img> |
<img scr="kot.jpg"> | Опечатка в названии: src нет, картинка не загружается | Написать src="kot.jpg" |
src="Kot.JPG" при файле kot.jpg | На сервере Linux файл не найден: на домашнем компьютере всё работало | Записать название точно как у файла, лучше строчными буквами |
src="C:\photos\kot.jpg" | Адрес на вашем компьютере, у посетителей картинки нет | Загрузить файл на сайт и указать путь к нему: src="/img/kot.jpg" |
width="400px" | Единицы в атрибуте не допускаются, стандарт требует число | Написать width="400" |
img { max-width: 100%; } и атрибут height="300" | В узком блоке картинка сплющивается: ширина уменьшилась, высота осталась | Добавить height: auto; |
alt="картинка" или alt="IMG_2035.jpg" | Описания нет: читатель не узнает, что изображено | Написать, что на картинке: alt="Рыжий кот на диване" |
<img alt="" title="Кот"> | Браузер может считать картинку содержательной и взять её название из title | Для декоративной картинки убрать title, для содержательной написать нормальный alt |
img { margin: 0 auto; } | Картинка строчная, в центр не встаёт | Добавить display: block; или text-align: center; у родителя |
<img src="film.mp4"> | Видео через img не показывается | Использовать тег video, а для анимации GIF или WebP |
Картинка-ссылка с пустым alt и без текста | У ссылки нет названия, непонятно, куда она ведёт | alt="В магазин" |
