Баннер и графика в Wallet-карте должны выглядеть одинаково аккуратно на iPhone и Android, быстро загружаться и не мешать чтению ключевых полей. Поэтому вопрос о формате баннера карты в Wallet сводится не к одному расширению файла, а к набору требований: качество, прозрачность, вес, цвет, зона безопасности и проверка на реальных устройствах. Если эти параметры не зафиксировать заранее, карта может выглядеть нормально у разработчика и хуже - у клиента на кассе.

Какие форматы файлов подходят для баннера и графики

Для Wallet-карт чаще всего используют два варианта:

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

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

Если сомневаетесь, правило простое: логотип и элементы с прозрачностью - PNG, фоновые изображения без прозрачности - JPG.

Разрешение и четкость

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

Практичный подход:

готовить изображения в хорошем исходном качестве и затем оптимизировать вес
избегать масштабирования из маленького файла
проверять резкость на 100% масштабе перед экспортом

Отдельно важно учитывать, что часть пользователей увеличивает системный размер шрифтов. Из-за этого на карте меняется восприятие баланса, статуса и условий, а фон может начать мешать чтению. Поэтому фон должен быть спокойным и не конкурировать с текстом.

Прозрачность и подложки: что выбрать

Прозрачность полезна, когда:

логотип нужно размещать на фирменном фоне карты
вы хотите оставить ровный цвет фона, а поверх поставить графический элемент
важна чистая геометрия и аккуратные края

Но прозрачность не решает проблему читаемости. Если фон насыщенный, лучше добавить отдельную подложку под текстовые поля или выбрать более нейтральный фон. На практике читаемость дают не эффекты, а контраст.

Вес файла и скорость загрузки

Слишком тяжелые изображения могут:

замедлять открытие страницы добавления карты
увеличивать вероятность ошибки при добавлении
ухудшать опыт пользователя в мобильной сети

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

Что обычно помогает снизить вес без потери качества:

упрощение фона (меньше деталей)
аккуратная компрессия JPG для фонов
удаление лишней прозрачности и невидимых областей у PNG
экспорт под конкретный элемент

Цвет и контраст: как не испортить восприятие

Wallet-карта - это не баннер на сайте. Клиент открывает ее для действия, а не для просмотра. Поэтому фон и баннер должны поддерживать интерфейс, а не перетягивать внимание.

Рабочие принципы:

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

Если вы планируете темный фон, убедитесь, что текст и код остаются контрастными. Если фон светлый - проверьте, что белые элементы не теряются.

Зона безопасности: почему важные элементы не ставят у края

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

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

Как организовать тестирование, чтобы не было сюрпризов

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

Минимальный набор:

iPhone и Android (желательно не один, а два разных Android-устройства)
открытие ссылки из QR-кода и из сообщения (SMS или мессенджер)
просмотр карты в списке карт и на экране самой карты
проверка сканирования кода на вашей кассе/сканере
проверка обновления данных: изменили скидку/статус - увидели обновление в карте

Удобно вести короткий внутренний чеклист: кто тестировал, на каких устройствах, что исправили. Это снижает повторение одних и тех же ошибок при следующих публикациях.

Частые проблемы с изображениями и быстрые решения

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

Проблема: логотип выглядит размытым.
Решение: использовать исходник большего качества, экспортировать в PNG, проверить резкость до оптимизации.

Проблема: баннер выглядит по-разному на iPhone и Android.
Решение: убрать текст из баннера, увеличить безопасные поля, сделать более нейтральную композицию.

Проблема: карта добавляется медленно.
Решение: оптимизировать вес изображений, убрать лишние детали, проверить размер файлов.

FAQ

Какой формат баннера карты в Wallet выбрать, если нужен прозрачный фон?
Обычно используют PNG, потому что он поддерживает прозрачность и дает четкие края у логотипа и графики.

Можно ли использовать JPG для баннера?
Да, если баннер - это фон без прозрачности и вы хотите уменьшить вес файла. Для логотипов и тонких контуров JPG подходит хуже.

Стоит ли писать условия акции прямо на баннере?
Лучше не писать. Текст на изображении может обрезаться или стать нечитаемым на части устройств. Условия удобнее выводить отдельными полями карты.

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

Какая проверка самая важная перед публикацией?
Читаемость ключевых полей и стабильное сканирование кода на вашей кассе. Если эти два пункта выполнены, карта будет удобной в реальном использовании