4 совета о том, как добавить фоновые изображения в шаблон электронной почты

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

• зачем нужно использовать изображения в рассылках;

• как использовать HTML-код для вставки фонового изображения;

• как добавить фоновое изображение с помощью CSS.

Какие бывают фоны для писем?

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

Добавление фоновых изображений электронных писем в HTML требует внесения изменений в код вашего информационного бюллетеня. Если вы ничего не знаете о пользовательском кодировании — правильный путь — использовать бесплатные готовые шаблоны, которые уже загружены в вашу почтовую программу Atomic Email Sender. Выберите тот, который вам нравится, добавьте контент и отправьте кампанию.

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

Зачем использовать фон электронной почты

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

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

Анимированный фон электронной почты

Будь проще: базовый дизайн фона электронной почты

Помните, что фоновые изображения должны быть простыми и без кричащих узоров, которые могут затмить всех. Цвет фона HTML-письма не должен быть очень ярким, чтобы не привлекать больше внимания, чем основная информация электронной рассылки. Помните, что фон информационного бюллетеня — это просто дополнение к содержанию, которое делает электронное письмо привлекательным. Лучшие фоновые изображения для информационных бюллетеней выполнены в спокойном стиле и могут включать графические элементы (текстуры, градиенты, узоры и т. д.).

Если вы не профессионал в дизайне, рекомендуем не рисковать и воздержаться от вычурных фонов. Минимализм сейчас в тренде, и вы можете успешно применить его в своей рассылке по электронной почте. Одним из лучших способов использования изображений в электронных письмах является градиентный фон для электронного письма. Поиграйте с цветом и выберите градиентный фон с плавным переходом в соответствии с содержанием письма. Это можно сделать с помощью CSS. Таким образом, вы получаете фон письма, который станет отличной альтернативой фону из картинки PNG, JPG или GIF.

Градиентный фон электронной почты

Лучшие размеры и форматы изображений для информационных бюллетеней

Формат изображения для электронной почты

Когда вы выбираете или создаете изображение для кампании по электронной почте, убедитесь, что вы сохранили его в правильном формате — PNG, JPG или GIF. Каждый формат изображения имеет свою специфику, например, изображения, сохраненные в формате PNG, сохраняют прозрачность.

Размер имеет значение!

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

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

Различается ли лучший размер фонового изображения Outlook и Gmail? Нет, не имеет значения, какой клиент используется для чтения рассылок получателями. Идеальный размер фонового изображения электронной почты Gmail и Outlook составляет 600-650 пикселей.

Чтобы использовать изображение GIF в качестве фонового изображения и покрыть всю область содержимого, оставьте его размер равным 1280 пикселей в ширину. Хочу отметить, что GIF-файлы поддерживаются практически всеми почтовыми клиентами, кроме Outlook 2007-2013 - их пользователь увидит только первый кадр в анимированном GIF-файле. Вот почему поставьте самый важный кадр первым. Как правило, количество кадров в анимированном GIF не должно превышать 10 единиц.

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

Сделайте свою электронную почту удобной для мобильных устройств

Помните, что более половины сообщений электронной почты люди открывают с помощью мобильных устройств. Это следует учитывать при создании дизайна электронной почты. Подготовьте мобильную версию рассылки с меньшим размером изображений, чтобы избежать проблем с долгой загрузкой электронной почты и т. д. Как сделать так, чтобы электронная почта правильно отображалась на смартфоне? Используйте CSS для настройки фонового изображения для каждого конкретного экрана смартфона. Получатели будут благодарны за качественное оформление, экономию времени и трафика!

Как сделать фоновое изображение в электронной почте? Давайте узнаем, как работать с фоновыми изображениями в нашей программе для отправки электронной почты — Atomic Mail Sender.

Как добавить фоновые изображения - Atomic Mail Sender Rocks

Существует четыре основных метода добавления фоновых изображений:

• Использование атрибутов таблицы для вставки фонового изображения в HTML
• Использование встроенного CSS
• Использование встроенного CSS
• Использование пуленепробиваемых фонов

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

1. Атрибуты таблицы как способ добавления фонового изображения в HTML

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

Упомянутый атрибут может применяться ко всей таблице (тег <table>) или к ячейке таблицы (тег <td>).

Атрибут background содержит URL-адрес, по которому размещено ваше фоновое изображение.

Например:

<td width="100%" align="center" bgcolor="#fcd539" border="0" cellspacing="0" cellpadding="0" background="https://path-to-image/title.png"></td>

Для клиентов, которые не поддерживают фоновые изображения, необходимо указать цвет фона (bgcolor), а также ALT-текст. Будьте щепетильны в выборе цвета фона. Все элементы контента и текст сообщения должны быть хорошо читаемы на фоне. Некоторые читалки не включают изображения, поэтому хорошо использовать ALT-тексты. Не используйте только обычные альтернативные тексты, которые вы можете использовать для нужд SEO. Представьте, что это единственная альтернатива изображению, и используйте ваши ALT-тексты как призыв к действию. Заставьте их звучать хорошо и броско! Вы получите от этого прибыль. Либо читатель включает изображения, чтобы увидеть изображение, либо просто переходит по ссылке, чтобы увидеть предложение.

