Как вставить картинку в HTML — один из самых частых вопросов у тех, кто делает первую страницу, правит шаблон или добавляет изображение в письмо или блог. На практике все сводится к одному тегу, но важно правильно указать путь к файлу и не забыть про описание для доступности.
Базовый тег для изображения
В HTML картинку вставляют с помощью тега <img>. Это пустой элемент, то есть у него нет отдельного закрывающего тега. Самый простой вариант выглядит так:
<img src="image.jpg" alt="Описание изображения">
Здесь src указывает, где находится файл, а alt описывает, что именно показано на картинке. Именно этот текст важен для SEO, экранных дикторов и случаев, когда изображение не загрузилось.
Как правильно указать путь к картинке
Чаще всего ошибка возникает не в самом теге, а в адресе файла. Есть два основных варианта:
- Относительный путь — когда картинка лежит рядом с HTML-файлом или в папке на сервере.
- Абсолютный URL — когда вы указываете полный адрес, например с доменом и названием файла.
Если изображение не отображается, проверьте написание имени файла, расширение и регистр букв. На сервере photo.jpg и Photo.jpg могут быть разными файлами.
Что означают alt, width и height
Чтобы изображение было не только видимым, но и корректно работало на странице, часто добавляют еще несколько атрибутов.
- alt — короткое и содержательное описание картинки.
- width и height — размеры изображения в пикселях.
- title — подсказка, которая появляется при наведении, но она не заменяет alt.
Атрибуты width и height помогают браузеру быстрее рассчитать макет страницы, а это уменьшает скачки верстки во время загрузки.
Пример вставки картинки в HTML
Вот простой пример, который можно использовать сразу:
<img src="images/office-laptop.jpg" alt="Ноутбук на рабочем столе" width="800" height="450">
Если картинка должна быть кликабельной, ее обычно оборачивают в ссылку. Тогда изображение ведет на отдельную страницу, файл или увеличенную версию:
<a href="images/office-laptop.jpg"><img src="images/office-laptop.jpg" alt="Ноутбук на рабочем столе"></a>
Типичные ошибки, которых стоит избегать
- забыть атрибут alt;
- указать неправильный путь к файлу;
- ошибиться в регистре букв в названии изображения;
- добавить слишком длинное или пустое описание в alt;
- подключить слишком тяжелый файл без оптимизации.
Если вы готовите страницу для сайта, лучше хранить изображения в понятной структуре папок и давать файлам короткие названия без пробелов. Это упрощает поддержку и снижает риск ошибок.
Когда нужны другие способы
В современной верстке иногда требуются дополнительные решения: адаптивные изображения, picture для разных экранов или lazy loading для отложенной загрузки. Но если вам нужно именно понять, как вставить картинку в HTML, базовый тег <img> закрывает большинство простых задач.
Начните с правильного src, добавьте содержательный alt и проверьте путь к файлу — этого уже достаточно, чтобы изображение стабильно работало на странице.
