Если вы делаете сайт для своего бизнеса, визуальный контент — один из ключевых факторов, влияющих на доверие, конверсию и запоминаемость бренда. Ресурс без ярких фото проигрывает конкурентам. При этом критично, чтобы картинки были качественными и быстро загружались. За это отвечает корректная вставка картинки в HTML и оптимизация.
Если вы создаете сайт и хотите сделать это быстро без навыков программирования, обратите внимание на «Конструктор сайтов» REG.RU — за несколько минут можно создать сайт, выбрать шаблон, загрузить медиа и получить страницы под смартфоны и планшеты. А когда вы готовы углубиться в верстку или доработать паттерны, пригодятся знания о том, как добавить изображение на ваш сайт в HTML.
В современном мире уже всем понятно, зачем нужна вставка картинки в HTML. Именно медиаконтент делает ресурс живым, понятным и вовлекающим. Графика и фото передают эмоции, демонстрируют продукт, структурируют информацию и значительно повышают доверие к вашему бизнесу. Какое настроение хочет передать ваш бренд? Правильно подобранные изображения вызывают эмоции: радость, доверие, желание, чувство безопасности. Кроме того, картинки в HTML являются фундаментальными элементами веб-дизайна. Они помогают зрительно разделять блоки, создавать акценты, направлять взгляд пользователя по нужному пути (еще это называют visual path).
Сердце изображения в HTML-коде — одиночный тег <img>, которому не нужна закрывающая часть. Этот тег становится своеобразным «окном», с помощью которого браузер загружает и отображает графический файл.
Базовая структура тега выглядит так:
<img src="путь-к-изображению.jpg" alt="описание картинки">Хотите, чтобы картинки в HTML загружались быстрее и адекватно отображались на разных экранах? Для этого есть специальные инструменты оптимизации, атрибуты и форматы.
Ключевые атрибуты:
Давайте разберем каждый атрибут по отдельности, так как их правильное заполнение крайне важно.
Это самый главный атрибут. Он указывает браузеру, где искать файл с изображением. Путь к файлу может быть задан двумя способами:
src="image.jpg" — файл лежит в той же папке, что и HTML-файл.
src="images/photo.jpg" — файл лежит в папке images, которая находится в той же директории, что и HTML-файл.
src="../product.png" — файл лежит на один уровень выше текущей папки (символ .. означает "выход из текущей директории").
src="https://ваш-сайт.ru/assets/logo.png" — полный адрес на вашем собственном сервере.
src="https://cdn.unsplash.com/photo-123.jpg" — ссылка на изображение на другом сайте.
Важно! Если вы используете абсолютные пути к чужим ресурсам, это ворует чужой трафик, а также делает ваш сайт зависимым от чужого сервера (если изображение там удалят, на вашем сайте вместо картинки тоже будет ошибка). Лучше выбирать вставку картинки в HTML с собственного хостинга.
Этот атрибут часто упускают из виду новички, но его роль невозможно переоценить. Какова его роль?
Кроме того, alt — залог эффективного SEO-продвижения. Роботы поиска опираются на атрибут alt, чтобы понять изображение и, соответственно, задать ему позицию в поиске по картинкам.
Что написать в атрибуте alt, если нужно вставить картинку в HTML?
Главное — пишите как можно конкретнее, избегая абстракций: alt="Черный чай в белой керамической чашке на глянцевом столике". Избегайте ничего не значащих фраз вроде alt="image023.jpg" или alt="картинка". Используйте ключевые слова, важные для вашей публикации.
Пример:
<img
src="/images/hero@2x.webp"
alt="Главный баннер: доставка свежей еды по городу">width и height
Их используют, чтобы задать размер картинки HTML в пикселях.
<img src="cat.jpg" alt="Рыжий кот" width="800" height="600">Они помогают браузеру зарезервировать необходимое место на странице до загрузки самого изображения. Если место уже зарезервировано, вам не грозит неприятное «прыгание» контента во время загрузки, что критично для пользовательского опыта и SEO. Однако для непосредственного изменения размеров изображения лучше использовать CSS или заранее подготавливать картинку нужного размера, чтобы не загружать тяжелые файлы.
Задает пояснение, которое будет отображаться, если вы наведете на картинку мышкой. Title не используют как замену предыдущего атрибута alt. Текст здесь идет не вместо картинки в HTML, а всплывает при наведении и дает дополнительную информацию.
<img src="chart.png" alt="График продаж за 2025 год" title="Нажмите, чтобы увеличить">Современный инструмент, который включает ленивую загрузку картинки в HTML. Графика станет четкой в том случае, если человек прокрутит страницу непосредственно до ее расположения. Это позволяет быстрее загружать страницу, ведь контент отдается не единовременно, а постепенно, по мере изучения сайта пользователем.
Рекомендация. Лучше не ставить lazy на LCP‑экран (крупное, видимое первым изображение). Такое изображение определяет метрику Largest Contentful Paint (LCP), по которой можно понять, как быстро загружается визуал сайта в принципе. Медленная загрузка LCP-изображения негативно повлияет не только на клиентов, но и на SEO, поэтому важно оптимизировать его по качеству, весу и скорости загрузки.
<img src="large-banner.jpg" alt="Акция" loading="lazy">По умолчанию используется формат loading="eager". Изображения в таком случае сразу загружаются в максимальном качестве, даже если пользователь до них еще не дошел.
<img src="large-banner.jpg" alt="Акция" loading="eager">Основа картинок, которые подстраиваются под размер экрана. Эти атрибуты позволяют не загружать картинки десктопного размера на телефонах. Вы можете указать сразу несколько вариантов вашего файла и описать правило выбора ширины.
<img
src="/images/case-800.jpg"
srcset="/images/case-480.jpg 480w,
/images/case-800.jpg 800w,
/images/case-1200.jpg 1200w"
sizes="(max-width: 600px) 90vw, (max-width: 1200px) 50vw, 800px"
alt="Скриншот панели управления с аналитикой"
width="1200"
height="800"
loading="lazy"
decoding="async">
Ниже атрибут srcset перечисляет варианты с указанием ширины в пикселях:
Для размера 480px загружается case-480.jpg.
Для размера 800px загружается case-800.jpg.
Для размера 1200px загружается case-1200.jpg.
Настройка атрибута sizes подсказывает браузеру, какую ширину займет картинка на экране при разных условиях. Браузер сам выбирает лучший размер.
Для экранов шириной до 600px изображение займет 90% ширины экрана (90vw).
Для экранов шириной до 1200px картинка займет 50% экрана (50vw).
В других случаях изображение будет 800px шириной.
Если вам нужна более тонкая настройка и больше возможностей HTML, как поставить изображение на сайт, используются и другие атрибуты:
Как добавить изображение в HTML? Помимо простого размещения в потоке текста, картинки часто используются как ссылки или как фон для других элементов.
Изображение как ссылка
Чтобы сделать картинку кликабельной и ведущей на другую страницу, просто поместите тег <img> внутрь тега ссылки <a>.
<a href="https://ваш-сайт.ru/catalog/product-1">
<img src="images/product-1-preview.jpg" alt="Новый продукт Model X" width="400">
</a>
Картинка как фон
Часто для декоративных элементов, крупных фоновых баннеров или кнопок опытные верстальщики используют CSS background-image. Это дает больше возможностей для того, чтобы настроить позиционирование, размеры и повтор, если картинки сменяют друг друга.
<div class="hero-banner"></div>
.hero-banner {
width: 100%;
height: 500px;
background-image: url('images/hero-background.jpg');
background-size: cover; /* Растягивает изображение на весь блок */
background-position: center center; /* Выравнивает по центру */
}
Когда предпочтительнее использовать background-image? В тех случаях, когда изображение является частью дизайна (фон шапки, декоративный паттерн, текстура). Также это предпочтительный способ, если поверх изображения нужно разместить текст или другие элементы. Для картинок, которые иллюстрируют важные блоки сайта, используйте img с alt, а не background-image.
Картинки в HTML — критически важный фактор для коммерческих ресурсов, но высококачественные картинки дольше обрабатываются системой, и это влияет на то, как быстро будет подгружаться контент. Важно балансировать между четкостью и весом файла.
Для начала, никогда не загружайте на сайт фотографии прямо с фотоаппарата или смартфона без предварительной обработки. Их вес может достигать десятков мегабайт, и из-за этого скорость загрузки будет очень долгой.
Дополнительные шаги для оптимизации сайта и рекомендации, как корректно добавить изображения в HTML:
Добавление изображений в HTML — базовый, но крайне важный навык, необходимый для создания визуально привлекательных и производительных веб-сайтов. Начинайте с основ — тега <img> и обязательных атрибутов src и alt. Однако всегда держите в фокусе две главные цели: качество визуального контента и скорость его загрузки для конечного пользователя. Теперь вы знакомы с принципами вставки картинок, правилами указания атрибутов и настройкой их отображения на странице.
Анна Прозорова
В мире, где ежедневные задачи сыплются как из рога изобилия, а список дел растет быстрее,…
Эффективный инструмент или дань моде? Рассказываем, зачем малому и среднему бизнесу свой сайт и как…
Рег.решение для профессионалов «Развитие личного бренда» — это готовая система, которая за 3 недели создаст…
Анализ рынка — это как разведка перед боем: прежде чем вложить деньги, запускать продукт или…
Когда бизнес растет, поток данных о клиентах превращается в лавину. Рекламные кампании, подписки, заказы, возвраты…
Представьте: вы приходите в новую компанию. Все новое — люди, процессы, правила, даже корпоративные чаты.…