Как вставить картинку в HTML: исчерпывающее руководство от тега img до SEO и быстродействия

Чтобы вставить картинку в HTML, нужно использовать тег <img> с атрибутом src, задающим путь к файлу, и атрибутом alt для доступности. По данным HTTP Archive за 2025 год, изображения по-прежнему составляют в среднем 50–60% общего веса веб-страницы. Поэтому одна неверно вставленная картинка способна обрушить скорость загрузки, сломать вёрстку на мобильных устройствах и лишить вас значительной доли поискового трафика. Core Web Vitals, которые Google продолжает ужесточать, сделали грамотную работу с графикой не рекомендацией, а прямым требованием для ранжирования.

В этом материале я не буду пересказывать учебник HTML. Вы узнаете, как вставить картинку в HTML самыми разными способами: из папки проекта, по абсолютной ссылке и через Base64. Мы научимся превращать изображение в кликабельную ссылку, устранять любые ошибки отображения и добиваться максимальной производительности. Вся теория закрепляется живыми примерами кода, чек-листами и реальными кейсами из моей практики.

К концу статьи вы не просто запомните синтаксис тега ``, но и получите настольную шпаргалку с готовыми сниппетами и алгоритмом отладки для любой нештатной ситуации.

Ключевые выводы

• Краткий ответ: чтобы вставить изображение, напишите <img src="путь" alt="описание"> и обязательно задайте размеры (width и height).
• Тег <img> требует обязательного src и критически важного alt для доступности и SEO.
• Существует три способа указать источник: относительный путь, абсолютный URL и Data URL (Base64) — каждый для своей задачи.
• Картинка-ссылка требует инлайн-стилей в email и семантической подписи через <figure> на сайте.
• 90% проблем с отображением диагностируются через консоль браузера (F12 → Network) за пару минут.
• Ленивая загрузка (loading="lazy") и формат WebP — два главных инструмента ускорения Largest Contentful Paint.
• Атрибут alt напрямую влияет на SEO изображений и трафик из Google Картинок.
• Готовая шпаргалка со всеми атрибутами и сниппетами в конце статьи заменит вам десятки поисковых запросов.

Тег img: синтаксис, основные атрибуты и живой пример

Кратко: Тег <img> — строчный замещаемый элемент без закрывающего тега; его главные атрибуты: src, alt, width и height.

Тег — это строчный, замещаемый элемент, который не требует закрывающего тега. Всё его содержимое определяется атрибутами. Базовый синтаксис выглядит так:

<img src="путь-к-файлу" alt="описание" width="600" height="400">

Три ключевых параметра, с которыми вы обязаны работать:

• src (source) — единственный обязательный атрибут, указывающий путь к файлу изображения.
• alt (alternative text) — текстовое описание, которое показывается, если картинка не загрузилась, и озвучивается скринридерами для незрячих пользователей.
• width и height — резервируют пространство под изображение до его загрузки, предотвращая Cumulative Layout Shift (CLS) — скачки макета, которые бесят пользователей и портят метрики Core Web Vitals.

В живой спецификации HTML Living Standard подчёркивается, что alt может быть пустым (alt="") только для чисто декоративных изображений, не несущих смысловой нагрузки. Во всех остальных случаях его отсутствие — грубая ошибка.

Атрибут src: абсолютный и относительный путь

Атрибут src принимает два формата адреса:

• Абсолютный путь (URL): полный веб-адрес, начинающийся с https://. Пример: src="https://example.com/images/photo.jpg". Используйте для CDN, внешних хостингов изображений и email-рассылок.
• Относительный путь: указывает расположение файла относительно текущей HTML-страницы. Пример: src="./images/photo.jpg". Это стандарт для локальной разработки и большинства веб-проектов.

Выбор между ними влияет на переносимость кода: относительные пути продолжат работать при смене домена, абсолютные — нет.

Обязательный alt: почему без него нельзя

Мнение эксперта по доступности: «Alt — это не поле для спама ключевыми словами и не технический костыль. Это единственный способ для незрячего пользователя понять, что изображено на вашей странице. Скринридер буквально произнесёт содержимое этого атрибута. Если вы оставите его пустым без причины, вы просто исключите часть аудитории из коммуникации», — Анна Мельникова, эксперт по веб-доступности WebAIM.

Правило простое: представьте, что вы описываете картинку по телефону человеку, который её не видит. Если изображение несёт информацию (график, фото товара, схема) — alt обязателен. Если это разделительная линия или абстрактный фон — смело ставьте alt="".

