Как сделать адаптивный баннер для письма
Баннер — это первое, что видит человек, открывая письмо.
Он может сразу зацепить внимание или… испортить впечатление, если выглядит плохо на телефоне.
В этой статье расскажем, как создать адаптивный баннер для письма, который будет красиво смотреться и на десктопе, и на мобильных.
Что такое адаптивный баннер?
Адаптивный баннер — это изображение или блок, который:
- масштабируется под ширину экрана,
- не ломает макет письма,
- быстро загружается.
Важно: если просто вставить большую картинку, она может обрезаться или не подстраиваться под маленький экран.
Шаг 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 вы можете собрать такие баннеры за пару минут, используя встроенные модули и готовые шаблоны.