Фоновые изображения в письмах: что стоит знать для их правильной настройки

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

При этом с фонами email-шаблонов связано немало технических нюансов, касающихся разметки. Больше всего трудностей возникает с Outlook для Windows, где из-за особенностей движка не работают многие CSS-свойства.

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

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

В HTML фоны обычно задаются с помощью CSS, через свойство background-image. Подобное изображение в коде письма выглядит так:

background-image: url('background.jpg')

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

Это поведение можно изменить, используя стилевые свойства:

• background-size: отвечает за размер фонового изображения.
  
  
• background-position: задаёт положение фона внутри блока.
  
  
• background-repeat: определяет, будет ли фон повторяться.

Но если в web-верстке эти свойства, как правило, работают предсказуемо, то в email результат зависит от почтового клиента.

Чем настройка фонов в Outlook отличается от других почтовых клиентов

Для реализации фоновых CSS-свойств, которые Outlook не может корректно обработать, используется VML (Vector Markup Language) — технология Microsoft для работы с векторной графикой.

VML-разметку обычно помещают в условные комментарии. Благодаря этому Outlook получает отдельную версию блока с фоновым изображением, а остальные почтовые клиенты её игнорируют и вместо этого обрабатывают CSS-свойства.

Упрощённая VML-конструкция выглядит примерно так:

1
2
3
4
5
6
7
8
9
10
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false">
    <v:fill src="background.jpg" color="#202020" />
    <v:textbox inset="0,0,0,0">
<![endif]-->
    <!-- контент блока -->
<!--[if gte mso 9]>
    </v:textbox>
</v:rect>
<![endif]-->

Здесь v:rect создаёт область, v:fill задаёт её фон, а v:textbox позволяет разместить внутри обычный HTML-контент.

Внешне конструкция может напоминать обычный HTML-блок с фоном. Однако принципы настройки изображений в VML заметно отличаются от привычных CSS-свойств.

Масштабирование

В CSS свойство background-size: cover означает, что изображение нужно увеличить или уменьшить так, чтобы оно полностью заполнило блок. При различных пропорциях часть изображения выйдет за границы блока и будет обрезана.

Для VML ближайший аналог cover — это atleast, который задаётся через атрибут aspect:

<v:fill type="frame" aspect="atleast" src="background.jpg" />

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

Свойство background-size: contain, в свою очередь, масштабирует фоновое изображение так, чтобы оно целиком поместилось внутри блока, сохраняя исходные пропорции. Аналогом для VML здесь служит atmost:

<v:fill type="frame" aspect="atmost" src="background.jpg" />

Если нужно указать конкретный размер фонового изображения, в CSS это можно сделать точно в пикселях, например background-size: 300px 150px. В VML для этого используется параметр sizes, а сами размеры обычно задаются в pt:

<v:fill type="frame" src="background.jpg" sizes="300pt,150pt" />

Позиционирование

Положение фонового изображения в CSS задаётся свойством background-position и соответствующими параметрами, например background-position: center.

В VML для настройки положения используются два параметра: origin и position. Вместе они выполняют примерно ту же задачу, что и background-position, но работают по другому принципу, описывая две точки привязки:

• origin определяет точку внутри изображения;
  
  
• position определяет положение этой точки внутри области VML.

Для наиболее простых случаев настройка позиционирования может быть довольно прямолинейной. Например, background-position: top right можно оформить в VML так:

origin="1,0"
position="1,0"

А для центрирования изображения будут использоваться следующие значения:

origin="0.5,0.5"
position="0.5,0.5"

Однако позиционирование усложняется, если вместе с origin и position используется aspect. VML сначала масштабирует изображение с учётом aspect, а затем определяет его положение. Поэтому результат зависит от размеров исходного изображения, области VML и выбранного режима масштабирования.

Из-за этого комбинация вида:

aspect="atmost"
origin="0.5,0.5"
position="0.5,0.5"

не во всех случаях будет визуально эквивалентна CSS:

background-size: contain;
background-position: center;

Проще говоря, при работе с VML зачастую недостаточно лишь преобразовать background-size и background-position в соответствующие параметры. Сначала нужно определить размер изображения после масштабирования, а затем рассчитать его положение внутри блока.

Повторение

По умолчанию у background-repeat установлено значение repeat: если фоновое изображение меньше области, оно повторяется по горизонтали и вертикали. Запретить повторение фона можно, указав background-repeat: no-repeat.

В VML дублирование фона управляется параметром type. Для изображения, которое должно заполнить всю область как единый фон, применяется type="frame":

<v:fill type="frame" src="background.jpg" />

Соответственно, для повторяющегося изображения используется type="tile":

<v:fill type="tile" src="pattern.png" />

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

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

Что ещё учитывать при работе с фоном в письмах

Запасной цвет

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

Здесь в качестве страховки следует задать фоновый цвет:

1
2
3
4
5
6
<td
    bgcolor="#17233C"
    style="
        background-image: url('background.jpg');
    "
>

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

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

Отображение фона в тёмной теме

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

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

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

Вложенные фоны

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

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

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

То есть в сложных макетах ограничения VML влияют уже на саму структуру разметки, а не только на отдельные параметры фона.

Как Pixcraft упрощает работу с фоновыми изображениями

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

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

Логика совместимости с почтовыми клиентами обеспечивается благодаря TJML — email-фреймворку, который формирует итоговую разметку письма:

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

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

Заключение

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

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

Зарегистрируйтесь в Pixcraft и попробуйте наш конструктор писем в деле. А также не забудьте заглянуть в наш Telegram-канал: там мы делимся полезными материалами, лайфхаками и идеями для работы.