GIF-анимация в рассылках: как видео, только лучше

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

Михаил Терентьев

Основатель Mailfit & Letteros

GIF (Graphics Interchange Format) дословно переводится как «графический формат для обмена». Дело в том, что в 1987 году такая упаковка изображений без проблем читалась любыми компьютерами. 

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

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

Зачем нужны гифки в рассылках

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

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

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

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

Какие элементы письма можно анимировать

Логотип. Варианты анимации зависят от самого логотипа. Вот пример того, как «Твоя пицца» обыграла букву в названии.

Шапку или подвал письма. Как это делает Mixit — в каждом письме подчёркивает самые важные детали.

Главный баннер. Можно показать товар во всей его красе, анимировать фон или часть картинки — всё зависит от темы рассылки. 

Кнопки. Aviasales, например, привлекает к СТА дополнительное внимание небольшим бликом. Такая анимация может и не заметна сразу, но в том и фишка. Глаз улавливает какую-то активность там, где обычно статика, и это заставляет человека внимательней присмотреться к письму.

И даже текст. Как это делают Lamoda или Frank Bodу — акцентируют на конкретном предложении.

Как использовать GIF-анимацию в рассылках

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

Анонс спецпредложения, скидки, распродажи или акции. Подчеркните важность события: анимация поможет передать идею быстро и с максимальным эффектом. 

В рассылке The Body Shop видим простую анимацию текста. Зато глаз сразу за неё цепляется.

Ещё один пример — со специальным предложением от Макдоналдс. С помощью гифки здесь «подсветили» (как в прямом, так и в переносном смысле) главного героя рассылки — вишнёвый пирожок.

Кстати, это письмо одержало победу в номинации «Лучшая вёрстка и структура» в Email-Competitors Awards.

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

Продемонстрировать товар во всей красе. Однажды компания Dell таким образом показала ноутбук, и конверсия увеличилась на 103%.

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

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

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

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

А Lamoda — на блоке с подарочной картой.

Активировать чувство срочности и упущенной выгоды. Правда, таймеры и счётчики лучше не делать с помощью GIF — читателям будет не очень приятно, когда до конца акции два часа, а письмо открывается спустя неделю после её окончания. 

Поздравить. Конфетти, шарики, цветы, мерцающие огонёчки и всё, что только душе угодно можно анимировать. Так поздравительное письмо будет выглядеть более живым и радостным — под стать событию.

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

Как сделать GIF

Как правило, GIF создаются в Adobe Photoshop с помощью покадровой анимации. Однако есть и другие инструменты. Для десктопа это:

• Adobe After Effects;
• GIF Animator (для Windows); 
• GIF Brewery (для Mac);
• LiceCap;
• Screen To GIF.

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

• FreeGifMaker;
• GIFmaker;
• GIF Maker by Giphy.

Кроме того, сайтах вроде Giphy или Gifs можно найти колоссальное количество уже готовых анимаций. 

Что важно помнить

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

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

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

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

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

Анализируйте и сегментируйте свою аудиторию. Если ваша база по большому счёту состоит из пользователей Outlook, возможно, вам и не стоит тратить ресурсы на создание анимированных писем. Ведь там гифки не работают.

Стремитесь к тому, чтобы анимация дополняла контент письма и помогала решить задачу читателя, – тогда гифка будет отличным инструментом email-маркетинга.

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