Руководство по анимированным GIF-файлам в электронной почте

Опубликовано: 2021-02-24

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

Добавление анимации может быть как раз тем, что вам нужно для увеличения взаимодействия с подписчиками. Маркетологи по электронной почте, такие как вы, все чаще обращаются к анимированным GIF-файлам в электронной почте, чтобы обеспечить дополнительный интерес. Согласно нашим данным о состоянии электронной почты за 2020 год, 51,28% маркетологов заявили, что они хотя бы иногда используют анимированные GIF-файлы в своих маркетинговых письмах.

Итак, как вы можете принять участие в этой акции? В этом сообщении блога мы рассмотрим:

Что такое гифка
Преимущества (с вдохновляющими примерами)
Недостатки анимированных GIF-файлов
Как сделать анимированные GIF-файлы
Поддержка почтового клиента и время загрузки

Что такое гифка?

GIF, который расшифровывается как Graphics Interchange Format, представляет собой формат изображений, разработанный CompuServe в 1987 году. Благодаря широкой поддержке браузерами и почтовыми клиентами, GIF-файлы были популярным форматом изображений с первых дней существования Интернета.

Что еще более важно, GIF-файлы можно анимировать. Подобно тому, как работает флипбук, GIF-файлы быстро отображают серию изображений, создавая иллюзию движения. В первые годы Интернета GIF-файлы (а также теги marquee и blink) были основным методом добавления движения на веб-страницу.

С 1990-х годов многое изменилось. Анимированные GIF-файлы переживают период возрождения как в Интернете, так и в электронном маркетинге. Хотя до сих пор ведутся споры о том, как на самом деле произносится «GIF», большинство согласятся, что GIF-файлы могут быть отличным маркетинговым инструментом.

Преимущества анимированных GIF-файлов в электронной почте

Если вы предпочитаете жесткую букву «G» или хотите рифмовать GIF с определенной маркой арахисового масла, давайте посмотрим, почему GIF-файлы так полезны в электронных письмах.

Привлекайте внимание подписчиков

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

Google использует милые гифки, чтобы отметить своих подписчиков.

Google гифка — Источник: действительно хорошие электронные письма

Grammarly использует тонкую анимацию, чтобы привлечь еще больше внимания к своему предложению.

Грамматика гифка — Источник: действительно хорошие электронные письма

Xfinity помещает свой GIF ниже в электронном письме, чтобы привлечь подписчиков и побудить их прокручивать.

Xfinity гифка — Источник: действительно хорошие электронные письма

Мы использовали искусственный видео GIF, чтобы привлечь внимание к нашему видео и заинтересовать подписчиков, нажав на которые, чтобы увидеть больше.

Лакмус Праздник — Посмотреть полное письмо в действии

Продемонстрируйте свои продукты и услуги

Вы знаете, что ваш продукт великолепен. Убедитесь, что ваши подписчики тоже это знают. Нет ничего лучше анимированного GIF, чтобы продемонстрировать, как работает ваш продукт или услуга.

ILIA Beauty демонстрирует свой продукт в действии с реальными людьми.

Илья гифка — Источник: действительно хорошие электронные письма

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

Webflow гифка — Источник: действительно хорошие электронные письма

Magic Spoon демонстрирует свои разные вкусы и потрясающий дизайн упаковки.

Волшебная ложка гифка — Источник: действительно хорошие электронные письма

Упростите сложную идею

Если картинка стоит тысячи слов, то анимированная картинка, вероятно, стоит даже больше. Используйте анимированный GIF, чтобы проиллюстрировать сложную идею или показать подписчикам, что все даже проще, чем они думают.

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

Баггу гифка — Источник: действительно хорошие электронные письма

Обрести спокойствие - это просто. Но за последний год мы все осознали, насколько это может быть сложно. Headspace показывает, как обрести спокойствие с помощью GIF-изображения лучше, чем кто-либо может объяснить словами.

Космос гифка — Источник: действительно хорошие электронные письма

Подразнить что-то новое или скоро

У вас есть новый контент или продукт, который вы собираетесь выпустить? Скоро появится отличное предложение? Используйте анимированный GIF, чтобы привлечь внимание к вашему продукту и привлечь внимание подписчиков к вашему следующему письму.

Apple дразнит расширенную распродажу в Черную пятницу и призывает подписчиков «сохранить даты» для покупок, чтобы не упустить выгодные предложения.

Яблоко черная пятница электронное письмо GIF — Источник: действительно хорошие электронные письма

Электрический байк Линуса упоминается в этом письме в тени. Подписчики должны будут перейти по ссылке, чтобы увидеть реальный продукт.

Электронная почта Linus Electric с анимированным GIF — Источник: действительно хорошие электронные письма

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

Электронная почта Тинкер GIF — Источник: действительно хорошие электронные письма

Недостатки анимированных GIF-файлов

Какими бы прекрасными ни были анимированные GIF-файлы, они не лишены недостатков.

Отсутствие доступности

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