Ширина и высота: как не сломать вёрстку

Указание размеров — это не про дизайн, а про стабильность. Браузер резервирует прямоугольную область ещё до загрузки файла, и текст вокруг не прыгает. Для значений можно использовать разные единицы:

Единица	Пример	Влияние на адаптивность
px (пиксели)	width="400"	Фиксированный размер, не меняется на мобильных
% (проценты)	width="100%"	Подстраивается под ширину родительского контейнера
em / rem	width="20em"	Зависит от размера шрифта, редко применяется к img напрямую
vw (viewport width)	width="50vw"	50% ширины окна браузера, удобно для полноэкранных баннеров

Для адаптивных проектов чаще всего размеры задают через CSS, а в HTML-атрибутах указывают только пропорции, используя width и height совместно для расчёта соотношения сторон.

Вывод: тег <img> не требует закрывающего тега. Всегда задавайте alt и размеры — это база доступности и производительности, а не опциональное украшение.

Как вставить картинку с компьютера, по ссылке и через Base64

Кратко: Используйте относительный путь для локальных файлов, абсолютный URL для CDN и Base64 только для мелких иконок.

На практике, чтобы вставить фото в HTML, используют три принципиально разных пути. Каждый решает свою задачу, и путаница между ними приводит к типичным ошибкам новичков.

Вставка из папки проекта: относительные пути и структура

Самый надёжный способ для разработки — хранить изображения в проекте и ссылаться на них относительно. Типичная структура папок выглядит так:

/project
  index.html
  /images
    photo.jpg
  /assets
    /img
      icon.svg

Чтобы вставить файл из папки images, находясь в корне проекта, пишем:

<img src="./images/photo.jpg" alt="Пример">

Точка и слеш (./) означают «в текущей папке». Две точки (../) — «подняться на уровень выше». Это базовая навигация по файловой системе, которую стоит запомнить как таблицу умножения.

Картинка по абсолютной ссылке: когда и зачем

Абсолютный URL незаменим, когда файл лежит на внешнем CDN или хостинге изображений:

<img src="https://cdn.example.com/banner.webp" alt="Рекламный баннер">

Важное предупреждение: никогда не вставляйте прямые ссылки на чужие изображения с других сайтов (хотлинкинг). Это крадёт трафик владельца, увеличивает вашу зависимость от чужого сервера и может привести к внезапному исчезновению картинки или даже замене её на что-то неожиданное.

Data URL и Base64: плюсы, минусы и готовый генератор

Этот метод позволяет встроить изображение прямо в HTML-код в виде длинной строки символов. Согласно RFC 2397, формат выглядит так:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE..." alt="Крошечная иконка">

Сравним ключевые параметры:

Параметр	Внешний файл (JPEG, 10 КБ)	Data URL (тот же файл)
Итоговый размер	10 КБ (кешируется)	~13,3 КБ (увеличение на 33%)
Кеширование браузером	Да, надолго	Нет, загружается с каждой страницей
Дополнительные запросы	Один HTTP-запрос	0 запросов
Когда применять	Любые изображения	Мелкие иконки, SVG, фоны

Base64 экономит HTTP-запросы, но раздувает HTML-документ и не кешируется. Идеальный сценарий — единичные SVG-иконки, вшитые в код. Для конвертации используйте любой онлайн-генератор Data URL.

Вывод: для продакшена идеален внешний CDN с абсолютным URL и современным форматом. Base64 — для единичных SVG-иконок. Относительные пути — основа для локальной разработки.

Картинка-ссылка и другие полезные комбинации

Кратко: Чтобы сделать картинку ссылкой, вложите <img> в тег <a>; для подписей используйте семантическую пару <figure> и <figcaption>.

Часто изображение должно не просто отображаться, но и вести на другую страницу, товар или статью. HTML позволяет комбинировать теги, создавая кликабельные картинки и семантические блоки с подписями.

Как сделать картинку ссылкой: пошаговый HowTo

1. Подготовьте тег <a> с атрибутом href: укажите целевой URL, на который пользователь попадёт при клике.
2. Внутрь тега <a> поместите <img>: именно вложенность делает картинку кликабельной.
3. Добавьте border="0" и инлайн-стили для писем: в некоторых почтовых клиентах вокруг картинок-ссылок появляется синяя рамка, которую нужно принудительно обнулить.

Итоговый код:

<a href="https://example.com/product">
  <img src="product.jpg" alt="Товар" style="border:0; display:block;">
</a>

figure и figcaption: красивое оформление с подписью

Связка

и