Gmail начал ломать письма из-за фоновых изображений. Что делать?

Антон Чирков

технический консультант EMAILMATRIX, основатель Ampier

Недавно в Gmail появилась проблема с отображением писем. На десктопе многие рассылки превратились в кашу: частично пропали стили, отступы и закругления, некоторые изображения стали гигантскими и съехали.

Первые сообщения о баге я получил от коллег 21 июля, а в собственных ящиках увидел спустя два дня. Похоже, Google раскатывает «вредное» обновление постепенно. То есть вскоре со сломанными письмами столкнётся ещё больше пользователей.

Причина — Gmail начал вырезать атрибуты style, в которых используется url() для указания изображения. Ниже расскажу, что именно изменилось и как адаптировать емейл-вёрстку к обновлению, чтобы с письмами ничего не случилось.

Причина

Gmail и раньше вырезал из писем атрибуты и теги style целиком, если находил в них ошибку. И теперь почтовику перестал нравиться url(), который используется для указания адреса фонового изображения у стилевых свойств background и background-image.

Результат выглядит, например, так:

Отображение письма в Gmail на десктопе

Корректное отображение письма

Решение

На самом деле решить эту проблему не так сложно. Нужно прописать фоновое изображение через атрибут background (для ячейки td). Для этого:

Исправляем отображение писем в тёмной теме Gmail на iOS

1. Стандартно прописываем всё инлайново в атрибуте style.
2. Добавляем атрибут background.
3. Добавляем класс — допустим, mybackground.
4. Описываем для класса позиционирование background-position, background-size и так далее.

<style>
.mybackground{
background-position: right top !important;
background-size: cover !important;
}
</style>

….
<td class=”mybackground” style=”background-image: url(https://site.ru/mail/bg.png);background-position: right top;background-size: cover;” background=”https://site.ru/mail/bg.png”>
…
</td>
….

Этим способом вы полностью восстановите отображение писем в обновлённом Gmail.

Детали

Добавлю, что баг вообще не затронет письма, вёрстка которых учитывает особенности отображения в «Рамблер/почте». Этот сервис и раньше игнорировал стилевое свойство background и background-image.

Ещё такое поведение почтовиков изначально предусмотрено во фреймворке Ampier. Мы используем его в большинстве проектов, поэтому у клиентов EMAILMATRIX проблема с Gmail почти не проявлялась.

Только в одной рассылке съехали кнопки, сделанные кодом с фоновой картинкой. Их мы переделали в контентные изображения: для отдельной ситуации с конкретными элементами письма оптимальным оказалось это решение. Но в целом для сохранения корректных фоновых изображений лучше использовать атрибут background.

Как сверстать письмо, которое затянет и восхитит подписчиков. «Глубокий» кейс EMAILMATRIX

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