SVG или PNG для рекламы?

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

Подготовка материалов4 мин чтения

Храните логотипы и геометрическую графику в векторе, если есть настоящий векторный исходник. Готовую рекламу экспортируйте в формате, который принимает место публикации. Это отдельные решения: в редактируемом оригинале кампании может использоваться SVG-логотип, а рекламной платформе передаваться PNG.

Сохраняйте подходящий рабочий исходник

SVG описывает фигуры и может сохранять резкие края при масштабировании. PNG хранит фиксированную сетку пикселей и использует сжатие без потерь; он также может сохранять прозрачность. Спецификация PNG W3C определяет представление цвета и альфа-канала.

SVG может содержать фотографию как встроенное или внешнее растровое изображение, что описано в спецификации SVG для изображений. Фотография остаётся растровой. Помещение маленького PNG внутрь SVG не восстанавливает недостающие детали и не делает фотографию независимой от разрешения.

У одной увеличенной формы листа гладкий векторный контур, у другой — грубый ступенчатый растровый.

При подготовке исходников определите, что вы редактируете:

  • Логотип или линейную иллюстрацию: сохраняйте исходные контуры, не сводя их заранее в растр.
  • Фотографию или детально вырезанный объект: сохраняйте качественный растровый исходник с достаточным числом пикселей для кадра.
  • Готовую статичную рекламу: сохраняйте редактируемую композицию, затем экспортируйте в размерах, требуемых размещением.

SVG не обязательно меньше. Сложные контуры, фильтры и встроенные изображения могут весить больше растрового экспорта. Если размер важен, сравнивайте реальные файлы.

Проверьте конкретный способ загрузки

Прочитайте требования к точному типу объявления. Требования Google Ads к загружаемой медийной рекламе перечисляют GIF, JPG и PNG для загрузки графических объявлений. Правила HTML5-пакетов относятся к другому способу и отдельно рассматривают SVG внутри ZIP. Поддержка внутри HTML5 не означает, что отдельный SVG примут как графическое объявление.

Не переименовывайте SVG в .png; экспортируйте растровый файл. Для HTML5 до реализации проверьте допустимые ресурсы, упаковку и требования к аккаунту. Успешное открытие баннера в браузере не доказывает, что платформа примет пакет.

Используйте чек-лист медийной рекламы, чтобы проверить готовое объявление для размещения, вместо того чтобы считать один формат универсально допустимым.

Выберите формат для каждого материала

МатериалРабочий исходникРешение для передачи
Логотип или геометрическая иконкаУтверждённый векторный оригиналИспользуйте SVG там, где он поддерживается; при необходимости растрируйте из этого оригинала.
Фотография товараКачественный растровый оригиналСравните допустимые растровые форматы при итоговых кадрировании и размерах.
Вырезанный товар на прозрачном фонеРедактируемая маска и растровая копия с альфа-каналомСохраняйте прозрачность, только если её требуют место публикации и композиция.
Заголовок и предложениеРедактируемый текст с правильным шрифтомПроверьте итоговый рендеринг; векторный контейнер не предотвращает замену отсутствующего шрифта.
Готовая статичная рекламаРедактируемая композиция со связанными исходникамиЭкспортируйте всю рекламу в принимаемый формат загрузки.

Прозрачный PNG с одним логотипом может подойти для одной передачи и быть недостаточным единственным оригиналом для будущих крупных форматов. Сохраните исходник, не заставляя следующего дизайнера увеличивать копию поставки. Для краёв вырезанного объекта используйте руководство по прозрачности.

Уложите экспорт в ограничение по байтам

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

У тяжёлого PNG сначала проверьте соответствие размеров требованиям. Перед размещением отдельных материалов обрежьте пустой прозрачный холст, сохраняя обязательный холст готовой рекламы. Затем сравните варианты оптимизации на копии. Сокращение палитры может изменить градиенты и мягкую прозрачность; переход фотографии в допустимый JPEG может уменьшить вес, но убирает альфа-канал и использует сжатие с потерями.

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

Руководство по сжатию объясняет сравнение итогового файла в предполагаемом размере показа.

Проверьте файл, который будете загружать

Откройте итоговый файл поставки и проверьте:

  • Реальные формат, размеры и число байтов соответствуют требованиям размещения.
  • Логотип и текст совпадают с утверждённым оригиналом, без пропавших шрифтов и изменённых форм.
  • Фотографии сохраняют достаточно деталей в нужном размере.
  • Прозрачные края работают на фонах, где будут показаны.
  • Проверка загрузки или пакета на платформе принимает файл.

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

Все статьи