Как вставить картинку в html

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

Базовый способ вставки

Самый простой вариант — использовать тег img. У него нет закрывающего тега, а сам файл указывается в атрибуте src. Минимальная запись выглядит так:

<img src="photo.jpg" alt="Описание изображения">

Здесь src отвечает за путь к файлу, а alt помогает понять, что на картинке, если она не загрузилась. Именно этот вариант чаще всего нужен, когда вы впервые разбираетесь, как вставить картинку в html.

• Если файл лежит рядом с HTML-страницей, указывайте только имя: src="photo.jpg".
• Если изображение в папке, добавьте путь: src="images/photo.jpg".
• Если файл выше по структуре, используйте ../ для перехода на уровень вверх.

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

Что важно указать в атрибутах

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

• alt — текстовое описание изображения;
• width и height — размеры в пикселях;
• title — подсказка при наведении;
• loading="lazy" — отложенная загрузка вне экрана.

Пример с размерами:

<img src="avatar.png" alt="Аватар пользователя" width="200" height="200">

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

Пути к файлу и частые ошибки

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

1. Имя файла совпадает полностью, включая регистр букв.
2. Расширение верное: jpg, png, webp, gif и т.д.
3. Путь написан относительно HTML-файла, а не папки на рабочем столе.
4. В имени нет лишних пробелов и опечаток.

Например, если страница находится в корне проекта, а изображение в папке assets, путь будет таким: src="assets/photo.jpg". Если HTML-файл лежит в подпапке, структура пути меняется, и это нужно учитывать отдельно.

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

Когда нужен другой формат вставки

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

Если изображение должно открывать большую версию, оборачивают его в ссылку:

<a href="big-photo.jpg"><img src="small-photo.jpg" alt="Фото"></a>

Такой приём удобен для галерей и превью, но он не заменяет базовое понимание того, как вставить картинку в html. Сначала проверьте обычный вывод, а потом добавляйте поведение по клику.

Короткая проверка результата: файл открыт в браузере, изображение видно, alt заполнен, путь ведёт к нужному месту, а размер не ломает верстку. Если всё это выполнено, картинка вставлена правильно. Когда нужно добавить ещё одно изображение, просто повторите тот же принцип — и как вставить картинку в html перестанет быть вопросом.