Анимированные PNG в письмах: альтернатива GIF?

Анимированные изображения — один из главных трендов в дизайне email-рассылок 2019 года. Маркетологи повсеместно стремятся добавить динамики в свои кампании, и самый популярный способ сделать это — использование анимированных GIF или встроенного видео.

Однако GIF — не единственный формат, позволяющий оживить картинку. Анимированные PNG (APNG) — это еще одна технология, которую стоит изучить.

## Почему стоит использовать APNG в письмах

Анимированный PNG — это именно то, что следует из названия: набор PNG-файлов, объединенных для создания эффекта движения. Чтобы понять, в чем преимущество APNG, нужно вспомнить особенности обычного формата PNG.

Существует два типа PNG: PNG-8 и PNG-24. Формат PNG-8 похож на GIF, так как ограничен палитрой в 256 цветов. Формат PNG-24 способен отображать миллионы цветов. В отличие от GIF, которые из-за ограниченной палитры часто выглядят некачественно, APNG позволяют использовать весь диапазон глубины цвета. Это делает изображения более четкими, особенно при работе с фотографиями. Однако за качество приходится платить: если не следить за размером файлов, APNG могут стать довольно «тяжелыми», что негативно скажется на скорости загрузки письма.

Более того, в отличие от GIF, APNG отлично работают с прозрачностью. GIF плохо справляются с прозрачным фоном, создавая грубые белые края вокруг элементов.

Зачем использовать анимацию на прозрачном фоне? Об этом далее.

## Прозрачность и анимация: пример рассылки Litmus

Для нашей октябрьской Хэллоуин-рассылки мы хотели дать читателям возможность «выключить свет», превратив яркий дизайн письма в темный и жуткий. Для усиления эффекта мы добавили анимацию: мигающие глаза, парящие призраки и стекающую слизь — но только при «выключенном свете».

Чтобы скрыть анимацию в яркой версии письма, мы сделали ее того же цвета, что и фон. Когда подписчик «выключал свет», цвета фона менялись, и наша анимация становилась видимой.

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

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

## Поддержка APNG в почтовых клиентах

Многие популярные почтовые клиенты полноценно поддерживают APNG. Исключение составляют Gmail (веб-версия и мобильные приложения), Outlook.com и Outlook на Windows — они отображают только первый кадр анимации.

**Полная поддержка APNG:**

— Apple Mail

— iOS

— Samsung Mail

— Outlook (MacOS)

— Outlook.com

— Приложение Outlook.com

— AOL

— Приложение AOL

— Yahoo

— Приложение Yahoo

**Отображается только первый кадр:**

— Gmail

— Приложение Gmail

— Outlook (Windows)

## Как создать анимированный PNG для email-рассылки

На данный момент невозможно напрямую сохранить анимацию в формате APNG из Adobe Photoshop или Adobe Animate, поэтому понадобятся сторонние инструменты. Вот как мы создали анимацию для нашей рассылки:

**1. Создайте анимацию в Adobe CC и сохраните каждый кадр как PNG**

Мы используем Adobe Animate, но так как встроенного экспорта в APNG нет, мы сохраняем каждый кадр отдельно. Выберите «Экспорт» > «Экспорт фильма» и выберите «Последовательность PNG».

В Photoshop процесс похож: «Файл» > «Экспорт» > «Рендеринг видео». Выберите «Последовательность изображений Photoshop» и формат «PNG». Для сохранения прозрачности в настройках выберите «Straight – Unmatted» в поле «Alpha Channel».

**2. Объедините PNG в APNG**

Теперь нужно собрать кадры в один файл. Пользователи Apple могут приобрести утилиту «PNG animator» в App Store. Бесплатная альтернатива — инструмент на ezgif.com.

Мы использовали онлайн-инструмент: он позволил удалить лишние кадры и задать длительность для каждого из них.

**3. Оптимизация размера файла**

Как и GIF, APNG могут быть тяжелыми. Уменьшение количества цветов и кадров поможет снизить вес. После создания мы прогнали файлы через сервис TinyPNG. Это позволило уменьшить размер с 943 КБ до 243 КБ (более 74%), сохранив прозрачность и анимацию. Всегда проверяйте результат после сжатия, чтобы убедиться, что анимация сохранилась.

Теперь вы можете добавить APNG в письмо так же, как и любое другое изображение!

## Ваше мнение о использовании APNG в рассылках?

Вы уже пробовали использовать анимированные PNG в своих письмах? Какие инструменты вы используете для их создания и оптимизации? Поделитесь своим опытом в комментариях.