Размеры баннеров
для всех платформ
VK
5 размеровTelegram
3 размераYouTube
3 размераЯндекс Директ
5 размеровGoogle Ads
5 размеровVK
3 размераВеб
3 размераЗачем нужны точные размеры баннеров
Каждая платформа предъявляет собственные требования к размерам графики. Загрузка изображения неправильного размера приводит к обрезке, пикселизации или искажению пропорций. Использование точных размеров гарантирует, что баннер будет отображаться именно так, как задумано дизайнером.
Точное отображение
Баннер правильного размера не будет обрезан, растянут или сжат платформой. Текст останется читаемым, логотип сохранит пропорции, а композиция будет выглядеть так, как задумано.
Быстрая загрузка
Соблюдение ограничений по весу файла важно для рекламных сетей. Баннер, превышающий лимит, будет отклонен модерацией. Оптимальный вес ускоряет показ рекламы и снижает расход трафика.
Кросс-платформенность
Один дизайн-макет можно адаптировать под несколько платформ, зная точные размеры каждой. Это экономит время дизайнера и обеспечивает единообразие бренда на всех площадках.
Возможности справочника
Все инструменты для подбора правильного размера баннера собраны в одном месте.
Поиск и фильтрация
Ищите баннеры по названию платформы, типу размещения или конкретным пикселям. Фильтруйте по платформе одним кликом.
Визуальный превью
Каждый размер показан с визуальным прямоугольником реальных пропорций. Сразу видно, вертикальный баннер, горизонтальный или квадратный.
Полная спецификация
Для каждого баннера указан размер в пикселях, соотношение сторон, допустимые форматы файлов, максимальный вес и минимальный размер.
8 платформ
VK, Telegram, YouTube, Яндекс Директ, Google Ads, VK, Email-рассылки и веб-сайты. Все популярные площадки в одном справочнике.
Мобильные форматы
Сторис, мобильные баннеры и вертикальные форматы. Справочник учитывает рост мобильного трафика и содержит все актуальные мобильные размеры.
Рекомендации
Для каждого размера даны практические подсказки: в каком формате сохранять, какой вес допустим, и как выглядит баннер на платформе.
Сравнение платформ/ требования к баннерам
У каждой рекламной сети и соцсети свои требования к формату и весу графики. Ниже приведены ключевые различия, которые стоит учитывать при подготовке баннеров.
Рекламные сети (Яндекс Директ, Google Ads)
Строгие ограничения по весу файла (120-150 КБ). Поддерживают анимированные GIF. Самый популярный формат — 300x250 (средний прямоугольник), он используется на обеих платформах. Для Яндекс Директ характерен формат 240x400, для Google Ads — 970x90.
Социальные сети (VK, VK)
Более лояльные ограничения по весу (5-30 МБ). Ключевой формат — квадрат 1080x1080 для постов в ленте. Сторис обеих платформ используют одинаковый вертикальный формат 1080x1920. VK имеет уникальный формат обложки сообщества 1590x400.
Видеоплатформы (YouTube)
YouTube требует высокое разрешение: превью 1280x720 (16:9), обложка канала 2560x1440. Обложка канала отображается по-разному на ТВ, десктопе и мобильных, поэтому важную информацию следует размещать в центральной «безопасной зоне» 1546x423 px.
Мессенджеры (Telegram)
Telegram предъявляет особые требования к стикерам: строго 512x512 px, формат WEBP или PNG, вес не более 350 КБ. Для баннеров ботов используется формат 1280x640 (2:1). Аватар канала — квадрат 640x640.
Форматы файлов для баннеров
Выбор формата влияет на качество, вес и совместимость баннера. Каждая платформа поддерживает свой набор форматов.
JPEG
Фотографии и сложные изображенияЛучший выбор для фотографических баннеров. Поддерживает миллионы цветов с управляемым сжатием. При качестве 80-85% обеспечивает отличное соотношение размера и визуального качества. Не поддерживает прозрачность.
PNG
Графика, логотипы, прозрачностьИдеален для баннеров с текстом, логотипами и ровными заливками. Поддерживает прозрачность (alpha-канал). Сжатие без потерь, поэтому файл тяжелее JPEG. Для рекламных сетей с лимитом 120-150 КБ может потребоваться дополнительная оптимизация.
WebP
Современный веб-форматФормат от Google, на 25-35% легче JPEG при том же качестве. Поддерживает и прозрачность, и анимацию. Поддерживается всеми современными браузерами. Рекомендуется для веб-баннеров и Telegram-стикеров.
GIF
Анимация для рекламных сетейЕдинственный анимированный формат, поддерживаемый Яндекс Директом и Google Ads. Ограничен 256 цветами на кадр, поэтому не подходит для фотографий. Длительность анимации обычно ограничена 15-30 секундами.
Советы по созданию баннеров
Правильный размер — это половина дела. Вот практические рекомендации, которые помогут сделать баннер эффективным.
1Безопасная зона
Размещайте текст и логотип с отступом 10-15% от краев. Разные устройства и платформы могут обрезать края баннера. Особенно важно для обложек YouTube и VK, где отображаемая область зависит от экрана.
2Читаемость текста
Используйте шрифт не менее 14 px для мобильных баннеров и не менее 24 px для десктопных. Проверяйте контрастность текста на фоне — она должна соответствовать стандартам WCAG AA (минимум 4.5:1).
3Оптимизация веса
Для фото используйте JPEG с качеством 80-85%. Для графики с текстом и ровными заливками — PNG-8 или PNG-24. Для веба предпочтительнее WEBP: он легче JPEG на 25-35% при сопоставимом качестве.
4Один баннер — одно действие
Эффективный баннер содержит один чёткий призыв к действию (CTA). Не перегружайте маленькие форматы (320x50, 300x250) избытком информации. Заголовок, изображение и кнопка — достаточный минимум.
5Экспорт для Retina
Для соцсетей готовьте изображения в указанном размере — платформы сами оптимизируют их. Для веб-баннеров экспортируйте в 2x (удвоенный размер) и используйте srcset, чтобы баннер выглядел чётко на Retina-экранах.
6Единый стиль
Создайте шаблон с фирменными цветами и шрифтами, который можно адаптировать под разные размеры. Используйте калькулятор соотношения сторон для правильного кропа.
Как пользоваться справочником
Найдите нужный размер баннера за несколько секунд.
Выберите платформу
Нажмите на название платформы (VK, YouTube, Яндекс Директ и др.) или оставьте «Все» для просмотра всех размеров.
Найдите нужный формат
Используйте поиск по названию (сторис, обложка) или по размеру (1080x1080). Фильтр работает мгновенно.
Изучите характеристики
Для каждого баннера указаны размер, соотношение сторон, допустимые форматы файлов и максимальный вес.
Откройте детали
Кликните на карточку для подробного превью с визуальным прямоугольником реальных пропорций и всеми характеристиками.
Часто задаваемые вопросы
Был ли этот калькулятор полезен?
Инструмент справочный — не заменяет эксперта
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Профессиональные решения — медицинские, финансовые, инженерные — должны приниматься только после консультации с квалифицированным специалистом. Не используйте автоматический расчёт как единственное основание для важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут ответственности за прямой или косвенный ущерб, возникший из-за использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию результатов.
Похожие калькуляторы
Генератор Cubic Bezier (CSS transition)
Интерактивный генератор кривых Безье для CSS анимаций. Визуальная настройка плавности переходов, пресеты (ease, linear) и копирование кода.
/cubic-bezierКалькулятор теории цвета: гармония, конвертер, палитры, смешивание, дальтонизм
Комплексный инструмент для работы с цветом: цветовые гармонии (комплементарная, аналогичная, триадная, тетрадная), конвертер HEX/RGB/HSL/HSV/CMYK, генератор палитр (монохроматическая, shades, tints, tones), смешивание цветов (аддитивное/субтрактивное), симулятор дальтонизма и анализ цветовой температуры.
/color-theory-calculatorКалькулятор градиентов и интерполяции цветов
Генератор плавных переходов между цветами. Создайте CSS градиент онлайн, получите коды цветов (HEX/RGB) и настройте количество шагов.
/color-gradientКалькулятор контрастности (WCAG), шрифтов и сетки
Инструменты UI/UX дизайнера. Проверка контрастности цветов (WCAG AA/AAA), расчет модульной сетки и подбор типографической шкалы.
/contrast-gridКалькулятор Responsive Margin/Padding (Clamp generator)
Генератор CSS функции clamp() для адаптивных отступов и шрифтов. Создайте отзывчивый дизайн (fluid spacing) от мобильных до десктопа онлайн.
/responsive-helperКалькулятор типографики: Type Scale, межстрочный, Fluid Typography
Комплексный типографический калькулятор. Модульная шкала (Type Scale), расчёт межстрочного интервала (line-height), оптимальная длина строки, вертикальный ритм (baseline grid), подбор пар шрифтов и Fluid Typography с CSS clamp().
/typography-calculatorКалькулятор PPI и DPI (плотность пикселей)
Рассчитайте PPI экрана, размер пикселя и физические размеры монитора/телефона. Конвертер пикселей в сантиметры.
/ppi-calculatorКалькулятор UX-метрик: SUS, NPS, HEART, A/B-тест, эвристики Нильсена
Комплексный калькулятор UX-метрик: System Usability Scale (SUS), Net Promoter Score (NPS), HEART framework Google, статистическая значимость A/B-тестов, эвристическая оценка Нильсена (10 эвристик), метрики выполнения задач (Task Success Rate, Efficiency).
/ux-metrics-calculatorКалькулятор CSS единиц (PX, REM, EM, %)
Конвертер пикселей в rem/em и генератор calc(). Удобный инструмент для верстки и адаптивного дизайна.
/css-unit-converterКалькулятор пропорций золотого сечения
Расчёт пропорций по золотому сечению (φ = 1.618). Визуализация золотого прямоугольника и спирали Фибоначчи.
/zolotoe-sechenieКонвертер типографских единиц
Конвертация между пунктами, мм, пикселями, em/rem. Типографская шкала, пика, цицеро, дюймы.
/konverter-tipografskih-edinicКонвертер цветовых пространств
Конвертация цветов между CMYK, RGB, HEX, HSL, HSV с визуальным предпросмотром. Цветовые гармонии и контрастность WCAG.
/konverter-cvetov-cmyk-rgb-hexКалькулятор соотношения сторон
Расчёт и пересчёт соотношения сторон изображения/видео. Определение ratio, пересчёт размеров, кроп.
/sootnoshenie-storonКалькулятор DPI и размера печати
Пересчёт пикселей в размер печати при заданном DPI. Форматы A4-A0, фотопечать, полиграфия.
/kalkulyator-dpi-pechatГенератор цветовых палитр
Подбор гармоничных цветовых сочетаний: комплементарные, аналогичные, триадные. Экспорт в CSS, Tailwind, SCSS.
/generator-cvetovyh-palitr