Меню

Как сделать адаптивный баннер для письма

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

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

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

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

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

Шаг 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 вы можете собрать такие баннеры за пару минут, используя встроенные модули и готовые шаблоны.

Советуем почитать