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

Что такое адаптивный баннер?

Адаптивный баннер — это изображение или блок, который:

  • масштабируется под ширину экрана,
  • не ломает макет письма,
  • быстро загружается.

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

Шаг 1. Определите правильный размер

Для email:

  • Ширина: максимум 600–650 px (это стандартная ширина большинства писем).
  • Высота: лучше до 300–400 px, чтобы баннер не «съедал» весь первый экран.

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

Шаг 2. Используйте правильный формат

  • PNG — если важна прозрачность.
  • JPEG — если нужны фото и меньше вес файла.
  • GIF — если хотите добавить анимацию.

⚠ Не используйте: SVG — они не везде поддерживаются в email.

Шаг 3. Добавьте alt-текст

Даже если изображение не загрузится, alt-текст объяснит, что должно быть на баннере.Это важно для доступности и для тех, кто блокирует загрузку картинок.

Шаг 4. Не вставляйте текст в изображение

❌ Текст на картинке не адаптируется, может стать нечитаемым на мобильных.✅ Лучше размещать текст как отдельный блок поверх или под баннером (в редакторе Letteros это можно сделать через слои или комбинированные блоки).

Шаг 5. Проверьте масштабирование

В редакторе:

  • установите ширину баннера в 100%,
  • задайте max-width — например, 600 px,
  • не задавайте фиксированную высоту (пусть масштабируется пропорционально).

Шаг 6. Оптимизируйте вес

  • Сжмите изображение (например, через TinyPNG), чтобы оно быстро загружалось.
  • Общий вес письма (со всеми изображениями) не должен превышать 150–200 КБ.

Шаг 7. Протестируйте

  • Проверьте предпросмотр в Letteros (десктоп + мобильный).
  • Отправьте тестовое письмо на разные устройства.
  • Убедитесь, что баннер не обрезается и не ломает макет.

Заключение

Адаптивный баннер — это не просто красивая картинка, а важный элемент, который должен быть:✔ лёгким,✔ информативным,✔ масштабируемым.

В Letteros вы можете собрать такие баннеры за пару минут, используя встроенные модули и готовые шаблоны.