Как сделать ресайзы баннеров: полное руководство для рекламы

Что такое ресайзы баннеров и зачем они нужны?

Ресайзы баннеров — это процесс адаптации одного рекламного макета под разные форматы и размеры для различных площадок и устройств. Один мастер-баннер превращается в 10–30 версий, каждая из которых идеально вписывается в конкретный плейсмент: десктоп, мобайл, соцсети, РСЯ, маркетплейс.

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

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

Для бизнеса это критично: запуская рекламную кампанию одновременно в РСЯ, VK Рекламе, на Wildberries и в Telegram Ads, вы работаете минимум с 10–15 различными форматами. Делать каждый баннер с нуля — расточительно. Именно поэтому профессионалы создают один качественный мастер-макет, а затем делают ресайзы.

Типовые баннеры — это одно дизайн-решение на нескольких макетах. Речь не про схожий дизайн или визуал. Это буквально одинаковые картинки, на которых меняются элементы или у которых разное соотношение сторон, что требуется для разных рекламных систем, плейсментов и устройств.

Какие размеры баннеров актуальны для разных платформ?

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

Яндекс Директ и РСЯ

Основные размеры баннеров для РСЯ: 240×400, 300×250, 300×600, 336×280, 300×500, 970×250, 640×100, 640×200, 640×960, 960×640 пикселей.

Главная рекомендация Директа относительно изображений заключается в том, чтобы использовать 2 формата: стандартное и широкоформатное изображения. В первом случае соотношение сторон будет 1:1, 4:3 либо 3:4, а во втором — 16:9. Когда в объявлении есть оба формата, оно может показываться на большем количестве площадок, а значит, охватит больше аудитории.

Яндекс рекомендует добавлять баннеры в двукратном или трёхкратном размере — не 240×400, например, а 480×800 или 720×1200 пикселей.

IAB-стандарты: универсальные форматы

728×90 (Leaderboard) — классический «полноразмерный баннер», размещается в шапке сайта или встраивается в контент. Показывает высокую видимость (70–80%) и остаётся одним из самых популярных форматов.

Рекомендуемые размеры баннеров, которые будут одинаково хорошо смотреться как на мобильных, так и на десктопных версиях сайта, — 300×600 и 300×250 пикселей.

Wildberries: баннеры на маркетплейсе

Размер макета для Wildberries: 512×328 px. На макете должна быть пометка «Реклама», а также данные рекламодателя — наименование юридического лица и ИНН. Минимальный размер шрифта — 11 pt.

Отступ от нижнего края должен быть не менее 28 px для веб- и мобильной версий, и 16 px для мобильных приложений.

Социальные сети

Для поста с изображением в Facebook оптимальный размер — 1200×675 пикселей с соотношением сторон 16:9. Это стандартный формат для большинства новостей и продуктов.

На LinkedIn рекомендуются следующие размеры: профильные фото — 400×400 пикселей, фоновые/баннерные изображения — 1584×396 пикселей.

Как правильно подготовить исходный макет для ресайза?

Правильная подготовка мастер-баннера — залог быстрого и качественного ресайза. Если исходный макет собран хаотично, каждый ресайз будет болью.

Ключевые принципы подготовки мастер-макета:

1. Работайте в векторе или с высоким разрешением. Исходный файл должен быть достаточно крупным, чтобы при масштабировании не потерять качество. Минимально рекомендуемое разрешение — 1600 px по длинной стороне при 72 ppi для цифровых баннеров.
2. Разделяйте слои логично. Фон, изображение продукта, текстовые блоки, CTA-кнопка, логотип — каждый элемент на отдельном слое или в отдельной группе.
3. Используйте компоненты (в Figma) или смарт-объекты (в Photoshop). Это позволяет менять содержимое сразу во всех ресайзах.
4. Соблюдайте safe zone. Критически важные элементы (логотип, текст, CTA) должны находиться в «безопасной зоне» — отступ минимум 10% от края по каждой стороне.
5. Не перегружайте текстом. Для VK Рекламы в гайдах часто встречается ориентир, что текст не должен занимать слишком большую площадь изображения — например, до 20%.
6. Проверьте требования к файлу заранее. JPG — для фото и простых баннеров; PNG — когда нужна прозрачность или мелкие детали; WEBP — когда важен вес и качество.

Если вы делаете креатив «умно» — вы сначала выбираете пропорцию, а уже потом решаете, в каком разрешении экспортировать. Это сэкономит часы работы.

Как сделать ресайзы баннеров в Figma?

Figma — оптимальный инструмент для профессионального ресайза баннеров. Благодаря системе компонентов изменение мастер-макета мгновенно отражается на всех ресайзах.

Проще всего делать ресайзы в Figma — там можно настроить мастер-компонент для одновременного изменения множества макетов.

Пошаговый процесс ресайза в Figma:

1. Создайте мастер-компоненты. Выделите ключевые элементы баннера (заголовок, изображение, кнопка, фон, логотип) и нажмите Ctrl+Alt+K (Cmd+Option+K на Mac) — каждый станет мастер-компонентом.
2. Соберите главный баннер. Разместите все компоненты на фрейме нужного размера. Это будет ваш «родительский» макет.
3. Настройте Constraints. В правой панели найдите раздел Constraints. Здесь можно указать, как элемент должен себя вести, если изменить размер фрейма: Left & Top — элемент привязан к левому верхнему углу; Center — элемент остаётся по центру.
4. Скопируйте фрейм и измените его размер под новый формат.
5. Откорректируйте расположение элементов — при смене пропорций некоторые блоки придётся перекомпоновать вручную.
6. Экспортируйте. Выделите все фреймы, в правой панели перейдите в Export и выберите нужный формат (PNG, JPG, WEBP).

В левом меню нужно выбрать родительский компонент — и все изменения, применённые к нему, будут применяться и к дочерним. Например, если заменить логотип, то он изменится во всех ресайзах. То же самое с текстом — достаточно изменить его в родительском компоненте, и он изменится на всех баннерах.

Помимо времени на создание основного креатива, на ресайзы уходит 1–1,5 часа. Специалисты работают в Figma и, чтобы сократить это время, создают шаблон заранее.

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

Как сделать ресайз баннера в Photoshop?

Photoshop подходит для ресайза, когда исходный макет уже существует в формате PSD или когда нужна глубокая работа с растровыми изображениями и ретушью.

Чтобы изменить размер изображения в Photoshop, нужно открыть фото, выбрать меню «Изображение» и «Размер изображения», затем ввести новые параметры ширины и высоты и получить желаемый результат.

Пошаговый процесс ресайза в Photoshop:

1. Откройте исходный PSD-файл баннера.
2. Перейдите в меню Изображение → Размер холста (не «Размер изображения»), чтобы изменить формат без деформации контента.
3. Задайте новые значения ширины и высоты в пикселях.
4. Перекомпонуйте элементы: при изменении соотношения сторон (например, с горизонтального 728×90 на вертикальный 300×600) расположение объектов нужно перестроить вручную.
5. Используйте смарт-объекты для логотипов и ключевых изображений — они сохраняют качество при любом масштабировании.
6. Сохраните через Файл → Экспортировать → Экспорт для веб — там можно точно контролировать вес файла и качество.

Как правило, ширины 1600 px и высоты 440 px достаточно для большинства случаев. Стандартное разрешение — 72 ppi (pixel per inch) вместе с цветовым режимом RGB.

Для массового ресайза (20+ форматов) Photoshop уступает Figma по скорости: работа с Figma требует меньше места в памяти, чем с Photoshop, и это ускоряет процессы.

Какие онлайн-инструменты помогут сделать ресайз быстро?

Для маркетологов и предпринимателей без дизайнерских навыков существуют онлайн-сервисы, позволяющие сделать ресайз в несколько кликов.

Canva

Научиться работать в Canva можно за 10–15 минут благодаря понятному интерфейсу. Регистрация требует 30 секунд, шаблоны разделены на блоки: «Презентация», «Анимация», «Публикация» и подобное. В платной версии Canva Pro есть функция Magic Resize — автоматическая адаптация дизайна под любой формат одним кликом.

Специализированные баннерные редакторы

Получить профессиональный креатив для рекламы реально без дизайнера — в конструкторах Supa и Bannero можно создать эффективные графические объявления, видеоролики и HTML5-баннеры самостоятельно по настроенным шаблонам.

AI-инструменты для ресайза

Создайте один баннер-дизайн и позвольте AI-ресайзеру адаптировать его для каждой платформы. Вместо того чтобы создавать десятки разных версий вручную, просто загрузите оригинальный баннер и укажите назначение. Инструмент может адаптировать баннер под рекомендуемые размеры для обложек Facebook, YouTube, заголовков LinkedIn, изображений-героев для сайтов и различных форматов онлайн-рекламы.

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

Сравнительная таблица инструментов

Как организовать массовый ресайз: от 10 до 1000 баннеров?

При работе с большими объёмами ресайзов важна система, иначе процесс превращается в хаос.

Создать 10 рекламных баннеров в месяц — не проблема, но как быть бизнесам, которым требуется от 100 до 1000+ типовых баннеров? Особенно часто такой объём креативов нужен при запуске мобильной рекламы.

Процедурный подход к массовому ресайзу:

1. Определите полный список форматов заранее — до начала разработки мастер-баннера. Составьте таблицу всех нужных площадок и их требований.
2. Создайте библиотеку компонентов в Figma: отдельные компоненты для фона, изображения продукта, заголовка, подзаголовка, кнопки CTA и логотипа.
3. Разработайте мастер-баннер в самом крупном формате (обычно 1080×1080 или 1200×628).
4. Скопируйте фреймы и масштабируйте под каждый нужный размер.
5. Перекомпонуйте элементы в каждом ресайзе с учётом новых пропорций.
6. Используйте родительские компоненты для правок — изменение в одном месте распространится на все ресайзы.
7. Пакетный экспорт — выделите все фреймы и выгрузите их разом.

Для мобильной рекламы часто нужны ресайзы одного баннера. И в месяц таких ресайзов может быть несколько десятков или даже сотен.

Онлайн-инструмент для изменения размеров изображений автоматизирует весь этот процесс. То, что раньше занимало полчаса, теперь делается меньше чем за минуту.

Какой формат файла выбрать для баннера: JPG, PNG или WEBP?

Выбор формата напрямую влияет на качество отображения и скорость загрузки рекламы.

Используйте JPG для фотографий и изображений со сложными цветовыми градиентами — он обеспечивает отличное сжатие. Используйте PNG для графики, содержащей текст, логотипы или требующей прозрачный фон. PNG-файлы «без потерь», но часто имеют больший размер.

Практические рекомендации по форматам:

• JPG — фотобаннеры, сложные фоновые изображения, баннеры без прозрачности. Вес: 50–300 КБ в зависимости от сжатия.
• PNG — баннеры с логотипом, текстом, прозрачными элементами. Вес обычно выше.
• WEBP — современный формат с лучшим соотношением качества и веса, подходит когда важен вес и качество и платформа корректно поддерживает его.
• GIF — анимированные баннеры. Если используется GIF-анимация, частота смены кадров не должна быть слишком большой и вызывать эффект «мигания».
• HTML5 (ZIP) — интерактивные и анимированные баннеры для РСЯ и медийных сетей. Формат HTML5-баннера — ZIP-архив, содержащий один HTML-файл и файлы JavaScript, JSON, CSS, JPEG, GIF, PNG, SVG.

Ограничения по весу файлов:

• Яндекс Директ (графические объявления): до 10 МБ.
• VK Реклама: для изображений часто фигурирует ограничение до 5 МБ.
• YouTube-баннер: файл не должен превышать 6 МБ.

Типичные ошибки при ресайзе баннеров и как их избежать

Даже опытные дизайнеры допускают ошибки при ресайзах. Знание типичных проблем экономит время на переделки.

Ошибка 1: Масштабирование вместо перекомпоновки Простое растягивание или сжатие баннера деформирует все элементы. Правильный подход — изменить размер холста, затем перераспределить элементы внутри нового формата.

Ошибка 2: Игнорирование safe zone Не размещайте важный контент в зоне у края, чтобы не перекрыть его плашкой. Каждая платформа имеет свои защитные зоны для UI-элементов.

Ошибка 3: Нечитаемый текст на маленьких форматах Заголовок, отлично читаемый на 970×250, может стать нечитаемым на 300×250. Всегда проверяйте читаемость текста в каждом ресайзе отдельно.

Ошибка 4: Нарушение требований модерации Когда изображение не соответствует требованиям платформы, оно может быть обрезано, деформировано или вообще не пройти модерацию.

Ошибка 5: Работа с низким разрешением исходника Если мастер-баннер создан в маленьком размере, при увеличении до крупных форматов (970×250 или 1200×628) изображение «замылится». Начинайте всегда с наибольшего нужного размера.

Ошибка 6: Отсутствие пометки «Реклама» Размер шрифта для пометки «Реклама» и данных рекламодателя должен быть не менее 11 px. На макете должна быть пометка «Реклама», а также данные рекламодателя — наименование юрлица и ИНН. Это требование закона о рекламе, нарушение которого ведёт к отклонению на модерации.

Ошибка 7: Создание ресайзов в разных файлах Работайте со всеми ресайзами в одном Figma-файле. Это упрощает правки и обеспечивает консистентность бренда.

Как правильно передать ресайзы дизайнеру или заказать у фрилансера?

Если вы заказываете ресайзы на аутсорсе, правильно составленное ТЗ сэкономит время и деньги обеих сторон.

Что включить в техническое задание на ресайзы:

1. Исходный файл — предоставьте Figma-ссылку, PSD или AI с разбитыми слоями.
2. Список форматов — точные размеры в пикселях для каждой платформы.
3. Требования площадок — ограничения по весу файла, доле текста, наличию пометки «Реклама».
4. Брендбук или гайдлайн — шрифты, цвета, допустимые отступы.
5. Формат финального файла — JPG, PNG, WEBP, исходник PSD/Figma.
6. Сроки — укажите дедлайн с запасом, так как правки могут занять дополнительное время.

Над созданием объявлений обычно работают как минимум два человека — маркетолог, который продумывает концепцию визуала, и дизайнер, который готовит изображения.

На фрилансе стоимость одного ресайза варьируется от нескольких сотен до 1 500–3 000 рублей за штуку в зависимости от сложности. Пакет из 10 ресайзов обычно обходится дешевле поштучного заказа на 20–40%.

Как автоматизировать создание ресайзов и сократить время в 3 раза?

Автоматизация — главный резерв экономии при работе с большими объёмами баннеров.

Способы автоматизации ресайзов:

1. Шаблоны с мастер-компонентами в Figma Автоматизировать подготовку и сэкономить ресурсы помогут шаблоны для ресайза. Можно скачать готовый или создать свой, если должны получиться разные по стилю баннеры.

2. Плагины для Figma Плагины для Figma могут упростить процесс ресайза баннеров и частично автоматизировать его. Популярные плагины: Bannerify, Superposition, Design Tokenizer — они позволяют создавать десятки форматов из одного мастера одним действием.

3. AI-ресайзеры Сохраняйте часы ручной работы, редактируя более 20 вариантов размеров баннеров за один раз. Добавляйте или заменяйте любые элементы дизайна: фоны, изображения, цвета или текст. Изменения, внесённые в один дизайн, автоматически отображаются на всём пакете размеров баннеров в реальном времени.

