Как правильно вставить изображение в HTML
Для вставки изображения в HTML используется одиночный тег <img> с обязательными атрибутами src (путь к файлу) и alt (текстовое описание). Пример базового синтаксиса: <img src="photo.jpg" alt="Описание фото" width="800" height="600">. Правильное использование путей к файлам и атрибутов критично для отображения картинки, скорости загрузки сайта и его доступности.
Синтаксис тега img и ключевые атрибуты
Тег <img> является пустым элементом — у него нет закрывающего тега. Его функциональность полностью зависит от атрибутов.
Обязательные атрибуты
src(source): указывает путь к изображению. Без этого атрибута картинка не отобразится.alt(alternative text): альтернативный текст. Отображается, если изображение не загрузилось, и озвучивается скринридерами для незрячих пользователей. Также учитывается поисковыми системами при индексации.
Если изображение носит исключительно декоративный характер и не несет смысловой нагрузки, используйте пустой атрибут alt="". Это сообщит скринридеру, что картинку можно проигнорировать, не засоряя эфир лишними словами.
Атрибуты для производительности и адаптивности
widthиheight: задают ширину и высоту изображения в пикселях. Указание этих параметров позволяет браузеру зарезервировать место под картинку до её загрузки, предотвращая сдвиги макета (CLS — Cumulative Layout Shift), что важно для SEO.loading: управляет отложенной загрузкой. Значениеlazy(loading="lazy") заставляет браузер загружать изображение только когда оно попадает в область видимости пользователя, ускоряя начальную загрузку страницы.
Пути к файлам: абсолютные и относительные
Понимание того, как браузер ищет файл по пути, указанному в src, — основа правильной верстки.
Относительные пути
Используются чаще всего при разработке локальных сайтов. Путь строится относительно текущего расположения HTML-файла.
| Тип пути | Синтаксис | Описание |
|---|---|---|
| В той же папке | src="image.jpg" | Файл лежит рядом с HTML-документом. |
| В подпапке | src="images/photo.jpg" | Файл лежит в папке images, которая находится в текущей директории. |
| На уровень выше | src="../assets/logo.png" | .. означает выход из текущей папки на один уровень вверх. |
Относительные пути чувствительны к регистру букв на серверах Linux/Unix. Файл Photo.jpg и photo.jpg — это разные файлы. Всегда соблюдайте единый стиль именования (рекомендуется нижний регистр).
Абсолютные пути
Указывают полный адрес ресурса, включая протокол и домен.
- Внешние ресурсы:
src="https://example.com/img/pic.jpg". Используется для подключения картинок с других сайтов или CDN. - Корневые относительные пути:
src="/images/pic.jpg". Слэш в начале означает отсчет от корня сайта (домена). Такой путь будет работать корректно, независимо от того, в какой папке находится текущая HTML-страница.
Оптимизация и современные форматы
Просто вставить картинку недостаточно. Для современного веба важны формат и адаптивность.
Выбор формата
- JPEG: для фотографий с множеством цветов и градиентов.
- PNG: для графики с прозрачностью или четкими геометрическими фигурами.
- WebP / AVIF: современные форматы, обеспечивающие лучшее сжатие при сохранении качества. Поддерживаются всеми актуальными браузерами в 2026 году. Рекомендуется использовать их как основные.
Адаптивные изображения (srcset)
Атрибут srcset позволяет браузеру выбирать оптимальное изображение в зависимости от разрешения экрана устройства.
<img
src="photo-small.jpg"
srcset="photo-small.jpg 600w, photo-large.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Адаптивное фото"
>
Здесь браузер загрузит photo-large.jpg только на широких экранах, а на мобильных ограничится легким photo-small.jpg, экономя трафик пользователя.
Частые ошибки при работе с изображениями
- Отсутствие
alt. Это нарушение стандартов доступности (WCAG) и ухудшение SEO-показателей. - Забытые
widthиheight. Приводит к «прыжкам» контента при загрузке страницы, что раздражает пользователей и штрафуется поисковиками. - Неверные пути к файлам. Самая частая причина «битых» картинок. Проверяйте структуру папок и правильность использования
../. - Использование огромных файлов. Загрузка фотографии весом 5 МБ для миниатюры 200x200 пикселей недопустима. Всегда сжимайте изображения перед загрузкой на сайт.
- Текст внутри картинки. Не вшивайте важный текстовый контент (заголовки, телефоны) непосредственно в изображение. Поисковики не читают текст на картинках, а пользователи не могут его скопировать.
FAQ
Нужно ли указывать расширение файла в пути?
Да, обязательно. Браузер должен знать точное имя файла, включая .jpg, .png, .webp и т.д.
Что делать, если картинка не отображается?
Проверьте консоль разработчика (F12 -> Network или Console). Там будет указана ошибка 404 (файл не найден), что обычно означает ошибку в пути src. Убедитесь, что путь указан верно относительно текущего HTML-файла.
Можно ли использовать тег <img> для фона?
Нет. Для декоративных фонов следует использовать CSS-свойство background-image. Тег <img> предназначен только для контента, имеющего семантическое значение.