Как вставить изображение в HTML-письмо

Как добавить изображение или фон в HTML-письмо, настроить размеры, alt-текст, ссылку и адаптивное отображение в почтовых клиентах.

Изображение в email-письме может использоваться как логотип, иллюстрация, фотография товара, баннер или фон отдельного блока. Оно помогает передать настроение, показать продукт и обратить внимание на предложение.

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

Добавление изображения и фона в HTML-письмо — Изображение можно использовать как отдельный элемент письма или как фон текстового блока.

Ключевой принцип. У каждого важного изображения должен быть понятный alt-текст, а критичная информация должна оставаться в обычном HTML-тексте. Получатель должен понять предложение, даже если графика не загрузилась.

Добавить изображения, настроить блоки и проверить готовый макет можно в онлайн-конструкторе HTML-писем.

Как можно использовать изображения в письме

Логотип компании

Обычно размещается в верхней части письма и помогает получателю определить отправителя. Логотип не должен занимать большую часть первого экрана.

Основной баннер

Поддерживает главное предложение и задаёт визуальный акцент. Заголовок, условия и целевое действие при этом лучше оставить отдельными HTML-элементами.

Карточка товара

Показывает продукт вместе с названием, краткими характеристиками, ценой и ссылкой. Изображение должно соответствовать странице, на которую ведёт переход.

Иллюстрация или схема

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

Фоновое изображение

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

Как добавить изображение в HTML-письмо

Определите назначение. Решите, какую информацию поддерживает изображение и нужно ли оно для понимания предложения.
Подготовьте файл. Обрежьте лишнее пространство, задайте подходящие размеры и сожмите изображение перед загрузкой.
Выберите формат. Для фотографий обычно подходит JPEG, для графики и прозрачности — PNG, а для короткой анимации — GIF.
Загрузите изображение. Добавьте в макет блок изображения и выберите подготовленный файл.
Настройте ширину. Ограничьте картинку шириной контейнера письма и обязательно сохраните исходные пропорции.
Заполните alt-текст. Коротко опишите содержание или назначение изображения.
Добавьте ссылку. Сделайте изображение кликабельным, если получатель ожидает переход на страницу товара, услуги или материала.
Отправьте тест. Проверьте письмо на компьютере и смартфоне с загруженными и отключёнными изображениями.

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

Как выбрать размер изображения

Размер зависит от ширины блока, в котором размещается картинка. Баннер можно подготовить под всю ширину письма, а изображение в карточке товара — под ширину соответствующей колонки.

Изображение не должно выходить за границы контейнера.
Ширина и высота должны изменяться пропорционально.
Не следует загружать многократно увеличенный файл без практической необходимости.
Мелкий текст внутри картинки должен оставаться читаемым на смартфоне.
Основное содержание не должно зависеть от текста, встроенного в изображение.

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

Как написать alt-текст

Alt-текст отображается вместо изображения, если файл не загрузился. Он также помогает понять назначение картинки в условиях ограниченного доступа к графике.

Для товара: «Синяя дорожная сумка из новой коллекции».

Для схемы: «Этапы настройки автоматической email-рассылки».

Для интерфейса: «Выбор изображения в конструкторе писем».

Для информационного баннера: «Условия осенней распродажи».

Для логотипа: название компании.

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

Когда изображение можно сделать ссылкой

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

Ссылка должна вести на страницу, соответствующую изображению.
Переход необходимо проверить до отправки.
Для ссылки следует использовать защищённый HTTPS-адрес.
Рядом желательно оставить обычный текстовый призыв к действию.
Важный переход не должен зависеть только от загрузки картинки.

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

Как использовать фон в email-письме

Фоновое изображение размещается позади текста или других элементов блока. Оно помогает оформить первый экран, выделить предложение или поддержать фирменный стиль.

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

Выберите спокойное изображение. Фон не должен мешать чтению заг текста и распознаванию кнопки.
Задайте резервный цвет. Он будет виден при отключённом или недоступном изображении.
Проверьте контраст. Текст должен хорошо читаться и поверх картинки, и поверх резервного цвета.
Не размещайте важный текст внутри фона. Заголовок, цена, дата и условия должны оставаться HTML-текстом.
Проверьте масштабирование. Убедитесь, что на мобильном экране фон не обрезает важную область изображения.
Подготовьте простой резервный вариант. Если фон не поддерживается, получатель всё равно должен увидеть понятный блок.

Какой резервный сценарий предусмотреть

У блока установлен подходящий однотонный цвет фона.
Заголовок и описание добавлены обычным HTML-текстом.
Целевое действие остаётся доступным без изображения.
Текст не сливается с резервным цветом.
Высота блока не зависит только от фоновой картинки.
Смысл предложения сохраняется при отключённой графике.

Что проверить перед отправкой

Изображения загружаются по HTTPS и доступны без авторизации.
Файлы сжаты и не создают избыточный вес письма.
Картинки не выходят за границы контейнера.
Пропорции сохраняются на компьютере и смартфоне.
Alt-тексты соответствуют содержанию изображений.
Все кликабельные изображения ведут на правильные страницы.
Основной призыв к действию доступен без загрузки графики.
Фоновый блок имеет резервный цвет.
Текст остаётся различимым в светлой и тёмной теме.
Тестовое письмо проверено в нескольких почтовых клиентах.

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

Что правильная работа с изображениями даёт бизнесу

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

Использование alt-текста, резервного цвета и обычного HTML-текста уменьшает зависимость письма от графики. Команда получает понятный стандарт подготовки баннеров, карточек товаров, логотипов и фоновых блоков для последующих рассылок.