img HTML: как добавить изображение на страницу

Изображение на странице добавляют с помощью тега img: он указывает путь к файлу, задает альтернативный текст и позволяет управлять размером, адаптивностью и скоростью загрузки. Если объяснить совсем просто, img работает как табличка с адресом: браузер читает путь в атрибуте src, идет по нему, получает картинку и встраивает ее в нужное место документа.

Что делает тег img и как он вставляет картинку на страницу

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

У тега img нет закрывающей пары, а его базовая задача состоит из трех шагов: найти файл, понять, что именно изображено, и корректно встроить картинку в макет. Для этого чаще всего используют атрибуты src, alt, width, height, loading и decoding.

Минимальный рабочий пример

<img src="images/photo.jpg" alt="Горное озеро на рассвете">

В этом примере:

1. src — путь к файлу изображения;
2. alt — текстовое описание, которое нужно для доступности и показа в случае ошибки загрузки.

Как браузер обрабатывает изображение: маршрут по шагам

Маршрут загрузки изображения — это конкретная последовательность действий от чтения тега до показа картинки на экране.

1. Старт: браузер доходит до строки с img в разметке.
2. Остановка 1: считывает значение src, например images/photo.jpg.
3. Остановка 2: проверяет, абсолютный это путь или относительный.
4. Остановка 3: отправляет запрос к нужному ресурсу.
5. Остановка 4: получает файл и определяет его тип: JPEG, PNG, WebP, AVIF, SVG и так далее.
6. Остановка 5: резервирует место в макете, если указаны width и height.
7. Остановка 6: декодирует изображение.
8. Финиш: выводит картинку на страницу.

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

Как добавить изображение через img: пошаговая инструкция для начинающих

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

Шаг 1. Подготовьте файл изображения

Сначала выберите формат. Для фотографий обычно подходят JPEG, WebP и AVIF; для логотипов, схем и прозрачности — PNG или SVG. По данным HTTP Archive, WebP и JPEG входят в число самых распространенных форматов изображений в вебе, а переход на современные форматы часто заметно уменьшает вес страницы.

Шаг 2. Определите, где лежит файл

Путь может быть относительным или абсолютным.

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

<img src="images/team.jpg" alt="Команда на презентации продукта">

Здесь файл team.jpg находится в папке images.

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

<img src="https://example.com/images/team.jpg" alt="Команда на презентации продукта">

Абсолютный путь указывает полный адрес ресурса. Его часто используют, если файл лежит на CDN или другом домене.

Шаг 3. Добавьте alt

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

<img src="images/chart.png" alt="Диаграмма роста онлайн-продаж за квартал">

Согласно WebAIM, корректные текстовые альтернативы — один из ключевых элементов доступности контента. Практически это означает простое правило: если изображение несет смысл, опишите его коротко и точно; если это чистый декор, alt можно оставить пустым.

Шаг 4. Укажите размеры

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

<img src="images/interior.jpg" alt="Светлая гостиная с деревянным столом" width="1200" height="800">

Это особенно важно для Core Web Vitals. Google прямо рекомендует задавать размеры медиаэлементов, чтобы снижать показатель CLS — cumulative layout shift, то есть неожиданные скачки интерфейса.

Шаг 5. Подключите ленивую загрузку

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

<img src="images/catalog-item.jpg" alt="Кресло из светлой ткани" loading="lazy" width="600" height="600">

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

Какие атрибуты img обязательны и какие реально полезны

Обязательным по сути является src, а наиболее полезными на практике становятся alt, width, height, loading, srcset и sizes, потому что они влияют на доступность, стабильность макета и адаптивность.

Пример с полезным набором атрибутов

<img
  src="images/sofa-800.jpg"
  srcset="images/sofa-400.jpg 400w, images/sofa-800.jpg 800w, images/sofa-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Серый диван у окна"
  width="800"
  height="533"
  loading="lazy"
  decoding="async">

Такой код помогает не тащить на маленький экран гигантский файл. Это как не везти холодильник ради одной бутылки воды: устройство получит картинку нужного размера, а не «с запасом на все случаи».

Как правильно указать путь к картинке без ошибок

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

Три самых частых варианта пути

1. Файл в той же папке:

<img src="banner.jpg" alt="Весенняя распродажа">

2. Файл в дочерней папке:

<img src="img/banner.jpg" alt="Весенняя распродажа">

3. Файл на уровень выше:

<img src="../img/banner.jpg" alt="Весенняя распродажа">

Чек-лист, если изображение не открывается

Проверка пути — это последовательная диагностика адреса файла, имени и структуры каталогов.

1. Сверьте имя файла посимвольно.
2. Проверьте расширение: .jpg, .jpeg, .png, .webp, .avif, .svg.
3. Убедитесь, что регистр совпадает: Banner.jpg и banner.jpg — не одно и то же на многих серверах.
4. Посмотрите, действительно ли файл лежит в указанной папке.
5. Проверьте, не содержит ли путь пробелы и спецсимволы, которые сломали URL.

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

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

Адаптивное изображение — это картинка, которая подстраивается под ширину контейнера или экрана без потери пропорций и без загрузки чрезмерно тяжелого файла.

Базовый способ через CSS

Сам тег img вставляет изображение, а адаптивность обычно усиливают стилями.

<img src="images/product.jpg" alt="Кожаный рюкзак" width="1000" height="1000">

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

