Как использовать фоновые изображения в электронных письмах в формате HTML
Немногие электронные письма выглядят хорошо без изображений. Прямо сейчас я могу думать только об обновлениях политики, юридических уведомлениях и системных уведомлениях или предупреждениях. Все остальные, скорее всего, выиграют от хороших визуальных эффектов, которые сделают ваши сообщения привлекательными, информативными, интересными и удобными для чтения.
Подробнее об изображениях в целом можно прочитать в нашем специальном руководстве – Как правильно вставлять изображения в электронное письмо. И ниже я сосредоточусь на определенном типе изображений, которые являются фоновыми изображениями электронной почты.
Фоновое изображение — это изображение, которое помещается на задний план макета электронной почты. Вы можете добавить поверх него любой элемент, например текст, эмодзи, изображение, видео, призыв к действию, таймер и т. д.
Фоновое изображение можно применить ко всему макету (электронное письмо слева), полосе, структуре или контейнеру ( почту справа).
Это шаблоны из нашего редактора, где вы можете вставлять фоновые изображения в письма без HTML-кода. Короче говоря, вы просто загружаете изображение в редактор и выбираете его в качестве фонового изображения для необходимого элемента. Кроме того, вы можете отредактировать или изменить фон письма во встроенном фотошопе прямо в редакторе. Для получения более подробной информации прочитайте полную инструкцию.
Зачем использовать фоновые изображения в электронных письмах
Как правило, фоновые изображения служат для того, чтобы ваши электронные письма были более приятными для глаз, вносили свой вклад в уникальный дизайн электронных писем и создавали визуальную разницу.
- Они могут служить контрастом простой или текстовой копии в электронных письмах с минималистичным дизайном.
- Они могут увеличить объем ваших коротких писем.
- Они могут разделить структуру копии на отдельные разделы.
- Они могут помочь расширить определенную полосу или структуру, чаще всего верхний или нижний колонтитул.
- Они могут создать определенное настроение;
- Они делают ваши электронные письма красивыми.
Более 400 бесплатных HTML-шаблонов электронной почты для любого случая
Помимо преимуществ визуального дизайна, фоновых изображений улучшают доступность ваших электронных писем. Многие маркетологи любят сначала создавать баннеры (или другие изображения с дополнительной информацией) в фоторедакторе, а затем добавлять их в электронные письма как готовое изображение.
Но люди с нарушениями зрения, которые используют специальные считыватели для чтения вашей электронной почты, не смогут получить доступ к этой информации. Такие гаджеты могут конвертировать только текст, поэтому их ридер будет сканировать и читать только замещающий текст изображения (который многие не добавляют). Другая, возможно, важная информация будет упущена.
В качестве примера рассмотрим баннер праздничной кампании REI:
Они добавили в структуру фоновое изображение, на котором уже размещена половина текста: Скидка до 40%.
Устройте уютную жизнь в помещении . CTA и текст, который я выделил, были наложены поверх фонового изображения. Читатель может просматривать только эти фрагменты текста. Если бы у фонового изображения не было альта (который был, и который был именно Скидка до 40%. Уютная жизнь в доме ), люди знали бы только о факте распродажи и сроке ее действия, но не не знаю точную сумму продажи (40%).
То же самое относится к случаям, когда почтовые клиенты не могут правильно загрузить изображения. В настоящее время ошибки с отображением изображения случаются редко, так как большинство клиентов имеют продвинутые алгоритмы рендеринга. Тем не менее, если ваши изображения электронной почты не отображаются должным образом, они не должны содержать важную информацию, которую получатель может пропустить.
Еще одна причина добавлять элементы поверх фонового изображения, а не вставлять уже отредактированное 
Следующие два письма содержат промокоды, размещенные поверх фоновых изображений. Однако у первого код встроен в изображение, поэтому вы не можете скопировать его в один клик.
Его нужно запомнить и набрать вручную на сайте при оформлении заказа. И хотя может показаться легким запомнить такое короткое слово, как КРАСОТА , сама стратегия неудобна для пользователя и не способствует удобству и приятному опыту. Кроме того, многие коды выглядят как GHTY-783-nmYU678OID , и я уверен, что мало кто будет помнить его, независимо от того, насколько большие продажи вы предлагаете.
Во втором письме промокод добавляется в виде текста поверх изображения. Таким образом, вы можете легко выделять, копировать и вводить его там, где это необходимо, за секунду, как на настольном компьютере, так и на мобильном устройстве. И хотя он длиннее первого кода, у него больше шансов быть использованным.
Последнее сообщение
Как правильно добавить фоновое изображение в электронное письмо в формате HTML
- Оптимизируйте размер файла.
Вес изображений не влияет на размер письма. Однако это может повлиять на скорость его загрузки или исказить его отображение на разных гаджетах. В нашем редакторе вы можете загружать изображения размером до 2 МБ, но я бы рекомендовал придерживаться размера 1 МБ.
Что касается размера изображения, то он будет зависеть от элемента, к которому вы добавляете фоновое изображение. Тем не менее, я могу дать вам несколько общих рекомендаций для начала:
Около 1200 пикселей – на всю раскладку или полосу;
580-600 пикселей – для полноразмерной структуры;
250-300 пикселей – для контейнеров в 2-сеточной структуре;
160-200 пикселей – для контейнеров в 3-сеточной структуре.
- Добавить альт.
По причинам, упомянутым выше, добавьте замещающий текст к каждому фоновому изображению. Если он отображается не так, как предполагалось, альтернатива даст людям представление о том, что там должно быть.
Не пишите слишком длинных и сложных описаний. Alt должен быть короткой четкой фразой с важной информацией. Для альта, применяемого ко всему макету, используйте сообщение всей кампании, например, Скидка 50% на зимнюю коллекцию, бесплатный вебинар 15 декабря, новые выкройки свитера из альпаки . Альтернативные варианты, используемые для фоновых изображений структуры или контейнера, должны быть более описательными, например, белая толстовка с логотипом бойфренда, колонки для вебинара, кардиган с пуговицами спереди .
Избегайте слишком общих фраз с оценочными описаниями, которые часто бывают субъективными. Фоновое изображение с удивительным подарком для вашей семьи alt ничего не расскажет о том, что изображено на изображении, потому что у каждого свое представление о том, что такое удивительный подарок. Подарочный набор на основе оливкового масла был бы более информативным вариантом.
- Установить альтернативный цвет фона.
Если почтовому клиенту не удается отобразить изображение, цветной фон будет работать как запасной вариант. Выберите цвет, наиболее близкий к исходному изображению, и замените его с минимальной потерей визуального эффекта.
Более того, фоновые изображения для всего макета и полосы не отображаются на мобильных устройствах, поэтому альтернативный цвет фона электронной почты поможет вашей мобильной аудитории наверстать упущенное.
- При применении ко всему макету добавьте одно фоновое изображение.
Он должен иметь достаточный размер, чтобы покрыть всю длину макета. Если вы используете фоновые изображения в циклическом формате, убедитесь, что границы бесшовные.
- Не используйте слишком много изображений в одном шаблоне.
Фоновое изображение должно завершать общую концепцию, а не превращать ваши электронные письма в раскраски. Слишком много изображений разных типов и узоров создают визуальный диссонанс и делают ваш шаблон неряшливым.
Если вы используете разные фоновые изображения для нескольких структур, рассмотрите возможность вставки разделителя, чтобы провести визуальную границу между блоками.
- Используйте прозрачный фон для блоков сверху.
CTA, текст или любой другой блок поверх фонового изображения должен иметь прозрачный фон, если вы специально не сделали его цветным. В противном случае ваше электронное письмо будет выглядеть непрофессионально.
Также убедитесь, что текст, который вы накладываете выше, хорошо виден и читаем. Это особенно применимо для контейнеров с фоновыми изображениями электронной почты.
- Оптимизация для темного режима.
Темный режим — функция, позволяющая сменить фон интерфейса со светлого на темный. Он не инвертирует цвета шрифтов, изображений и другого контента, а изменяет их от темных к светлым для лучшей контрастности и видимости. Он доступен как для настольных компьютеров, так и для мобильных устройств, но большинство людей используют его в основном с гаджетами.
Темный режим не изменяет само фоновое изображение, но может изменить его фон. Да, у фонового изображения тоже есть фон. А если оно прозрачное (а изображение не полностью его закрывает), внешний вид электронного письма будет различаться в зависимости от того, как его просматривают.
Так выглядит одно электронное письмо при открытии на мобильном телефоне в обычном и темном режимах по умолчанию. Разница не критична для содержания этого конкретного письма. Тем не менее, это может быть так в зависимости от вашего дизайна, поэтому имейте это в виду.
- Сделайте ваши изображения адаптивными.
Оперативность — это функциональность, которая оптимизирует вашу электронную почту для мобильных устройств. Что касается изображений, отзывчивость позволяет подогнать их под ширину экрана. На изображении ниже вы можете увидеть, как адаптивные и неотзывчивые электронные письма выглядят на мобильных устройствах.
В нашей платформе адаптивность включена по умолчанию и применяется ко всем фоновым изображениям в шаблонах электронной почты (при необходимости ее можно отключить).
Однако, если вы пользуетесь другими сервисами, убедитесь, что вы соблюдаете скорость отклика, чтобы ваши изображения и электронные письма в целом выглядели должным образом на любом устройстве.
Все инструменты для автоматизации маркетинга на одной платформе
Лучшие фоновые рисунки для писем
А теперь давайте перейдем к более динамичной части, где представлены отличные примеры использования фоновых изображений в электронных письмах. Всегда интересно наблюдать, как бренды проявляют творческий подход и используют одну и ту же стратегию нестандартными способами.
National Geographic всегда использует полнополосные фоновые изображения для баннеров своей серии The Compass. Имея такую большую галерею уникальных фотографий на выбор, они определенно могут извлечь максимальную пользу из этой стратегии.
Фоновое изображение всегда является хорошей идеей для создания баннера, что доказано YETI и многими другими.
В одном письме Moment объединяет тенденции дизайна 2020 года: автономный макет, пользовательский контент, приглушенные цвета.
Rifle Paper Co. добавляет фоновое изображение с тем же цветочным узором, что и их новый чехол для телефона. Это делает всю кампанию элегантной и изящной.
Простой, но милый пример от Allbirds. Успокаивающее фоновое изображение не только привлекает внимание, но и добавляет праздничной атмосферы этой новогодней кампании.
Сотрудники Gap знают, что если вы используете разные фоновые изображения для структур, лучше разделить их разделителем или дополнительной пустой структурой.
Эффект перекрытия от Frank Body выглядит мило и вызывает ностальгию по компьютерным интерфейсам, которые были у нас в старые времена.
Еще одно совпадение от Outdoor Voices. Помимо автономного дизайна, фоновые изображения помогают отдать должное каждому созданному пользователем изображению, которое вы используете в своих кампаниях.
Nordstrom использует цветочное фоновое изображение для контейнеров и создает индивидуальный дизайн из, казалось бы, простого макета.
Дизайнеры Ben Sherman часто делают одно изображение с одной целью в качестве определяющего элемента кампании.
Креативный способ добавить блок часто задаваемых вопросов в электронное письмо от Pasta Evangelists.
Редкий пример Филсона того, как объединить несколько разных тем для фона электронной почты в одном электронном письме.
Как видите, фоновые изображения для электронного маркетинга дают неограниченные возможности для творчества. И создавать их в нашем редакторе перетаскивания очень просто, так как вам не нужно иметь дело с кодом. Просто загрузите необходимые изображения в систему, добавьте их туда, где вы хотите, в своем электронном письме и отредактируйте по мере необходимости. Таким образом, вы сэкономите свое время, создадите красивые кампании и сделаете их более удобными для пользователей.
Как с помощью HTML/CSS добавить фоновое изображение в сообщение электронной почты?
Задавать вопрос
спросил
Изменено 6 лет, 8 месяцев назад
Просмотрено 5к раз
Я пытался заставить фоновые изображения работать в HTML-коде электронной почты, но безуспешно.
Я использую Outlook 2007 для проверки своего HTML-кода.
Мой метод:
- Создать мой файл .htm
- Сохраните его в %appdata%\Microsoft\Signatures
- Создайте новое электронное письмо и установите этот HTM-файл в качестве моей подписи
До сих пор все мои попытки добавить фоновое изображение не увенчались успехом, и я начинаю думать, что это невозможно. Есть идеи?
- электронная почта
- изображения
- html
- css
- подпись электронной почты
Вот интересный URL-адрес, который должен помочь вам понять, какие функции HTML поддерживаются различными веб-почтами и, соответственно, настольными клиентами:
http://www.webknowhow.net/dir/HTML/CSS/0607CSSSupportineMail.html
2Полный ресурс здесь:
http://msdn.microsoft.com/en-us/library/aa338201.aspx
Надеюсь, это поможет!
Попробуйте указать встроенный css Или, насколько я знаю, чтобы использовать электронные письма в формате html, вы можете использовать таблицы и поместить свое изображение в td.