Новый формат
Размеры баннера в пикселях: как посмотреть на чужом сайте
Баннер — изображение или интерактивный блок, который рекламирует оффер, раздел или партнёра. Перед тем как делать «как у конкурента», полезно знать реальный размер в пикселях — иначе креатив поедет в вёрстке или раздует вес страницы.
Ниже — типы баннеров, почему стандарты IAB соблюдают не всегда и как снять размеры через DevTools. Про кликабельную картинку — в соседнем материале.
Какие бывают баннеры
По форме подачи чаще всего встречаются три типа: статичные файлы, анимация и интерактив.
Выбор зависит от задачи и бюджета на скорость: чем сложнее креатив, тем выше риск задержки LCP и раздражения пользователей.
Типы:
- статичные JPEG/PNG/WebP — проще и легче;
- анимация (GIF или видео-превью) — нагляднее, тяжелее;
- интерактив (HTML/JS) — клики, формы, анимации; сложнее в поддержке.
Размеры: стандарты и реальность
Рекламные ассоциации и сети публикуют типовые форматы (например, линейки IAB), а соцсети задают свои пиксели под ленту и stories.
На обычных сайтах размеры часто произвольные: под сетку макета, под мобильный breakpoint или под «дырку» в сайдбаре. Универсальной классификации «в сантиметрах» для веба нет — считают пиксели CSS и исходник файла.
На что смотреть при своём креативе:
- слот в макете (ширина колонки / max-width);
- retina: иногда готовят 2×, но отдают сжатый файл;
- мобильная версия — отдельный размер или адаптив;
- требования площадки, если это внешняя реклама.
Как узнать размер баннера на чужом сайте
Если нужно повторить габариты слота (не копируя чужой файл), откройте страницу в Chrome/Firefox/Safari и используйте инструменты разработчика.
Короткий алгоритм:
- ПКМ по баннеру → «Просмотреть код» / Inspect;
- в DOM найдите `img` или контейнер баннера;
- посмотрите width/height в атрибутах или computed size;
- при сомнении откройте URL картинки и сверьте натуральный размер файла.
Нюансы:
- CSS может сжать картинку — display ≠ intrinsic;
- фон через `background-image` смотрите в Styles, не в атрибутах img;
- iframe/рекламная сеть — размер может быть у контейнера, а не у файла.
Почему произвольные размеры нормальны
Сайты адаптируют блоки под разные экраны и сетки. Жёсткий «стандарт 728×90 везде» давно не единственный вариант.
Главное — чтобы баннер не ломал чтение контента, не перекрывал CTA и не весил как отдельная страница. Если креатив полезный (схема, акция с ясным оффером), его терпят охотнее, чем пустой «кричащий» GIF.
Частые вопросы
Где в DevTools смотреть размер?
ПКМ по баннеру → «Просмотреть код» / Inspect. У выделенного элемента смотрите атрибуты width/height у img или вычисленный размер в панели Styles/Computed и во всплывающей подсказке над узлом.
Width в HTML = реальный файл?
Не всегда. Атрибуты и CSS могут масштабировать картинку. Для исходника смотрите Network → размер ресурса или откройте URL картинки в новой вкладке.
Есть ли обязательные размеры баннеров?
У рекламных сетей и соцсетей — свои спеки. На обычных сайтах вебмастера часто ставят произвольные форматы под макет.
Статичный, GIF и HTML5 — в чём разница?
JPEG/PNG легче и проще. GIF — анимация, но тяжёлый. HTML5/JS — интерактив, выше нагрузка и сложнее замерить как «одну картинку».
Зачем копировать размер конкурента?
Чтобы креатив встал в похожий слот без обрезки. Идею и оффер всё равно делайте своими; чужие ассеты без прав копировать нельзя.
Как не убить скорость?
Не раздувайте пиксели «на всякий случай»: нужный display-размер + сжатие (WebP/AVIF), width/height в разметке, lazy для нижеfold.
Баннер = картинка-ссылка?
Часто да: img внутри a. Правила те же — понятный alt, свой файл, нормальный вес. См. материал про картинку-ссылку.
