Недавно мы слышим возмущенные вопросы от фанатов email-маркетинга: «Почему моя GIF-анимация отображается в Gmail в других цветах?» Поскольку мы в Litmus не сталкивались с этой проблемой в наших GIF-ках, нам стало интересно, почему наши анимации избежали этой странности и как мы можем помочь другим избежать ее. Давайте разберемся и поделимся тем, что нам удалось выяснить.
— Почему Gmail меняет цвета ваших GIF-анимаций
— Что именно происходит с вашими GIF-ками (с примерами)
— Как исправить изменение цветов GIF в Gmail
## Почему, Gmail, почему?!
Нашим первым вопросом был очевидный: «Почему?» Простой ответ заключается в том, что у Gmail были проблемы с изображениями с тех пор, как они начали кэшировать их через прокси-сервер в 2013 году. Хотя изменение цветов могло не быть среди тех ранних проблем, некоторые из них уже были решены (например, проблема с некорректным сжатием GIF-анимаций с текстом). Однако проблему с изменением цветов, похоже, еще не исправили.
Но что именно происходит? Насколько мы можем судить, когда Gmail кэширует изображение на своих прокси-серверах, он пропускает его через компрессор, который удаляет цвета из цветовой таблицы GIF. В результате цвета некоторых GIF-анимаций искажаются. Позже в этой статье мы рассмотрим конкретные детали, но в целом именно поэтому цвета вашей GIF-ки меняются. Когда цвет удаляется, GIF заменяет его одним из оставшихся в цветовой таблице цветов, который ближе всего к оригинальному.
## Иголка в стоге сена
Одна из первых вещей, которые мы обнаружили (и, вероятно, причина, по которой проблему до сих пор не исправили), — это то, что ее довольно сложно воспроизвести. Поэтому, если вы заметили, что цвета ваших изображений меняются, считайте, что вам повезло… ну, может, и не повезло, но вы в меньшинстве.
Прекрасная Лили Уорт создала для нас несколько разных GIF-анимаций для тестирования, и ни одна из них визуально не изменила цвет. Но при более тщательном осмотре выяснилось, что Gmail удалил цвета из их цветовых таблиц во всех случаях.
С этими простыми GIF-ками:
Gmail удалил 24 и 19 цветов соответственно, в результате чего GIF-ки стали выглядеть так:
Разницу невозможно заметить. И это относится к большинству GIF-анимаций, которые создает Litmus. Мы не видим видимой разницы между оригинальной версией и версией для Gmail даже при удалении цветов, чего, вероятно, и добивается Gmail.
Однако в некоторых случаях удаленный цвет имеет решающее значение. Как видно на этих GIF-ках от Тиффани Дэвидсон из Thimble. В оригинальной GIF-анимации 127 цветов.
В версии для Gmail 125 цветов, разница всего в два цвета. Однако одним из цветов, которые удалил Gmail, был белый, из-за чего в письме GIF-ка стала отображаться с очень бледным зеленоватым фоном вместо белого:
Если бы этот цвет был небольшой частью анимации, это было бы незаметно. Но поскольку он был основным компонентом фона, в письме это очень бросается в глаза.
Еще одно место, где изменение цвета было более очевидным, — это использование градиентов. Чтобы проверить это, мы добавили градиенты к нашим первоначальным GIF-кам. Вот две GIF-анимации с плавными фоновыми градиентами:
Однако после того, как они проходят через прокси Gmail, градиенты становятся немного ступенчатыми. Если присмотреться, цвета удалены, и теперь на градиентах видны полосы.
В приведенных выше GIF-ках Gmail удалил 60 цветов в анимации с «конвейером котов», но только 6 цветов в анимации с меняющими цвет котами.
Это самый распространенный вариант потери цветов в Gmail, который мы замечали в наших письмах. В одном из недавних писем, которые мы отправили, был плавный градиент везде, кроме Gmail, как видно здесь:
Оригинальная анимация
Версия анимации в Gmail
В оригинальной версии 256 цветов, а в версии для Gmail — 131. Это целых 125 цветов, удаленных Gmail, что приводит к появлению очень заметных полос на градиентном фоне в анимации.
В большинстве описанных выше случаев уменьшение цветовой таблицы приводит к уменьшению размера файла, поэтому мы предполагаем, что Gmail пытается немного оптимизировать изображения, чтобы сделать файлы как можно меньше. Однако в случае с изображением Тиффани версия для Gmail фактически имеет больший размер файла, так что, возможно, Gmail преследует какую-то другую цель. Возможно, изменения в цветовой таблице — это просто побочный эффект сканирования изображений Gmail в целях безопасности. Как бы то ни было, мы, возможно, так никогда и не узнаем, но то, что мы *действительно* знаем, — это то, что поскольку Gmail уменьшает цветовые таблицы, мы можем попытаться решить эту проблему.
## Как вернуть вашим GIF-кам потрясающий вид
Как видите, Gmail может испортить ваши GIF-ки разными способами, поэтому есть несколько вещей, которые вы можете сделать.
Если сдвиг цвета незначительный, как в случае с GIF-ками с котами выше, можно ничего не делать. Но если изменение цвета очевидно, как в случае с GIF-кой Тиффани, вам стоит рассмотреть другие варианты:.
### Пересохраните вашу GIF-анимацию
Следующее решение — пересохранить GIF-ку с меньшим количеством цветов в цветовой таблице. Это дает вам немного больше контроля над тем, как оптимизируется изображение. Когда вы сохраняете GIF-ку с меньшей цветовой таблицей, Gmail может удалить меньше цветов. По сути, вы сами говорите Gmail, какие цвета наиболее важны для вашего изображения.
Зная, что Gmail может добавлять артефакты и удалять цвета, вы можете сохранить GIF-ку с разными цветовыми таблицами (32, 64, 128 и 256). Затем вы можете протестировать свои письма в Litmus, чтобы узнать, какая GIF-ка хорошо выглядит в Gmail без ущерба для внешнего вида в других почтовых клиентах.
В некоторых случаях вы сможете остаться довольно близко к оригиналу. Вот разные версии анимации, сохраненные с 256, 128, 64 и 32 цветами сверху вниз, как они выглядят в Gmail:
В этом случае на всех версиях видны полосы на градиенте, но версия на 128 цветов выглядит немного лучше остальных.
Но в некоторых случаях придется опуститься до 32 цветов:
В этом случае светло-зеленый фон сохраняется до тех пор, пока анимация не будет сохранена с 32 цветами.
### Режимы наложения
Этот вариант немного более технический, но если у вас нет оригинальной GIF-ки или возможности пересохранить ее, в некоторых случаях это решение сработает. Реми Пармантье обратил мое внимание на режимы наложения CSS как на способ сохранения светлого текста в приложениях Gmail, но он отметил, что это сработает и в данном случае.
Режимы наложения CSS используются для вычисления того, как цвет элемента смешивается с цветом его родительского элемента. Проще говоря, вы можете использовать режимы наложения в CSS, чтобы изменить поведение цветов. В этом случае мы используем свойство CSS mix-blend-mode и режим наложения difference. Сначала мы зададим класс и нацеленим его с помощью `u + .body`,
чтобы он срабатывал только в Gmail:
Затем мы обернем анимацию тегом span. Мы добавим цвет фона и сделаем span блочным элементом, чтобы фон находился за всей анимацией:
Цвет фона, который мы использовали здесь, — это светло-зеленый, в который Gmail превращает белый фон.
Далее мы добавляем класс. И вот тут кроется хитрость: мы добавляем класс *и* к span, и к изображению.
Когда мы добавляем класс к span, цвет фона становится разницей между светло-зеленым и белым:
Результат? Когда мы добавляем изображение сверху, этот темный цвет фона смешивается со светло-зеленым цветом изображения, возвращая его к белому:
Существует техническая формула того, как работает режим наложения, в которую Реми углубляется и приводит ссылки на другие блоги, если вы хотите провалиться в (очень интересную) кроличью нору. Но если вкратце, то:
**Белый фон – светло-зеленый фон – светло-зеленый фон = белый фон**
Что имеет гораздо больше смысла, чем если бы я пытался объяснить это с помощью цифр и уравнений.
Это решение работает только в том случае, если Gmail меняет белый цвет в вашей анимации, и ваша анимация находится на белом фоне. Если меняется другой цвет или градиент, вам придется вернуться к пересохранению изображения, но это отличный быстрый трюк, который стоит держать в запасе на случай необходимости.
## Возвращайте ваши GIF-ки в строй
Вот и все. Возможно, это не самое удовлетворительное объяснение того, почему Gmail разрушает ваши изображения, но по крайней мере вы можете стать героем email-маркетинга и предложить решения, когда в следующий раз увидите, что ваши изображения странно отображаются в Gmail. А лучший способ стать героем? Обязательно тестируйте свои письма в Litmus перед отправкой, чтобы выявить проблемы с изображениями и убедиться, что ваши письма выглядят наилучшим образом, когда попадают во входящие ваших подписчиков.
Хотите узнать больше о GIF-ках? Ознакомьтесь с нашим руководством по анимированным GIF-изображениям в email.
