Полное руководство по GIF-анимации в email-рассылке

Рассказывает Света Егорова из UniSender.

В статье много всего, так что вот меню для удобства:

• Капельку теории
• Зачем нужны GIF
• Недостатки GIF
• Как создать
• Как сохранить
• Как добавить в письмо
• Какие почтовые клиенты поддерживают GIF
• Классные примеры GIF в письмах

GIF (Graphics Interchange Format) разработали CompuServe в 1987 году. С появлением интернета популярность GIF возросла: их можно было использовать в почтовых клиентах и на сайтах.

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

Сейчас гифки снова популярны: их часто используют при разработке сайтов и в интернет-маркетинге. В 2018 году 78% email-маркетологов заявили, что хотя бы раз вставляли анимации в письма.

Разбираемся, в чем польза и недостатки GIF-анимаций.

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

Магазин женской одежды Ann Taylor LOFT вставили в письмо GIF с подарком. Так они заинтриговали подписчиков — хотелось кликнуть на коробку и развернуть её:

Часто даже небольшое движение в письме удивляет читателей, разжигает интерес и побуждает к переходу на сайт. Litmus использовали этот эффект, чтобы анонсировать инфографику по email-маркетингу за 2018 год. Письмо и его HTML-код можно посмотреть на сайте Litmus.

Показать процесс. Sprout Social с помощью GIF показали возможности своего обновлённого приложения.

Создать привлекательный дизайн. Например, Code School использовали GIF, чтобы показать все возможности Google Drive.

Не везде отображается. Не все почтовые клиенты поддерживают формат GIF. Например, Outlook 2007, 2010 и 2013 вместо анимации покажут только её первый кадр. Email-дизайнеры стараются помещать на первый кадр важную информацию, которая может заменить GIF.

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

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

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

Программ для создания GIF очень много. Большинство дизайнеров делают анимацию в Adobe Photoshop. В этой программе можно создать покадровую смену картинок, работать с временной шкалой и импортировать видео.

Кроме Photoshop есть и другие программы, чтобы создать GIF.

Десктоп:

• Adobe After Effects.
• Instagiffer.
• GIF Animator (Только Windows).
• GIF Brewery (Только Mac OS).

Онлайн-сервисы:

• MakeAGIF.
• imgflip.
• GIFMaker.me.

Чтобы оптимизировать GIF для писем, нам нужен минимальный размер анимации. Как можно уменьшить объем файла на примере Photoshop:

1. Обрезать. Уменьшите видимую часть изображения, оставьте только самое нужное.
2. Удалить кадры. Нужно не так уж много кадров, чтобы человек увидел движение. Даже если вы удалите некоторые из них, иллюзия движения сохранится.
3. Изолировать анимацию. Используйте слои, чтобы изолировать часть изображения с анимацией и менять только её.
4. Уменьшить количество цветов. В Photoshop такую функцию можно найти в разделе «Сохранить для web».

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

Вставить GIF в электронное письмо можно так же, как и изображение любого другого формата. Используйте для этого тег <img>:

Большинство почтовых клиентов, поддерживают GIF. Но есть исключения – Microsoft Outlook 2007, 2010 и 2013 не анимируют GIF, а показывают только первый кадр.

В этом письме от Moo GIF создает ощущение глубины в email. Весит такая анимация всего 130 кб.

Анимация в письме Uber добавляет лишь мелкие детали, но это сразу привлекает внимание:

Photojojo с помощью GIF знакомит подписчиков с новыми продуктами:

Под новогодние праздники PlayStation прислали письмо-поздравление с анимацией. Круто, что значки под «Happy Holidays» стилизованы под кнопки на джойстике:

В каждом дайджесте Нетологии приходит GIF, которая раскрывает тему письма:

Еще больше примеров — в нашей статье про GIF в письмах. Там мы делимся крутыми анимациями в email и рассказываем, как добавить GIF с помощью инструментов UniSender.