Сервис Mailigen прошел проверку в Роскомнадзоре и полностью соответствует требованиям 152-ФЗ «О персональных данных»

Gif-картинки и анимация в письмах. Как создать и добавить в письмо

Гифка

GIF (Graphic Interchange Format) – широко распространенный формат, который хорошо отображается почти везде. Что ещё более важно – GIF может быть анимирован и быстрая смена нескольких кадров создаст иллюзию движения.

На заре интернета это был самый популярный способ, чтобы добавить интерактивности на сайт. Со временем его вытеснила flash- и css-анимации, но в сфере email-дизайна gif всё так же популярен, т.к никакие другие виды анимации не дают 100% гарантии отображения на всех клиентах (на самом деле gif тоже не дает такой гарантии, но практика показывает – на большинстве клиентов всё отображается корректно).

Особенности gif

У формата есть несколько особенностей, кроме поддержки анимации. Для простоты разобьем их на плюсы и минусы.

Минусы:

  • поддерживает только 256 цветов. Сочные и красивые фотографии потеряют часть своей яркости, если преобразовать их в формат gif.
  • итоговый вес анимации может быть большим. Например, если много кадров или файл большой по размеру. Для email-писем это критично, поэтому чаще всего приходится жертвовать качеством ради доставляемости.

Плюсы:

  • поддерживает прозрачный слой.
  • идеален для изображений с небольшим количеством цветов.

Как и где использовать анимацию

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

Смотрите как в магазине befree выделили блок со скидкой. Несмотря на то что там есть заголовок (который больше и ярче анимированного блока), всё равно анимация захватывает внимание на дольше:

mailservice bf

Кроме функции акцентирования внимания гифки можно использовать и в других целях:

  1. Объяснение работы сервиса (программы, приложения...) или продукта.
    В сервисе Pandora объясняют функционал с помощью анимаций, которые дополняют основной текст. Сразу всё становится проще, понятнее и нагляднее. pandora2. Развлечь:krugina_23. Имитация видео
    Хороший способ показать, что в вашей рассылке можно перейти на просмотр видео – сделать анимацию-нарезку из первых кадров видео. В Mailigen это можно сделать в настройке блока видео.

Как сделать гифку

Есть разные степени сложности гифок. Самый топ – анимирование через Adobe After Effects или Adobe Animate. Но для создания качественной гифки нужно практиковаться не один год. Попроще будет работать с Adobe Photoshop – программа может преобразовать видео в покадровую последовательность и есть возможность редактировать кадры по вашему желанию. Пример создания подобной анимации можно найти тут.

Ещё один вид анимации – синемаграфия (когда один элемент на картинке двигается, а остальные как бы застыли). И как пример – одна из рассылок Амедиатеки:

амедиатека

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

Ну и самый простой способ, который не требует определенных навыков – использование онлайн-сервисов. Например, gifmaker.me или gifius.ru. Загружаете туда последовательность кадров (фотографий), выставляете необходимую скорость и размеры и на выходе получаете анимацию.

Какие проблемы могут возникнуть

Есть почтовые клиенты, которые не поддерживают анимацию: Outlook 2007, 2010 и 2013. Вместо этого они покажут первый кадр. Поэтому следите, чтобы первый кадр у вашей гифки был информативен. Смотрите в статистике кампаний с каких почтовых клиентов читают ваши рассылки – так вы лучше поймете свою аудиторию и сделаете письма более адаптивными.

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

Всегда следите за весом гифки. Если он слишком большой, то велика вероятность, что подписчик её не увидит. Даже если спам-фильтр пропустит её, то почтовый клиент может просто вырезать её из письма. На этот случай выставляйте alt-текст и ссылку на веб-версию.

Пример рассылки, который недавно пришел мне на почту. То, как выглядит это в почтовом клиенте и то, как на самом деле задумывалось письмо. Красивую гифку почтовый клиент просто вырезал, т.к она весила 5Мб (!):

в моем почтовом ящике:

отображение в почтовом клиенте

по задумке создателей:

гиф 5 мб

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

Что в итоге?

  1. Используйте гиф-анимацию в письмах – они цепляют и удерживают внимание и помогают акцентировать на самом главном.
  2. Следите за размером изображений, учитывайте ограничения почтовых клиентов.
  3. Используйте с умом: не делайте из письма сплошное анимационное представление.
  4. Используйте alt-текст (текст, который отобразится вместо картинки) и ссылку на веб-версию письма.
Gif-картинки и анимация в письмах. Как создать и добавить в письмо