Как добавить картинку в html

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

Базовый тег для изображения

Основной способ — тег img. Он не имеет закрывающего тега и обычно выглядит так:

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

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

• src — обязательный атрибут без него браузер не узнает, что нужно загрузить;
• alt нужен для доступности и на случай, если файл не откроется;
• По желанию можно добавить width и height, чтобы заранее задать размеры.

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

Пути к файлу и откуда брать изображение

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

Чаще всего используют три варианта:

• Файл в той же папке: <img src="logo.png" alt="Логотип">;
• Файл в подпапке: <img src="img/logo.png" alt="Логотип">;
• Полный адрес на другом сайте: <img src="https://example.com/logo.png" alt="Логотип">.

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

Размер, отображение и поведение на странице

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

Пример:

<img src="photo.jpg" alt="Город вечером" width="600">

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

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

<a href="/home"><img src="logo.png" alt="На главную"></a>

Что проверить, если изображение не отображается

Когда не получается понять, как добавить картинку в html, проблема обычно в одном из нескольких мест. Сначала проверьте имя файла, затем путь, потом расширение. Браузер не исправляет опечатки за вас.

• Файл действительно существует в указанной папке.
• Имя совпадает полностью, включая буквы верхнего и нижнего регистра.
• Расширение указано верно: .jpg, .png, .webp и т.д.
• В атрибуте src нет лишних пробелов и неправильных кавычек.
• Если путь относительный, он построен от HTML-файла, а не от папки проекта в целом.

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

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