Верстка писем с изображениями и текстом

Чтобы вставить картинку и текст в электронное письмо так, чтобы они отображались корректно во всех почтовых клиентах (Gmail, Outlook, Яндекс), используйте табличную верстку (<table>) и размещайте изображения на внешнем хостинге с доступом по HTTPS. Текст должен быть сверстан внутри ячеек таблицы рядом с тегом <img>, а все стили — прописаны инлайн (внутри атрибута style).

Ниже приведены проверенные методы компоновки, готовые фрагменты кода и правила, которые гарантируют, что ваше письмо не «поедет» у получателя.

Подготовка изображений и текста

Перед началом верстки убедитесь, что ваши ресурсы готовы к работе в среде email:

1. Хостинг картинок: Изображения должны лежать на публичном сервере. Ссылка должна начинаться с https://. Локальные пути (C:/images/...) или ссылки с корпоративных серверов без публичного доступа не отобразятся у большинства пользователей.
2. Форматы: Используйте JPG для фотографий и PNG для графики с прозрачностью. Избегайте тяжелых файлов (оптимально до 200 КБ).
3. Альтернативный текст: Всегда добавляйте атрибут alt="Описание". Если пользователь отключит загрузку картинок, он увидит этот текст.
4. Сброс отступов: У изображений в письмах часто появляются лишние отступы снизу. Чтобы убрать их, добавьте стиль display: block; к тегу <img>.

Методы расположения контента

Вариант 1: Картинка и текст в одну строку (две колонки)

Это самый популярный макет для баннеров, анонсов товаров или новостей. Реализуется через таблицу с двумя ячейками (<td>).

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; margin: 0 auto;">
  <tr>
    <!-- Ячейка с картинкой -->
    <td width="50%" valign="top" style="padding-right: 15px;">
      <img src="https://example.com/image.jpg" alt="Описание картинки" width="280" style="display: block; width: 100%; max-width: 280px; height: auto; border: 0;">
    </td>
    <!-- Ячейка с текстом -->
    <td width="50%" valign="top" style="font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #333333;">
      <h3 style="margin: 0 0 10px; font-size: 18px; color: #000000;">Заголовок новости</h3>
      <p style="margin: 0;">Краткое описание события или товара. Текст выровнен по левому краю и легко читается.</p>
      <p style="margin: 15px 0 0;"><a href="https://example.com" style="color: #007bff; text-decoration: underline;">Читать далее →</a></p>
    </td>
  </tr>
</table>

Вариант 2: Картинка сверху, текст снизу

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

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; margin: 0 auto; background-color: #ffffff;">
  <tr>
    <td style="padding: 20px;">
      <!-- Картинка -->
      <img src="https://example.com/banner.jpg" alt="Баннер" width="560" style="display: block; width: 100%; max-width: 560px; height: auto; border-radius: 4px;">
      
      <!-- Текст -->
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="padding-top: 20px; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #333333;">
            <h2 style="margin: 0 0 15px; font-size: 22px;">Приветствуем вас!</h2>
            <p style="margin: 0 0 15px;">Здесь располагается основной текст вашего сообщения. Благодаря отдельной таблице под картинкой, текст всегда будет ровно под изображением, независимо от настроек клиента.</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Вариант 3: Картинка как ссылка (кликабельное изображение)

Частая задача в маркетинге — сделать так, чтобы клик по картинке вел на сайт.

<a href="https://example.com/landing-page" target="_blank" style="text-decoration: none; border: 0;">
  <img src="https://example.com/clickable-image.jpg" alt="Перейти на сайт" width="600" style="display: block; width: 100%; max-width: 600px; height: auto; border: 0;">
</a>

Технические требования к стилям

Для стабильного отображения придерживайтесь следующих правил при написании кода:

Частые ошибки при верстке

1. Использование float и position: Эти свойства CSS в почте не работают или работают непредсказуемо. Используйте только таблицы и valign.
2. Отсутствие ширины у картинок: Если не задать width в атрибуте тега и в стилях, картинка может отобразиться в оригинальном огромном размере, сломав верстку.
3. Сложные селекторы: Конструкции вроде div p span игнорируются. Пишите стили конкретно для каждого элемента.
4. Игнорирование темной темы: Некоторые клиенты автоматически инвертируют цвета. Проверяйте, как выглядит ваш текст на инвертированном фоне, или фиксируйте цвета фона и текста явно.

FAQ

Почему в Outlook моя картинка сдвигается или появляется рамка? Outlook использует движок рендеринга Word. Он часто добавляет рамки к ссылкам-картинкам. Решение: добавьте border="0" к тегу <img> и style="border:0; outline:none;". Для выравнивания используйте атрибут align у самой таблицы или ячейки.

Можно ли использовать GIF-анимацию? Да, большинство современных клиентов поддерживают анимированные GIF. Однако Outlook (десктопный) покажет только первый кадр анимации. Учитывайте это: первый кадр должен нести смысл или быть статичным заголовком.

Как сделать адаптивное письмо без медиа-запросов? Используйте «гибридную» верстку: задавайте максимальную ширину контейнерам, а внутри используйте проценты (width="100%") и max-width в стилях. Для многоколоночных макетов без @media часто приходится создавать две версии структуры: одну для десктопа (колонки рядом), другую для мобайла (колонки друг под другом), и скрывать ненужную через display: none (что тоже работает не идеально без медиа-запросов). Самый простой путь — одноколоночная верстка, которая хорошо смотрится везде.