До:

Электронная почта без фона

После:

Электронная почта с фоновым рисунком

Без фонового изображения, но с фоновым цветом:

Электронная почта с простым фоном

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

Итак, вот как использовать HTML-код для добавления фонового изображения. Теперь перейдем к следующему способу его вставки.

2. Как использовать встроенный код CSS для фонового изображения

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

Пример HTML-кода:

<td width="100%" align="center" border="0" cellspacing="0" cellpadding="0"></td>

• Добавьте следующее свойство: background-repeat: no-repeat; на стол, чтобы фоновое изображение не повторялось. Значит, так не будет: Это будет отображаться следующим образом: Неповторяющиеся фоновые изображения
• размер фона: обложка; - это важное свойство позволяет заполнить своим изображением все доступное пространство бюллетеня. Особенно полезно для кампаний по электронной почте для мобильных устройств, когда у вас ограничено пространство для рассылки новостей и требуется изменить размер изображения.

Хорошо иметь ссылку, ведущую на WEB-версию вашего сообщения электронной почты. Иногда невозможно увидеть изображения, это может произойти из-за ошибки или из-за плохого почтового клиента. Хорошей практикой является наличие ссылки на WEB-версию письма. Просто сделайте так, чтобы это звучало как «Проблемы с просмотром изображений? Нажмите здесь для просмотра WEB-версии».

3. Встроенная таблица CSS для создания фонового изображения

Прежде всего, вам нужно добавить тег css <style> в заголовок вашего сообщения электронной почты. Убедитесь, что в существующем HTML-коде нет других свойств фона, иначе они могут переопределить фоновое изображение.

Пример кода CSS следующий:

<style> .bgImage { background-image: url('https://path.to/image.png'); background-repeat: no-repeat; background-size: cover; } </style>

Затем мы переходим непосредственно к встроенному CSS в шаблоне электронной почты. Используйте класс для настройки соответствия стиля css, который вы написали в заголовке письма.

<td class="bgImage"></td>

4. Пуленепробиваемые фоновые изображения в электронной почте

Принцип Bulletproof для фоновых изображений сочетает использование атрибутов HTML с языком векторной разметки Microsoft (VML). Этот подход помогает создать шаблон письма с фоном, который будет отображаться в каждом почтовом клиенте.

Сегодня есть бесплатный сервер для автоматической генерации пуленепробиваемого фонового кода. Перейдите на https://backgrounds.cm/ и попробуйте.

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

Как фоновые изображения отображаются в почтовых клиентах

Есть проблема: фоновые картинки могут не поддерживаться некоторыми почтовыми клиентами. Например, старые версии Android. Кроме того, некоторые версии клиентов Gmail не будут полностью отображать ваши шаблоны электронной почты с изображениями, как бы вы ни старались. Не забывайте об этом при создании рассылки. А чтобы легче было разобраться в вопросе, воспользуйтесь этой таблицей.

Источник: https://litmus.com/blog/the-ultimate-guide-to-background-images-in-email.

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

Еще немного советов

• Рекомендуемая ширина письма — 600 пикселей (макс. 650 пикселей). Это гарантия того, что ваше сообщение электронной почты будет правильно отображаться на каждом устройстве и в каждом почтовом клиенте.
• Рекомендуемая высота письма зависит от длины контента, но в лучшем случае не должна превышать 200 пикселей.
• Рекомендуемый размер шрифта – 14px, межстрочный интервал 1,5.
• Цвет текста должен контрастировать с цветом фона.

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

Как добавить фоновое изображение в электронную почту с помощью Atomic Mail Sender?

Итак, вы узнали о фонах для рассылки и о том, как их настроить. Но в каком инструменте можно проверить эти знания и получить наглядный результат? Используйте для этих целей Atomic Mail Sender. Этот инструмент имеет встроенный HTML-редактор. Таким образом, напишите свой код, оцените результат визуально и сразу же отправляйте рассылку из той же программы. Давайте взглянем.

Информационная рассылка с градиентным фоном в Atomic Mail Sender

Редактор HTML в Atomic Mail Sender

Колдуйте над кодом и отправляйте электронные письма с любым фоном в программе Atomic Mail Sender.

Фоновое изображение — хороший способ украсить шаблон электронной почты. Но не заменяйте содержимое электронной почты только изображением. Не создавайте электронные письма, полностью основанные на изображениях. Это по-прежнему актуальная ошибка электронного маркетинга. Иногда вы открываете электронную почту, и все, что вы видите, это квадраты с красными крестами. Конечно, я не разрешаю изображения от всех отправителей, а это значит, что я обязательно пропущу это письмо, даже если оно не было мошенничеством или спамом. Убедитесь, что ваше электронное письмо выглядит информативно и полезно без изображений.

Используйте бесплатные шаблоны электронной почты Atomic Mail Sender для вдохновения и создания собственных фирменных электронных писем с яркими фоновыми изображениями. Дайте нам знать, если у вас есть какие-либо вопросы в комментариях ниже.

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

Хотите создавать красочные рассылки и отправлять их с помощью одного и того же инструмента? Загрузите тестовую версию Atomic Mail Sender и порадуйте получателей красивыми рассылками!