Анимированные GIF-файлы в email: 10 советов по уменьшению размера файлов

Удивительно. Развлекательно. Информативно. GIF-файлы обладают всеми этими качествами, и маркетологи, и клиенты любят эти веселые дополнения к email-рассылкам. Но знаете ли вы, чем еще могут быть GIF-файлы? Большими. Легко сделать так, чтобы размер файла GIF раздулся до гигантских пропорций, что замедляет загрузку писем.

Так что же делать email-маркетологу? Эван Диас, ведущий дизайнер Lucky Red Pixel, знает ответы. Вот что мы узнали из его выступления на Litmus Live «Создание анимации, которая радует и помогает подписчикам».

## Крошечные, но мощные: почему так важно держать размер GIF-файлов низким

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

### Какого размера может быть GIF в email?

В целом, чем меньше ваш GIF, тем быстрее он загружается в ваших письмах, а чем короче время загрузки, тем лучше опыт для ваших подписчиков. Но какой максимальный размер файла приемлем для GIF? Эван советует держать файлы в пределах 5 МБ. При 5 МБ подписчику, вероятно, придется подождать всего несколько секунд, пока изображения загрузятся. Здесь, в Litmus, мы стараемся держать GIF-файлы в пределах 1 МБ, чтобы гарантировать быструю загрузку и не «съедать» слишком много данных наших читателей, если они откроют наше письмо на мобильном устройстве на ходу.

## Сосредоточьтесь на оптимизации размера файла на протяжении всего процесса создания GIF

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

### 1. Придерживайтесь более простых (они же быстрые) переходов

Если ваша анимация включает переходы, придерживайтесь «смены кадров» вместо «затухания». В то время как смена кадров мгновенно переходит от одного изображения к другому, затухание занимает время, чтобы передать то же сообщение. Затухание включает в себя больше кадров, больше цветов, и, следовательно, имеет больший размер файла. Пример ниже показывает, насколько существенным является влияние перехода с затуханием на размер файла. Если вы выберете эффект затухания вместо простой смены кадров, ваш GIF-файл будет в 7,8 раза больше.

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

### 2. По возможности используйте иллюстрации вместо фотографий

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

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

### 3. Накладывайте цвета, чтобы ограничить палитру фотографий

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

### 4. При преобразовании видео в GIF импортируйте каждый второй кадр на слой

Photoshop преобразует кадры вашего видео в слои при выборе «Файл» > «Импорт» > «Кадры видео в слои». Это удобный инструмент, но он может привести к неуправляемому размеру GIF-файла, если вы не будете осторожны.

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

### 5. Удаляйте дублирующиеся кадры

Помните: чем больше кадров вы используете в своем GIF, тем больше размер файла. После импорта вашего GIF в Photoshop вы можете просмотреть анимацию кадр за кадром. Если есть несколько слоев с одинаковым изображением кадра, удалите дубликаты.

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

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

Если вы удаляете кадры из своего GIF, вам нужно будет изменить задержку между кадрами, чтобы сохранить синхронизацию GIF. Просто «удерживайте» один кадр в течение времени, эквивалентного времени, которое потребовалось бы для прогона удаленных дублирующихся кадров — так вы сохраните темп GIF.

Имейте в виду, что в GIF существует простая обратная зависимость: чем выше частота кадров в секунду, тем меньше дерганий при воспроизведении. Задержка в .03, вероятно, будет использоваться по умолчанию в Photoshop для загруженного вами GIF, что создает анимацию с частотой 30 кадров в секунду, которая воспроизводится очень плавно. Но чем больше кадров вам нужно загружать в секунду, тем больше будет размер файла. Вам нужно будет найти золотую середину, которая сохранит вашу анимацию достаточно плавной, одновременно поддерживая низкий размер файла.

### 7. Выберите адаптивное сжатие цветов

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

### 8. Оставьте «прозрачность» включенной

GIF часто плохо обрабатывают прозрачность, применяя резкий белый край вокруг элементов при установке на прозрачном фоне. Если вы хотите использовать анимацию на прозрачном фоне, анимированные PNG — это то, что вам нужно. Так что же делает этот флажок «прозрачность» в Photoshop? Он позволяет пикселям, которые не изменились от кадра к кадру, оставаться такими, какие они есть. Это означает, что области GIF, которые остаются постоянными от одного кадра к следующему, не нужно перезагружать. Эван предлагает оставлять эту опцию включенной большую часть времени, так как это может уменьшить размер файла на треть или более.

### 9. Сбалансируйте цветовую таблицу с дизерингом

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

— 128-256 цветов для видео

— 64-128 цветов для анимированных иллюстраций

Если вы хотите действительно точно настроить размер файла, вы можете объединить изменения цветовой таблицы с процентом дизеринга. Более высокий процент дизеринга приводит к более плавным градиентам, даже при ограниченной цветовой таблице. Например, оттенок серого всего с 8 цветными полосами становится плавным градиентом при включенном 100% дизеринге. Более высокий дизеринг в сочетании с цветовой таблицей меньшего размера для видео может стать идеальным решением для GIF, который выглядит хорошо, но загружается быстро.

### 10. Просто уменьшите качество и размер файла видео с помощью Lossy

Хотите оптимизировать размер GIF-файла без всех тонких настроек, связанных с цветовыми таблицами и дизерингом? Выбор уровня Lossy от 20% до 40% уменьшает размер файла и некоторое качество за один раз. Вы можете экспериментировать с этими процентами, чтобы найти баланс качества и размера файла, который подходит вам.

## Посмотрите полную запись выступления Эвана на Litmus Live

Ищете еще больше советов по созданию анимации, которая радует и помогает подписчикам? Вы можете посмотреть полную запись выступления Эвана на Litmus Live ниже!

## Какой ваш секрет оптимизации анимированных GIF для email?

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