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

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

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

## Мал, да удал: почему так важно сохранять небольшой размер GIF-файлов

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

### Насколько большим может быть GIF в письме?

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

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

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

### 1. Используйте простые (читай: быстрые) переходы

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

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

### 2. По возможности выбирайте иллюстрации вместо фото

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

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

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

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

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

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

Оптимизируйте размер, ограничивая количество слоев каждым вторым кадром. Если этого недостаточно, Эван отмечает, что стоит попробовать брать каждый четвертый кадр.

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

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

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

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

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

Помните об обратной зависимости: чем выше частота кадров в секунду, тем меньше рывков. Задержка 0,03 — стандартная настройка в Photoshop, создающая плавную анимацию 30 FPS. Но чем больше кадров загружается в секунду, тем больше размер файла. Найдите «золотую середину» между плавностью и весом.

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

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

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

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

### 9. Балансируйте таблицу цветов с помощью дизеринга (dithering)

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

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

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

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

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

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

## Смотрите полное выступление Эвана на Litmus Live

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

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

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