Частота мигания контента от 2 до 55 Гц может нанести вред пользователям, страдающим светочувствительной эпилепсией. Кроме того, пользователи с ослабленным зрением могут испытывать трудности при чтении или просмотре содержимого в формате GIF до изменения анимации. Итак, убедитесь, что ваши анимированные GIF-файлы имеют плавные переходы или не переходят от одного кадра к другому с высокой скоростью.

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

Полное руководство по доступности электронной почты от Litmus

Создавайте доступные и инклюзивные электронные письма для всех своих подписчиков

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

Узнайте как →

Плохая прозрачность фона

Если вам нужно добавить больше цвета или немного прозрачности фона к вашему анимированному контенту, то анимированный GIF может не подойти.

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

А если вы ищете еще одну альтернативу анимированным GIF-файлам, возможно, вам стоит изучить CSS-анимацию.

Как сделать анимированный GIF для электронной почты

Создать GIF можно несколькими способами. Вы можете использовать онлайн-конструкторы, которые позволяют анимировать выборку фотографий или превращать видео в анимированный GIF. Или вы можете использовать программное обеспечение, такое как Adobe Photoshop или Adobe Animate, для перемещения нестандартных дизайнов.

Я предпочитаю создавать анимированные GIF-файлы в Adobe Animate. Это результат многих лет работы с Flash в свое время. Когда Flash вышел на пенсию, его взяла на себя Adobe Animate, сохранив некоторые функции Flash, но добавив больше параметров вывода, таких как HTML5, видео и анимированный GIF.

Итак, я расскажу, как создать анимированный GIF в Adobe Animate.

Создание с Adobe Animate

Шаг 1. Создайте новый файл и введите размеры

Чтобы создать GIF в Adobe Animate, сначала создайте новый файл и введите желаемые размеры. Совет от профессионала: создавайте анимацию в два раза больше для отображения сетчатки, как и для статических изображений.

Шаг 2. Импортируйте графику для анимации

Вы можете создавать свою анимацию прямо на холсте, используя инструменты формы и рисования программного обеспечения, создавая слой для каждого элемента. Если вы создали дизайн для своей анимации в Adobe Illustrator, вы можете просто скопировать и вставить векторную графику на холст. В противном случае вы можете импортировать графику в Adobe Animate, выбрав файл> импорт> импорт в рабочую область. Или, если вы импортируете графику, которая будет использоваться многократно, вы можете «импортировать в библиотеку».

Шаг 3. Создайте свою анимацию

Теперь вы можете использовать шкалу времени для создания своей анимации. С подобным программным обеспечением есть много возможностей, и было бы сложно затронуть все из них в одном сообщении в блоге. Тем не менее, существует множество ресурсов со множеством полезных руководств на YouTube, в онлайн-руководствах Adobe и в самом программном обеспечении.

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

Символы

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

Создав символ, вы можете повторно использовать его в своей анимации - это называется экземпляром. Если бы вы отредактировали свой символ, например изменили цвет, это изменение было бы внесено во все экземпляры (аналогично частичным сообщениям электронной почты). Но если бы вы отредактировали экземпляр, ваше изменение применилось бы только к этому одному экземпляру.

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

Анимация

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

Анимацию формы можно использовать только с фигурами или элементами, которые вы нарисовали либо на холсте, либо с векторами, импортированными с использованием настроек импортера AI (а не как растровое изображение). Это связано с тем, что анимация формы позволяет изменять форму объекта. Например: вы можете добавить круг к одному ключевому кадру на временной шкале, добавить квадрат на другой, а затем преобразовать свой круг в квадрат с помощью анимации формы.

Пример анимации анимации GIF

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

Классическая анимация очень похожа на анимацию движения. Он был перенесен из Flash и остается в Animate в качестве дополнительной опции. Это мой предпочтительный способ применения анимации движения, так как методы ослабления (обсуждаемые ниже) применять немного проще.

Простота

Ослабление идет рука об руку с анимацией. Если перемещение объекта из одного положения в другое с использованием временной шкалы - это торт, то замедление - это глазурь!

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

анимированный gif пример простоты применения к анимации движения

Замедление, примененное к этой анимации движения, быстро запускает анимацию и замедляется в конце.

анимированный gif пример легкости применения к tween с bounce-in

Здесь я применил к моему подростку легкость отскока.

Для получения информации о том, как применить ослабление, посмотрите это видео на YouTube.

Шаг 4. Экспортируйте анимированный GIF

Сохранить анимацию из Adobe Animate в формате GIF очень просто. Просто зайдите в Файл> Экспорт> Экспорт анимированного GIF.

Уменьшение размера файла

Независимо от того, как вы создаете анимированный GIF - с помощью Adobe Animate или чего-то еще - уменьшение размера файла имеет решающее значение для электронной почты. Есть несколько вещей, которые стоит учесть, чтобы сделать вашу анимацию максимально легкой.

Сжатие