Такое правило не позволяет картинке «выпирать» за пределы блока и сохраняет пропорции.

Продвинутый способ через srcset

Srcset — это механизм выбора подходящей версии изображения в зависимости от плотности экрана и ширины области отображения.

<img
  src="images/product-800.jpg"
  srcset="images/product-400.jpg 400w, images/product-800.jpg 800w, images/product-1600.jpg 1600w"
  sizes="(max-width: 768px) 100vw, 600px"
  alt="Кожаный рюкзак"
  width="800"
  height="800">

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

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

Люди часто загружают в карточку товара изображение шириной 3000–4000 пикселей, хотя блок на экране редко показывает больше 600–900 пикселей. В результате визуально ничего не меняется, но страница тяжелеет ощутимо. Самая заметная экономия обычно появляется после двух действий: уменьшения физического размера файла и перехода с PNG или старого JPEG на WebP либо AVIF там, где это оправдано.

Как добавить подпись, обтекание и выравнивание изображения

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

Изображение с подписью через figure и figcaption

Если у изображения есть пояснение, лучше использовать semantic-friendly связку figure и figcaption.

<figure>
  <img src="images/office.jpg" alt="Рабочее пространство с ноутбуком и блокнотом" width="1200" height="800">
  <figcaption>Рабочая зона в минималистичном стиле</figcaption>
</figure>

Выравнивание по центру

<figure class="image-center">
  <img src="images/office.jpg" alt="Рабочее пространство с ноутбуком и блокнотом" width="1200" height="800">
</figure>

.image-center {
  text-align: center;
}

Осторожно с обтеканием

Обтекание текстом может выглядеть эффектно, но на узких экранах часто превращает чтение в «проход по коридору между коробками». Если и применять float, то только для небольших изображений и с медиаправилами.

Ошибки при вставке картинки через img, которые встречаются чаще всего

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

Топ-7 ошибок

1. Нет alt. Поисковая система и экранный диктор теряют контекст.
2. Загружается оригинал из камеры. Файл весит несколько мегабайт без причины.
3. Не указаны width и height. Макет прыгает при загрузке.
4. PNG используется для фото. Размер файла часто неоправданно большой.
5. Один и тот же файл для всех экранов. Мобильные устройства получают лишние данные.
6. Alt переполнен ключевыми словами. Это ухудшает естественность и доступность.
7. Важный текст встроен в картинку. Его не прочитают ни поисковики, ни многие пользователи.

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

SEO, доступность и скорость загрузки: зачем правильно оформлять img

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

Почему важен alt с точки зрения SEO

Alt передает смысл изображения в текстовой форме. Это полезно для индексации картинок, для контекста страницы и для случаев, когда изображение не загрузилось. Хороший alt описывает объект, действие или результат, а не просто повторяет ключевую фразу без смысла.

Почему скорость зависит именно от изображений

Изображения часто составляют крупнейшую долю передаваемых данных страницы. По данным HTTP Archive, медиаресурсы стабильно занимают значительную часть веса веб-страниц, а сами изображения нередко становятся самым тяжелым типом контента. Поэтому оптимизация картинок почти всегда дает заметный эффект раньше, чем мелкие косметические правки кода.

Немного научного и психологического контекста

Человек оценивает скорость интерфейса не только по миллисекундам, но и по предсказуемости. Когда макет не дергается, изображения появляются в нужных местах, а контент не «уплывает» во время чтения, страница субъективно кажется быстрее и надежнее. Это хорошо согласуется с логикой Core Web Vitals: стабильность визуальной структуры влияет на восприятие качества почти так же сильно, как сухое время загрузки.

Готовые примеры: от простой вставки до оптимизированного варианта

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

Самый простой вариант

<img src="images/city.jpg" alt="Ночной городской пейзаж">

Правильный базовый вариант

<img src="images/city.jpg" alt="Ночной городской пейзаж" width="1200" height="800">

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

<img
  src="images/city-800.webp"
  srcset="images/city-400.webp 400w, images/city-800.webp 800w, images/city-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 800px"
  alt="Ночной городской пейзаж с мостом и отражениями в воде"
  width="800"
  height="533"
  loading="lazy"
  decoding="async">

Пример декоративного изображения

Если картинка не несет смысла и нужна только для оформления, alt допустимо сделать пустым.

<img src="images/pattern.svg" alt="" width="300" height="120">

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

Краткий чек-лист перед публикацией изображения

Чек-лист для img — это короткий набор обязательных проверок, который помогает избежать типовых проблем с отображением, доступностью и скоростью.

1. Путь к файлу указан без ошибок.
2. Формат выбран по задаче: фото, прозрачность, вектор.
3. Alt написан естественно и по смыслу.
4. Width и height заданы.
5. Размер файла уменьшен до разумного.
6. Для длинных страниц включен loading=»lazy».
7. Для адаптивности используется srcset, если это необходимо.
8. Изображение не содержит важный текст, который должен быть обычным текстом на странице.

Тег img — это простой, но критически важный инструмент: он не только выводит картинку, но и влияет на доступность, стабильность макета, скорость и восприятие страницы. Если использовать корректный путь, понятный alt, реальные размеры и адаптивную подачу файлов, изображение будет работать не как случайное украшение, а как полноценная часть качественного интерфейса.