Коротко: HTML5-баннер — это рекламный блок на HTML5/CSS3/JavaScript с анимацией и опциональным интерактивом. Работает на всех устройствах без плагинов. Весовой лимит по IAB — 200 KB initial load. Основные инструменты: Google Web Designer (бесплатно), Bannerflow, Celtra. Запускают через Яндекс Директ, myTarget, программатик-DSP. Стандартный набор размеров: 300×250, 728×90, 300×600, 320×50.
Flash умер в 2020-м. GIF стал архаикой ещё раньше. Сейчас стандарт анимированной медийной рекламы — это HTML5-баннеры: лёгкие, плавные, совместимые с любым браузером и устройством. Именно их принимают Яндекс Директ, myTarget и все крупные DSP-платформы когда вы хотите запустить не просто картинку, а что-то живое.
Разберём что такое HTML5-баннеры, как они устроены изнутри, какими инструментами делаются и что нужно знать перед запуском — без воды, с конкретными числами и примерами из практики.
Что такое HTML5-баннер — определение простыми словами
HTML5-баннер — это рекламный баннер, написанный на HTML5, CSS3 и JavaScript. Это набор файлов (HTML, CSS, JS, изображения), упакованных в ZIP-архив, который рекламная система распаковывает и показывает пользователю прямо в браузере. Никаких плагинов, никакого Flash — только стандартные веб-технологии.
Что отличает HTML5-баннер от статичного изображения? Анимация — элементы двигаются, появляются, меняют цвет. Что отличает от GIF? Полноцветность, меньший вес при той же сложности, поддержка кликабельных зон и взаимодействий. А от Rich Media — граница условная: HTML5-баннер с видео и формами уже становится Rich Media. Большинство Rich Media форматов построены именно на HTML5.
HTML5 vs GIF vs Flash — чем отличаются
| Параметр | GIF | Flash | HTML5 |
|---|---|---|---|
| Цвета | 256 цветов | Полноцветный | Полноцветный |
| Анимация | Покадровая | Векторная, плавная | CSS3/JS, плавная |
| Интерактив | Нет | Да (plugin) | Да (нативный) |
| Мобильные | Да | Нет | Да |
| Плагин | Не нужен | Adobe Flash Player | Не нужен |
| Вес при анимации | Большой | Средний | Малый |
| Поддержка платформ | Везде | Мёртв с 2020 | Везде |
Кратко: Flash умер, GIF — для простых случаев (иконки, мемы), HTML5 — стандарт для рекламных баннеров. Если площадка принимает только JPG/GIF — это или очень старая система или прямое размещение с жёсткими ограничениями.
Структура HTML5-баннера изнутри
HTML5-баннер — это по сути маленький сайт. Типичная структура ZIP-архива:
- index.html — основной файл, точка входа. Задаёт размер баннера, подключает стили и скрипты.
- style.css — стили и CSS-анимации. Keyframes, transitions, transform.
- script.js — логика: таймеры, клик-обработчики, интеграция с рекламной платформой (MRAID, VPAID).
- /images/ — папка с графикой. PNG с прозрачностью, SVG для векторных элементов, WebP для фото.
- /fonts/ — шрифты в формате WOFF2. Важно: не подключать Google Fonts внешним запросом — это нарушает privacy policy большинства площадок и увеличивает время загрузки.
Главное правило: баннер должен работать полностью автономно. Никаких внешних запросов к API, CDN и сторонним ресурсам в initial load — всё упаковано внутри ZIP. Исключение — трекинг-пиксели, встроенные через специальный API платформы.
По стандартам IAB New Ad Portfolio, initial load HTML5-баннера не должен превышать 200 KB. Это всё что загружается автоматически. Видео, дополнительные слои и субзагрузки по клику — до 2.2 MB суммарно, но они инициируются пользователем.
Стандарты IAB — размеры и весовые лимиты
IAB (Interactive Advertising Bureau) регулярно обновляет стандарты. Актуальная редакция — New Ad Portfolio 2.0. Основные размеры для HTML5:
| Название | Размер (px) | Применение |
|---|---|---|
| Medium Rectangle | 300×250 | Универсальный, принимают все |
| Leaderboard | 728×90 | Верх страницы, десктоп |
| Half Page | 300×600 | Боковая колонка, высокий CTR |
| Billboard | 970×250 | Крупные порталы, брендинг |
| Mobile Banner | 320×50 | Мобильные сайты |
| Mobile Interstitial | 320×480 | Полноэкранный мобильный |
| Large Rectangle | 336×280 | Альтернатива Medium Rectangle |
Для старта делайте минимум три размера: 300×250, 728×90, 300×600. Без них не попасть на большинство площадок. Мобильный 320×50 добавьте если есть мобильный трафик — а он есть почти всегда.
Инструменты для создания HTML5-баннеров
Выбор инструмента зависит от бюджета, сложности анимации и наличия разработчика.
Google Web Designer — бесплатно, от Google
Визуальный редактор с таймлайном анимации как в After Effects. Экспортирует чистый HTML5/CSS3/JS, совместимый с Google Ads и Яндекс Директ. Есть готовые шаблоны. Кривая обучения — несколько часов для базовых баннеров. Бесплатный, работает на Windows и Mac. Лучший выбор для начала.
Bannerflow и Celtra — платные платформы
SaaS-решения для агентств и крупных рекламодателей. Drag-and-drop интерфейс, библиотека шаблонов, динамические баннеры с подтяжкой данных из фида, встроенный хостинг и аналитика взаимодействий. Bannerflow — от €299/месяц. Celtra — корпоративный сегмент, цена по запросу. Окупаются когда делаете 50+ баннеров в месяц.
Adobe Animate CC
Наследник Flash Professional. Мощный, но требует опыта. Умеет экспортировать HTML5 Canvas через CreateJS. Хорошо знаком дизайнерам, которые работали с Flash. Входит в Creative Cloud (~3 000 ₽/месяц).
Чистый HTML/CSS/JS
Для разработчиков. Максимальный контроль, минимальный вес. CSS keyframes закрывают 80% задач по анимации. Для сложных сцен — библиотека GSAP (GreenSock). Подход оправдан когда нужна нестандартная механика или очень жёсткие лимиты по весу.
Как создать HTML5-баннер: пошагово
- Определите размеры и площадку. Уточните у площадки требования до начала работы — не после. Яндекс Директ, myTarget и программатик DSP имеют разные лимиты по весу и разрешённым API. Сделать баннер а потом узнать что он не проходит модерацию — классическая и дорогостоящая ошибка.
- Подготовьте дизайн. Макет в Figma: один кадр начала анимации (статика), один — конца. Дизайнер должен учитывать анимацию: сложные градиенты и растровые текстуры дают большой вес, простые формы и SVG — маленький.
- Выберите инструмент. Для начала — Google Web Designer. Создайте новый файл, выберите тип «Banner» и задайте размер.
- Анимируйте. В Google Web Designer — добавляйте keyframe-события на таймлайне. Классический сценарий: появление логотипа → текст оффера → CTA-кнопка → лупинг или стоп-кадр. Длительность полного цикла — не более 15–30 секунд по стандартам большинства площадок.
- Оптимизируйте вес. Откройте Chrome DevTools → Network → посмотрите суммарный вес всех ресурсов. Сожмите PNG через TinyPNG, переведите иконки в SVG, шрифты — в WOFF2. Цель: initial load под 200 KB.
- Протестируйте локально. Откройте index.html в браузере — анимация должна идти плавно. Проверьте Chrome, Firefox, Safari. Откройте в мобильном браузере — масштаб должен быть корректным.
- Упакуйте в ZIP. Архив с index.html в корне — не в папке внутри. Проверьте что все пути относительные (не абсолютные). Загрузите в рекламную систему.
CSS-анимация vs GSAP — что выбрать
Два основных способа анимировать HTML5-баннер. Нет правильного ответа — есть задача.
| Параметр | CSS-анимация | GSAP (JavaScript) |
|---|---|---|
| Вес | Нулевой (нет зависимостей) | ~30 KB минифицированный |
| Простота | Высокая для базовых эффектов | Требует JS-навыков |
| Синхронизация сцен | Сложная | Встроенный Timeline |
| Контроль таймингов | Ограниченный | Точный, до мс |
| Сложные траектории | Ограничены cubic-bezier | Любые кривые |
| Производительность | GPU-ускорение нативно | Оптимизирован под GPU |
Практическое правило: баннер с fade-in логотипа, слайдом текста и пульсацией кнопки — чистый CSS, никакой GSAP не нужен. Баннер где 12 элементов появляются в строгой последовательности с разными easing-кривыми и потом схлопываются в один — вот тут берите GSAP и его Timeline.
Технические требования площадок в России
У каждой площадки — свои правила. До начала разработки уточните их, чтобы не переделывать.
Яндекс Директ
- Формат: ZIP-архив, index.html в корне
- Максимальный вес: 150 KB
- Анимация: только CSS/JS, без внешних запросов
- Клик: через стандартный тег
<a href="%%CLICK_URL%%">или JS-обработчик - Модерация: 1–3 рабочих дня
myTarget / VK Реклама
- HTML5 поддерживается в форматах «Баннер» и «HTML5»
- Вес: до 150 KB, размеры по стандарту IAB
- Клик-URL передаётся через параметр при загрузке
- Запрещены: autoplay звука, всплывающие окна
Программатик-DSP (Soloway, Buzzoola)
- Поддерживают полные стандарты IAB включая MRAID для мобильных
- Вес: до 200 KB initial load (IAB-стандарт)
- Требуют MRAID.js для мобильных форматов — уточните версию у менеджера
Типичные ошибки при создании HTML5-баннеров
- Внешние запросы в initial load. Google Fonts, внешние CDN, сторонние скрипты — модерация завернёт или баннер не загрузится на площадке. Всё локально.
- Абсолютные пути к файлам.
src="/images/logo.png"работает на вашем компьютере, но не в ZIP-архиве на площадке. Только относительные:src="images/logo.png". - Превышение лимита 200 KB. Чаще всего виноваты несжатые PNG и растровые текстуры. Проверяйте вес через DevTools до финальной упаковки.
- Анимация без стоп-кадра. IAB требует: анимация должна останавливаться через 30 секунд максимум. Вечный лупинг — нарушение, часть площадок отклонит.
- Нет fallback-изображения. Если JS не выполнился — пользователь видит пустой блок. Добавьте статичный
<noscript>с JPG-версией баннера. - Не тестировали на мобильных. Баннер 300×250 корректно масштабируется на экране 375px — проверяйте в Chrome DevTools в режиме мобильного устройства.
- Шрифт подключён через @import. Внешний запрос к Google Fonts или Typekit блокируется. Конвертируйте шрифт в WOFF2 и подключайте локально через @font-face.
Читайте также
- Rich Media Ads — интерактивные баннеры с видео и геймификацией
- Баннерная реклама — форматы, стоимость и настройка
- RSA — адаптивные поисковые объявления
- Разработка и запуск медийной рекламы под ключ
Коротко о главном
HTML5-баннеры — стандарт анимированной медийной рекламы. Строятся на HTML/CSS/JS, работают без плагинов на любых устройствах. Лимит initial load по IAB — 200 KB. Для старта достаточно Google Web Designer (бесплатно). Делайте минимум три размера: 300×250, 728×90, 300×600. Никаких внешних запросов, только относительные пути, анимация не дольше 30 секунд. Если нужны баннеры под конкретную площадку — уточните требования до начала разработки, не после. Нужна помощь — напишите нам.