Рубрика развивается при поддержке
Маркетинг
UniSender
2726

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

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

В закладки

В блоге мы уже писали, как сделать стильное письмо при помощи GIF. Специально для VC.RU мы перевели статью Litmus о GIF-анимациях в письме.

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

Капельку теории

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

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

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

В 2018 году 78% email-маркетологов хоть раз использовали GIF в письмах

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

Зачем нужны GIF

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

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

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

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

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

Недостатки GIF

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

Письмо хорошо выглядит, даже если GIF не работает

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

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

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

Как создать GIF

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

Создание GIF в Photoshop. Внизу — шкала с кадрами анимации

Анимация с помощью временной шкалы. За 2 минуты картинка превратилась в GIF

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

Десктоп:

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

Как правильно сохранить GIF

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

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

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

Как добавить GIF в письмо

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

<img src="https://pages.litmus.com/l/31032/2018-01-12/dwdq3y/31032/138380/litmus_logo_trs.png" width="134" height="50" alt="Litmus" style="display:block;border:0px;font-family:Helvetica, Arial, sans-serif;color: #ffffff;"/>

Какие почтовые клиенты поддерживают GIF

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

Классные примеры GIF в письмах

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

Благодаря искажению появляется ощущение глубины

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

Фейерверк в письме Uber

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

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

Треугольник, кружок, крестик и квадратик

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

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "UniSender", "author_type": "self", "tags": [], "comments": 0, "likes": 21, "favorites": 89, "is_advertisement": false, "subsite_label": "marketing", "id": 54512, "is_wide": false, "is_ugc": true, "date": "Thu, 27 Dec 2018 18:43:59 +0300", "is_special": false }
Какая реклама
приносит деньги?
0
{ "id": 54512, "author_id": 233728, "diff_limit": 1000, "urls": {"diff":"\/comments\/54512\/get","add":"\/comments\/54512\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/54512"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199113, "last_count_and_date": null }
Комментариев нет
Популярные
По порядку
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }