Размеры медийных баннеров: 6 форматов из одной вырезки

У медийной рекламы есть особенность, которая застаёт небольших рекламодателей врасплох: креатив никогда не идёт в одном размере. Сети нужен почти квадратный прямоугольник, широкая лента, высокая башня и узкая мобильная полоска — всё в рамках одной кампании и всё узнаваемо от одного и того же бренда.

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

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

Шесть размеров медийных баннеров, которые тянут основную нагрузку

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

• 300x250, средний прямоугольник (medium rectangle) — рабочая лошадка. Встаёт и в текст, и в сайдбар, и на десктопе, и на мобильном. Если делаете только один баннер, делайте этот.
• 336x280, большой прямоугольник (large rectangle) — старший брат среднего прямоугольника и любимец Google Ads, переживший собственное исключение из официального списка IAB. Та же вёрстка обычно переезжает сюда без потерь, ещё и с запасом.
• 728x90, лидерборд (leaderboard) — широкая полоса вверху десктопных страниц. Безжалостно низкая; относитесь к ней как к горизонтальной визитке.
• 320x50, мобильный баннер (mobile banner) — маленькая полоска на телефоне и самая суровая проверка на читаемость во всей рекламе.
• 160x600, широкий небоскрёб (wide skyscraper) — высокий блок в сайдбаре, который остаётся на виду, пока человек прокручивает страницу.
• 300x600, половина страницы (half page) — большое вертикальное полотно и единственное место, где крупный кадр товара, заголовок и кнопка помещаются, не толкая друг друга локтями.

Почему одна вырезка товара выигрывает у шести фотосессий

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

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

Вырезка срезает этот шов. Уберите фон на remover.bg — края остаются чистыми даже на волосах и шерсти, — экспортируйте PNG с прозрачным фоном и положите его на подложку фирменного цвета в графическом редакторе. Теперь товар — подвижный объект: сдвиньте его вправо в лидерборде, опустите вниз в небоскрёбе, дайте ему занять всю половину страницы. Фон больше не фотография, которую вы кадрируете, — это краска, заливающая любую рамку, которую вы нарисуете.

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

Безопасные зоны и читаемость на маленьких размерах

Баннер 320x50 размером примерно с ваш большой палец. Проектируйте исходя из этой реальности:

• Одно сообщение на баннер. Товар, заголовок из пяти слов или короче, призыв к действию (CTA). Всё сверх этого превращается в шум.
• Оставьте воздух по краям. Держите текст и логотип подальше от границ — отступ примерно в высоту заглавной буквы обычно попадает в точку.
• Проверяйте в реальном размере. Поставьте зум на 100% и отойдите от экрана. Если приходится щуриться вам, аудитория и пытаться не станет.
• Дайте CTA форму кнопки. Небольшой контрастный залитый прямоугольник цепляет взгляд даже на 320x50.
• Обводите белые фоны. Если фон белый или очень светлый, добавьте тонкую рамку, чтобы баннер не растворялся в странице — некоторые сети этого прямо требуют.

Вес файла: маленькие баннеры — файлы ещё меньше

Рекламные площадки строги к размеру файла: Google Ads, например, ограничивает загружаемые графические баннеры 150 KB. Это ещё один тихий аргумент в пользу связки «вырезка плюс сплошной цвет» — однотонная заливка сжимается прекрасно, а фотографический фон проедает весь бюджет байтов на деталях, которые никто не разглядывает.

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

Единый вид во всех размерах

Медийная реклама вознаграждает повторение. Человек видит ваш лидерборд на новостном сайте, потом средний прямоугольник в блоге — кампания складывается в результат только тогда, когда оба касания очевидно принадлежат одному бренду.

Система на вырезках делает это почти автоматически. Тот же ракурс товара, тот же цвет фона, тот же угол под логотип, тот же цвет кнопки. Размеры меняются — узнаваемость нет. Это тот же принцип, что и за единым стилем ленты Instagram: узнавание накапливается с каждым показом, но только если есть что узнавать.

Итог

Соберите шесть рабочих размеров: 300x250, 336x280, 728x90, 320x50, 160x600 и 300x600. Отталкивайтесь от одной чистой вырезки товара на сплошном фирменном фоне, держите одно сообщение на баннер, соблюдайте безопасные зоны и экспортируйте лёгкие файлы точно в нужных размерах. Шесть баннеров, один вечер, один безошибочно узнаваемый бренд — вот и вся игра.