Баннер для сайта: что это такое, виды, размеры и как сделать эффективный

Первый баннер в истории интернета появился 27 октября 1994 года на сайте HotWired. Он рекламировал AT&T и выглядел как яркая полоска с текстом «Have you ever clicked your mouse right here? You will». CTR составил 44%. Сегодня средний CTR баннерной рекламы — около 0,1%. Пользователи научились не замечать баннеры — это называется «баннерная слепота». Но правильно сделанный баннер по-прежнему работает.

Что такое баннер

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

• перейти на сайт рекламодателя,
• купить товар,
• оставить заявку.

Веб-баннер может быть статичным изображением, анимацией или интерактивным HTML5-элементом.

Баннер это один из старейших форматов интернет-рекламы — и при этом один из самых живучих. Несмотря на развитие контекстной рекламы, таргетинга и нативных форматов, баннерная реклама остаётся значимой частью digital-маркетинга. По данным IAB, дисплейная реклама занимает около 30% рынка интернет-рекламы.

Баннер или банер — оба варианта встречаются в русском языке, но нормативным считается «баннер» с двумя «н» (транслитерация английского banner). Написание «банер» — распространённая ошибка.

Виды баннеров в интернете

• Статичный баннер — обычное изображение в формате JPG, PNG или WebP. Без анимации. Самый простой в создании и размещении. Загружается быстро, не отвлекает от контента — но и привлекает меньше внимания, чем анимированные варианты.
• Анимированный баннер (GIF) — изображение с анимацией. Классика баннерной рекламы. Анимация привлекает взгляд, позволяет разместить больше информации через сменяющиеся кадры. Ограничение: качество изображения ниже, чем у JPG/PNG, объём файла быстро растёт при сложной анимации.
• HTML5-баннер — современный стандарт. Сочетает HTML, CSS и JavaScript: плавная анимация, интерактивность, видео. Качество выше, чем у GIF, вес меньше при сопоставимой анимации. Требует разработки, но даёт максимальные возможности. Адаптивный баннер на HTML5 автоматически подстраивается под размер экрана.
• Динамический баннер — содержимое формируется автоматически на основе данных: товары из каталога, цены, наличие. Технологии смарт-баннеров в Яндекс Директе и динамического ремаркетинга в Google работают именно так: пользователь смотрел кроссовки — в баннере появляются именно они.
• Видеобаннер — встроенное видео в рекламном блоке. Высокий engagement, но тяжёлый формат с точки зрения загрузки.
• Hero banner (на главной странице) — крупный баннер в верхней части главной страницы, часто занимающий всю ширину экрана. Используется как для рекламы, так и для передачи ключевого сообщения бренда.
• Sticky баннер — фиксированный блок, который остаётся на экране при прокрутке страницы. Хорошая видимость при умеренном раздражении пользователя.
• Баннер для таргета — в таргетированной рекламе в социальных сетях. Отличается требованиями к формату: квадрат или вертикаль под мобильные ленты.

Стандартные размеры баннеров для сайта

Размер для сайта стандартизирован IAB (Interactive Advertising Bureau). Нестандартные форматы многие площадки просто не принимают.

• Горизонтальные (Leaderboard): 728×90 — классический лидерборд, размещается в верхней части страницы. 970×90 — широкий вариант для широких экранов. 320×50 — мобильный стандарт для смартфонов.
• Прямоугольные: 300×250 — «средний прямоугольник», самый популярный формат в мировой рекламе. Хорошо работает и на десктопе, и на мобильных. 336×280 — «большой прямоугольник». 300×600 — «полустраница», высокая видимость.
• Вертикальные (Skyscraper): 160×600 — «широкий небоскрёб». 120×600 — классический небоскрёб. Размещаются в боковых колонках.
• YouTube: 2560×1440 пикселей для канального баннера. Минимальный безопасный размер — 1546×423 пикселей по центру.
• Таргетированная реклама в соцсетях: ВКонтакте — 1080×1080 (квадрат), 1080×1350 (вертикаль), 1080×566 (горизонталь).

