GIF баннеры

Баннеры на сайтах, анимированные “гифки”, смайлики и стикеры в мессенджерах – GIF применяется в сети повсеместно. Это один из самых популярных и доступных типов файлов растровой графики и анимации.

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

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

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

Минусом рекламных GIF баннеров на данный момент являются ограниченные возможности анимации (по сравнению с передовым форматом HTML5) и невозможность программного включения в файл векторной графики и шрифтов. К недостаткам формата также можно отнести ограничение количества цветов – не более 256 и большой вес.

Немного теории.

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

Формат GIF (англ. Graphics Interchange Format – «формат для обмена изображениями») был разработан компанией CompuServe в 1987 году, на заре Интернета, для обеспечения передачи растровых изображений по сетям вне зависимости от компьютерной платформы и операционных систем. С тех пор формат дорабатывался и модифицировался, но суть осталась прежней.

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

Цветовая палитра GIF – 256 цветов. Как правило, это так называемые Web Safe (безопасные) цвета, которые одинаково отображаются во всех браузерах и программах.

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

Можно создать гифку даже из 2 цветов, например, черного и белого.

GIF может состоять из одного кадра и тогда картинка будет неподвижной, статичной, такой же, как изображения JPG, PNG или BMP.

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

Расширение файла у статичной и анимированной гифки одно – GIF, это один и тот же формат.

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

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

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

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

Доступные варианты:

• бесконечно (loop);
• остановить после нескольких циклов (количество указывается при экспорте GIF-файла);
• проиграть только один раз.

Обращаем ваше внимание, что многие рекламные сети ограничивают этот параметр, например, Google AdWords, требует остановки GIF после 30 секунд показа. При этом баннер может показываться циклично, но в пределах этих 30 секунд. То есть, баннер общей продолжительностью 10 секунд может быть проигран 3 раза и затем остановлен.

Особенности передачи изображения.

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

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

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

Оптимизируй это.

Размещая баннер в интернете, вы рано или поздно столкнетесь с требованием рекламной площадки по ограничению веса файла. У Google AdWords это ограничение в 150 Кб., у Яндекса 120 – 150Кб. (в зависимости от типа размещения и размера баннера).

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

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

Приемы оптимизации, следующие:

• сокращение количества используемых цветов. Часто, уменьшение выставленного по умолчанию показателя в 256 цветов, до 128 или 64, практически визуально незаметны;
• настройки Lossy (сжатия файлов за счет объединения близких похожих цветов);
• настройки Diffusion (или Noise) – изменение схемы смешивания близких по расположению цветов и добавление “пустых” белых пикселей по паттерну, создающему эффект визуального “шума”, в некоторых случаях, вполне приятный глазу;
• объединение похожих кадров анимации;
• сокращение количества кадров за счет удаления, например, каждого 2-го кадра при уменьшении скорости проигрывания, что визуально часто незаметно. Меньше кадров = меньше вес.

Все эти настройки могут значительно, а иногда в разы, уменьшить вес GIF-баннера.

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

Использование GIF баннеров в рекламе.

Практически все рекламные площадки и сети принимают к размещению баннеры в формате GIF.Google AdWords, Яндекс.Директ, Рамблер, adFox, Mail.ru, myTarget – везде вы можете использовать гиф-баннеры, при соблюдении, разумеется, технических требований.

Как правило, требуемый вес GIF баннера будет находиться в районе 150 Кб.

GIF баннеры обеспечивают рекламодателю самое широкое покрытие. Дополнительно, они часто используются в качестве так называемых “заглушек” – то есть, картинок, повторяющих содержимое анимированного HTML5-баннера (или Flash-баннера). В случае невозможности показа HTML5 или Flash на устройстве пользователя ему демонстрируется GIF версия баннера.

Хорошей практикой стало изготовление комплекта анимированных HTML5-баннеров разных размеров и дополнительное создание дублирующего комплекта в формате GIF.

GIF баннеры для соцсетей и мессенджеров.

В популярных социальных сетях и мессенджерах GIF анимации и картинки тоже широко используются для рекламы.GIF баннер ВКонтакте можно вставить в универсальную рекламную запись или обычную запись в ленте сообщества. Рекомендуемые размеры гиф-баннера в ВК – ширина до 1000px, вес для проигрывания в режиме автозапуска (автоплея) в районе 10-12мб.

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

GIF в рекламе с помощью Email-рассылок.

Универсальность и простота формата GIF позволяют использовать его в качестве анимированных вложений к письмам или встраивать в html разметку рекламного письма. Различные почтовые службы по-разному относятся к включению анимированных GIF в почтовые рассылки.

Общие рекомендации к дизайну и содержанию рекламных GIF баннеров.

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

Но, в любом случае стоит придерживаться основных правил создания анимированных баннеров:

• избегать слишком быстрых, раздражающих пользователя вспышек, миганий;
• выбирать скорость переключения кадров баннера комфортной для прочтения информации;
• использовать четкие контрастные шрифты, облегчающие прочтение текста;
• избегать слишком длинных текстов и лишней информации, которая продублирована на сайте или посадочной странице, на которую приведет баннер;
• применять в дизайне чистые цвета и качественные изображения, не замусоривать баннер мелкими деталями;
• размещать на баннере мотивирующие кнопки с призывом к действию («Купить», «Подробнее», «Заказать»), которые повышают CTR (показатель кликабельности) баннера.

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