4. Специализированные сервисы В конструкторах Supa и Bannero можно создать эффективные графические объявления, видеоролики и HTML5-баннеры самостоятельно по настроенным шаблонам.

5. Пакетный экспорт В Figma функция «Export» позволяет выгрузить все выделенные фреймы разом с нужными настройками. Нужно добавить все картинки в программу, выделить их и на панели справа перейти в пункт Export.

Чек-лист перед отправкой ресайзов на модерацию

Перед загрузкой готовых ресайзов в рекламный кабинет обязательно проверьте каждый баннер по следующим пунктам:

• ✅ Размер в пикселях соответствует требованиям площадки
• ✅ Вес файла не превышает лимит (10 МБ для Директ, 5 МБ для VK)
• ✅ Формат файла поддерживается платформой (JPG/PNG/WEBP/GIF)
• ✅ Текст занимает не более 20% площади баннера
• ✅ Минимальный размер шрифта — 11 pt (обязательно для маркировки)
• ✅ Присутствует пометка «Реклама» с ИНН рекламодателя
• ✅ Ключевые элементы находятся в safe zone
• ✅ Логотип читается на всех форматах
• ✅ CTA-кнопка заметна и читаема
• ✅ Цвет рамки не совпадает с фоном (требование для ряда форматов)
• ✅ Анимация (если есть) не превышает допустимую длину и не мигает
• ✅ Разрешение достаточное: нет «мыла» и пикселизации

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

Часто задаваемые вопросы

Что такое ресайз баннера простыми словами?

Ресайз изображений — это процесс изменения размеров макета по заданным параметрам. Например, можно увеличить или уменьшить размер объекта с сохранением пропорций либо изменить и размер, и композицию. В контексте рекламы ресайз — адаптация одного баннера под 10–30 форматов разных платформ без потери качества и бренда.

Сколько форматов нужно делать для рекламной кампании?

Для базовой кампании в Яндекс Директ (РСЯ) достаточно 5–7 форматов: 300×250, 300×600, 728×90, 320×50, 640×200, 240×400 и 970×250. Для мультиканальной кампании (РСЯ + VK + Telegram + маркетплейсы) потребуется 15–25 форматов.

Можно ли сделать ресайз баннера бесплатно?

Да. Это веб-сайты, на которые можно загружать изображения и менять размер прямо в браузере. Это удобно, так как не нужно устанавливать специальные программы. Например, TinyPNG или ResizeImage.net — туда можно загрузить фотографию, выбрать параметры и получить изображение нужного размера. Также бесплатный базовый функционал есть в Canva и Figma.

Как избежать потери качества при ресайзе?

Начинайте всегда с исходника максимального размера. Заблокируйте соотношение сторон для предотвращения деформации при изменении размеров. Используйте «шкалу изображения» для идеальной подгонки объекта в новые размеры, чтобы никакие важные детали не обрезались. Для логотипов и иконок используйте SVG или смарт-объекты.

Нужно ли указывать «Реклама» на каждом ресайзе?

Да, это требование российского законодательства. Размер шрифта для пометки «Реклама» и данных рекламодателя должен быть не менее 11 px. Отсутствие маркировки приведёт к отклонению баннера на модерации и штрафным санкциям.

Чем ресайз отличается от кропа (кадрирования)?

Ресайз изменяет общее количество пикселей в изображении для получения новых размеров. Кроп отрезает части изображения для изменения его размера или композиции. Масштабирование изменяет размер изображения с сохранением исходного соотношения сторон. При ресайзе баннера чаще всего нужна комбинация всех трёх операций.

Как быстро делаются ресайзы профессиональным дизайнером?

Помимо времени на создание основного креатива, на ресайзы уходит 1–1,5 часа. При наличии готового шаблона с компонентами опытный дизайнер создаёт 10–15 форматов за 30–45 минут. Без шаблона и при сложной композиции — 3–6 часов на полный комплект.