Анимированные PNG в электронной почте: альтернатива GIF?

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

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

Причины использовать APNG в электронной почте

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

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

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

Вы спросите, зачем вам использовать анимацию на прозрачном фоне?

Прозрачность и анимация в электронной почте: APNG в октябрьском информационном бюллетене Litmus

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

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

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

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

Поддержка почтового клиента для APNG

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

Анимированные PNG полностью поддерживаются в:

• Apple Mail
• iOS
• Почта Samsung
• Outlook (MacOS)
• Outlook.com
• Приложение Outlook.com
• AOL
• Приложение AOL
• Yahoo
• Приложение Yahoo

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

• Gmail
• Приложение Gmail
• Outlook (Windows)

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

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

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

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

Процесс в Photoshop очень похож. Перейдите в File> Export> Render Video . На панели « Визуализация видео» выберите «Последовательность изображений Photoshop» в раскрывающемся списке и выберите PNG в качестве формата. Вам нужно сделать еще один шаг, чтобы убедиться, что ваши png-файлы прозрачны: в поле « Параметры рендеринга» выберите «Прямой - без матирования» в раскрывающемся списке «Альфа-канал» . После того, как вы выбрали место для сохранения изображений, нажмите кнопку « Рендеринг» .

2. Объедините свои отдельные PNG в APNG.

Пришло время собрать ваши отдельные файлы изображений в APNG!

Аниматор PNG - отличное программное обеспечение, которое вы можете приобрести за небольшую плату в Apple App Store, если вы пользователь ОС. Бесплатная альтернатива - средство создания анимированных PNG от ezgif.com, которое предлагает аналогичные функции.

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

3. Оптимизация размера файла APNG для использования в электронных письмах.

Как и GIF-файлы, APNG-файлы могут быстро стать довольно значительными. Уменьшение количества цветов и количества используемых кадров поможет уменьшить размер файлов. Стандартное сжатие zlib казалось единственным вариантом, который работал с нашими файлами, и как только мы нажали кнопку Make APNG! кнопку, мы могли бы увидеть пример нашей анимации и ее размер перед загрузкой. Это отличный шанс внести дополнительные изменения - например, изменить скорость или удалить еще несколько кадров - перед загрузкой.

Перед тем, как загрузить наши файлы изображений для использования в нашей электронной почте, мы смогли немного сжать их. Мы просто запускали наши APNG через TinyPNG , который уменьшает размеры файлов, удаляя метаданные и уменьшая цвета, при этом сохраняя прозрачность и анимацию. Это имело огромное значение, уменьшив общий размер файла изображения с 943 КБ до 243 КБ, сэкономив более 74% в размере файла! Однако не каждый инструмент сжатия PNG сохраняет анимацию, поэтому не забудьте дважды проверить свою работу после обработки изображений.

Вот и все! Теперь вы готовы добавить APNG в свою электронную почту, как если бы вы работали с любым другим типом изображения. Если вы хотите увидеть нашу полную рассылку в действии, вы можете просмотреть ее здесь или проверить код в Litmus Builder .

Что вы думаете об использовании APNG в электронной почте?

Вы когда-нибудь использовали анимированные PNG в своих кампаниях по электронной почте? Какие инструменты вы используете для их создания и сохранения небольшого размера файла? Мы будем рады узнать о вашем опыте. Поделитесь своими знаниями в комментариях ниже.