Создание и оптимизация анимированных GIF-файлов для электронной почты (обновлено)

  1. Что такое анимированный GIF?
  2. Как вы создаете анимированный GIF?
  3. Покадровая анимация
  4. Импорт видеокадров
  5. Хронология анимации
  6. Альтернативы Adobe Photoshop
  7. Оптимизация вашего анимированного GIF
  8. 1. Только оживите то, что вам нужно, чтобы оживить
  9. 2. Держите это маленьким
  10. 3. Держите это коротким
  11. 4. Не используйте каждый цвет под солнцем
  12. Сохранение вашего GIF
  13. Насколько большой слишком большой?
  14. Совместимость с анимированным GIF
  15. Соображения с анимированными гифками

Статья впервые опубликована в мае 2016 года, обновлена ​​в январе 2019 года

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

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

Что такое анимированный GIF?

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

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

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

Посмотрите, как Monica Vinader использует GIF в своей электронной почте для демонстрации своих продуктов:

Посмотрите, как Monica Vinader использует GIF в своей электронной почте для демонстрации своих продуктов:

Как вы создаете анимированный GIF?

Вы можете создать анимированный GIF, используя различные типы программного обеспечения. Здесь мы поговорим о том, о чем вы, скорее всего, знаете и уже привыкли: Adobe Photoshop.

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

Покадровая анимация

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

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

В разделе «Окно» на панели инструментов выберите окно «Временная шкала».

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

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

Импорт видеокадров

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

Просто зайдите в File > Import > Video Frames to Layers

Затем вы сможете выбрать, какую часть своего видео вы хотите превратить в GIF. Мы рекомендуем вам ограничить ваш импорт каждые 3 кадра и выбрать сцену или клип из видео, которое вы импортируете. Затем выберите опцию «Сделать рамочную анимацию».

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

Хронология анимации

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

Альтернативы Adobe Photoshop

Если у вас нет Adobe Photoshop, есть другие альтернативы созданию собственных анимированных GIF-файлов для ваших кампаний:

1. GIF аниматор - Windows
2. Instagiffer - Mac & Windows
3. GIF Пивоварня - Mac

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

Оптимизация вашего анимированного GIF

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

1. Только оживите то, что вам нужно, чтобы оживить

Чем больше движущихся частей в вашем изображении, тем больше будет размер файла изображения, когда вы в конечном итоге сохраните его для своей электронной почты. Если вы используете Adobe Photoshop, анимируйте только те слои, которые необходимо анимировать.

2. Держите это маленьким

Чем больше размеры создаваемого вами изображения, тем больше будет размер файла. Обрезайте изображение настолько, насколько это возможно, только в том разделе, который вы анимируете.

3. Держите это коротким

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

4. Не используйте каждый цвет под солнцем

Чем больше цветов в анимированном GIF, тем больше будет размер файла. Имейте это в виду, когда выбираете то, что хотели бы оживить.

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

Сохранение вашего GIF

В Adobe Photoshop перейдите в « Файл» и затем « Сохранить для Web» или нажмите сочетание клавиш CTRL-ALT-S.

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

В верхнем правом углу окна «Сохранить для Web» вы увидите параметр «Цвета». Когда вы поиграете с этим параметром, увеличивая или уменьшая его, вы заметите изменения в GIF. Постарайтесь сделать это число как можно меньшим, не жертвуя качеством анимированного GIF.

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

В нижней части панели «Сохранить для Web» вы также можете контролировать, сколько раз ваш GIF будет зацикливаться, а также просматривать анимацию. После того, как вы отрегулировали настройки, такие как Цвета и Потеря, рекомендуется быстро просмотреть анимацию, чтобы убедиться, что изображение по-прежнему выглядит четким.

Насколько большой слишком большой?

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

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

Совместимость с анимированным GIF

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

Тем не менее, анимированный GIF не работает везде. В Outlook 2007, 2010, 2013 и Windows Phone 7 будет показан только первый кадр вашего анимированного GIF. Поэтому убедитесь, что любая ключевая информация, которую вам абсолютно необходимо передать, находится в этом первом кадре, и что ваша электронная почта будет по-прежнему выглядеть так же великолепно, как и с анимацией, как и в этом первом кадре.

Соображения с анимированными гифками

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

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

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

Анимированный GIF вернулся с самого первого появления в 80-х. Если вы не включили его в свои почтовые кампании, самое время это сделать. Они являются отличной альтернативой видеоконтенту и широко поддерживаются.

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

Что такое анимированный GIF?
Как вы создаете анимированный GIF?
Что такое анимированный GIF?
Насколько большой слишком большой?
Теперь вы можете задаться вопросом, насколько велики размеры анимированных изображений GIF?