Такие инструменты, как Animate и Photoshop, имеют ограниченные возможности сжатия GIF-файлов; часто для сжатия лучше использовать внешнее программное обеспечение. Я рекомендую ImageOptim, который можно бесплатно загрузить, или EZgif, бесплатный онлайн-инструмент для оптимизации GIF, чтобы уменьшить размер файла до оптимального веса. Лично я предпочитаю, чтобы мой размер не превышал 1 мегабайт (МБ), но оптимальный размер файла будет варьироваться и зависит от времени загрузки электронной почты, которое мы обсудим позже в этом сообщении в блоге.

Плоский цвет

Включение фотографии или градиентов в вашу анимацию добавляет веса из-за количества содержащихся в них цветов и оттенков. GIF может содержать только 256 цветов - по сравнению с JPEG, который может содержать более 16 миллионов, - что часто приводит к ухудшению качества. Поэтому главное - сохранять простоту.

Ограниченные рамки

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

Если вы обнаружите, что ваш GIF-файл после сохранения и сжатия стал слишком тяжелым, вы можете удалить кадры с помощью Photoshop или EZgif.

Проверка вашего анимированного GIF

Теперь, когда вы завершили свой GIF, вы можете получить отзыв или одобрение, прежде чем размещать его в своем электронном письме. С помощью инструмента для совместной работы в режиме реального времени, такого как Litmus Proof, вы можете централизовать комментарии и утверждения всех пользователей.

Доказательство гифка — *Дружественный хедз-ап: этот доступен только в тарифных планах Litmus Enterprise.*

Реализация анимированных GIF-файлов в электронной почте

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

<img src="http://yourwebsite.com/path/to/awesome.gif" width="100" height="100" alt="Description of your gif”>

Однако есть несколько уникальных вещей, которые вам нужно учитывать: какие почтовые клиенты поддерживают анимированные GIF-файлы и сколько времени они загружают в ваше письмо.

Служба поддержки

Анимированные GIF-файлы поддерживаются практически везде. Outlook недавно обновил поддержку анимированных GIF-файлов, но это касается только Office365. Outlook 2007-2019 по-прежнему не поддерживает анимированные GIF-файлы.

Вот краткая таблица того, какие почтовые клиенты поддерживают и не поддерживают анимированные GIF-файлы:

Настольные клиенты	Клиенты электронной почты	Мобильные клиенты
Прогноз на 2000-2003 гг. ✓	Gmail ✓	Почта iOS ✓
Outlook 2007-2019 ✘	G Suite ✓	Gmail ✓
Outlook для Mac ✓	Yahoo! Почта ✓	Gmail IMAP ✓
Apple Mail ✓	AOL ✓	Почта Samsung ✓
Почта Windows 10 ✓	Outlook.com ✓	Прогноз ✓
Office365 ✓	Office365 ✓	Yahoo ✓
	Comcast ✓	AOL ✓
	Orange.fr ✓
	SFR.fr ✓
	GMX.de ✓
	Web.de ✓
	T-Online.de ✓
	Freenet.de ✓
	Mail.ru ✓

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

Вы также можете предоставить запасной вариант для Outlook, скрыв обычное изображение в формате GIF и отображая статическое изображение и / или различное содержимое внутри условий Outlook:

<!--Animated Version for everywhere else-->
<!--[if (gte mso 9)|(IE)]><!-->
<img src="YourAnimatedFile.gif" style="display: block; padding:0; margin:0; height: auto; max-width: 100%;" border="0" alt="" width="538" height="269" />
<!--<![endif]-->

<!--Static Version for Outlook-->

<!--[if (gte mso 9)|(IE)]>
<img src="StaticVersion.gif" style="display: block; padding:0; margin:0; height: auto; max-width: 100%;" border="0" alt="" width="538" height="269" />
<![endif]-->

Время загрузки

Ранее мы обсуждали размеры файлов. Во время загрузки очень важен размер файла.

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

Мы протестировали файлы разных размеров, чтобы определить их среднюю скорость загрузки при разных подключениях. В среднем анимированный GIF размером 4,4 МБ может загружаться в два раза дольше через соединение 4G LTE, чем через соединение Ethernet.

Вот некоторые средние скорости для файлов разных размеров при разных подключениях, основанные на нашем собственном эксперименте:

Средняя скорость загрузки контента (в секундах)

Размер файла	4G LTE	Вай фай	Ethernet
180 КБ GIF	0,37	0,29	0,22
1 МБ GIF	1,18	0,54	0,44
3,2 МБ GIF	2,87	1,44	1.04
4,4 МБ GIF	3,23	1,83	1,34

Это время является скоростью загрузки контента и не учитывает время до первого байта (TTFB). TTFB - это способ измерения скорости отклика веб-сервера. Поэтому, если вы размещаете свои изображения на сервере, который медленно реагирует, время загрузки анимированных GIF-файлов для ваших подписчиков увеличится.

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

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

Последние мысли

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

Нам не терпится увидеть, что вы создаете!

Это сообщение в блоге было первоначально опубликовано 9 января 2020 года Джейсоном Родригесом. Он был обновлен для ясности и новой информации 23 февраля 2021 года.