Что делает баннер эффективным: правила и примеры

Баннерная слепота — реальная проблема. Пользователи научились игнорировать всё, что выглядит как реклама в привычных местах. Эффективный баннер разрывает этот паттерн.

• Одно чёткое сообщение. У пользователя 2–3 секунды. Одна идея, один визуальный акцент, один CTA. «Скидка 50% на всё» — понятно. «Широкий ассортимент товаров по приятным ценам для всей семьи» — нет.
• Сильный призыв к действию. CTA должен быть конкретным: «Купить», «Получить скидку», «Записаться бесплатно». Расплывчатые «Узнать подробнее» работают хуже. Кнопка должна визуально выделяться — контрастный цвет, достаточный размер.
• Визуальная иерархия. Взгляд должен двигаться предсказуемо: ключевое изображение → основное сообщение → CTA. Хаотичный дизайн без иерархии — деньги на ветер.
• Соответствие посадочной странице. Пользователь кликнул на баннер с акцией — и попал на главную без упоминания акции. Это разрывает ожидания и убивает конверсию. Баннер и лендинг должны быть согласованы визуально и по содержанию.
• Минимальный вес файла. Google рекомендует не более 150 КБ. Тяжёлые замедляют загрузку страницы, что ухудшает пользовательский опыт и SEO-позиции площадки.
• A/B тестирование. Интуиция — плохой советчик. Тестируйте заголовки, цвета кнопок, изображения, тексты CTA. Даже небольшое изменение может удвоить CTR.

Баннерная реклама: каналы размещения

• Рекламные сети (баннерные сети) — автоматизированные платформы, показывающие баннеры на тысячах сайтов-партнёров. Яндекс Рекламная Сеть (РСЯ) и Google Display Network (GDN) — крупнейшие в России. Таргетинг по интересам, поведению, демографии, ретаргетинг.
• Прямое размещение — договорённость с конкретной площадкой. Подходит для нишевых сайтов с целевой аудиторией. Прогнозируемый охват, фиксированная цена.
• Программатик (RTB) — автоматизированная закупка через торги в реальном времени. Показывается конкретному пользователю на основе его данных, а не тематики сайта. Наиболее точный таргетинг.
• Смарт-баннеры — динамические баннеры в Яндекс Директе, формирующие содержимое из товарного фида (YML, CSV, XML). Эффективны для e-commerce: пользователь видит именно те товары, которые просматривал.

Как сделать баннер: инструменты

• Canva — самый популярный онлайн-инструмент без навыков дизайна. Сотни шаблонов по стандартным размерам, простой drag-and-drop. Бесплатный план покрывает большинство задач. Минус: шаблоны используются миллионами — уникальности нет.
• Adobe Photoshop — профессиональный инструмент для статичных баннеров. Полный контроль, любые эффекты. Требует навыков и платной подписки.
• Google Web Designer — бесплатный инструмент для HTML5-баннеров с анимацией. Готовые форматы под Google Display Network.
• Figma — стандарт для веб-дизайна, подходит и для баннеров. Удобна для командной работы, есть плагины с шаблонами.
• Онлайн-сервисы — Crello (ныне VistaCreate), Bannerboo, Bannersnack. Специализируются именно на рекламных баннерах с анимацией без знания кода.

Дизайн баннера: типичные ошибки

• Слишком много текста. Три строчки максимум. Всё остальное — на лендинге.
• Слабый контраст. Текст, сливающийся с фоном, не читается за 2 секунды. Тест: переведите баннер в чёрно-белый — если читаемость падает — контраст недостаточный.
• Нет чёткого CTA. Пользователь понял, что рекламируется. Но не понял, что делать. Кнопка «Купить» или «Получить» должна быть очевидной.
• Несоответствие бренду. Баннер в другом стиле, чем основной сайт, создаёт разрыв доверия. Визуальное единство — обязательное условие.
• Игнорирование мобильных. Более 60% трафика сегодня — мобильный. Баннер, отлично выглядящий на десктопе, может быть нечитаемым на смартфоне. Проверяйте всегда.

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