Subtract.svg

Group 488121.svg

Union.svg

Union (1).svg

Group 488455.svg

Недавно mail.ru начал вырезать пробельные символы при отображении начального текста письма до его открытия, что сломало эффект «короткого прехедера» — когда рядом с темой только тот текст, что мы задумали. Мы нашли решение.

Используйте следующий код:
```
<vk-snippet-end/>
```

Как использовать короткий прехедер в mail.ru

small_photo_2025-04-29_17-16-29.jpg

thumbnail_photo_2025-04-29_17-16-29.jpg

photo_2025-04-29_17-16-29.jpg

Как починить короткий прехедер в mail.ru

Microsoft Outlook и Gmail (в составе Google Workspace) уже много лет уверенно держат лидерство в сегменте корпоративных рассылок. Однако рынок не ограничивается только гигантами индустрии и предлагает множество иных решений, которые изначально могут не попасть в поле зрения, но определённо заслуживают внимания.

Одно из них — почтовый клиент [**Mozilla Thunderbird**](https://www.thunderbird.net/): его нередко выбирают как бесплатную альтернативу с открытым исходным кодом. В статье расскажем, что представляет собой этот клиент, какие преимущества он предлагает и какие особенности рендеринга писем встречаются в его десктопной и мобильной версиях.

## Что такое Thunderbird и в чём его преимущества

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

Впервые Thunderbird увидел свет в 2003 году и за более чем два десятилетия завоевал признание пользователей, в том числе в корпоративном секторе. Среди основных причин — доступность решения и политика компании.

**Открытый исходный код.** Mozilla Thunderbird представляет собой open-source-проект. Изменения в основной версии оцениваются и принимаются командой разработки. Но при этом исходный код клиента доступен публично: любой желающий может детально изучить, как именно он устроен, предложить улучшения или даже адаптировать код под собственные задачи. 

Почему это важно для бизнеса? Потому что в отличие от многих проприетарных решений, фактически представляющих собой «чёрный ящик», Thunderbird остаётся открытым для изучения и модификаций. Его поведение можно проверить на уровне кода — важный аспект для компаний с повышенными требованиями к безопасности и прозрачности.

**Свободное и безвозмездное распространение.** Thunderbird полностью бесплатен. Никаких подписок, платных лицензий, обязательного подключения к облачным серверам компании или ограничений по сценариям использования. Письма и настройки остаются под контролем пользователя: их можно хранить локально или на выбранном сервере.

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

Что касается **рендеринга писем**, то Thunderbird отображает HTML-рассылки на базе движка Gecko — того же, который лежит в основе Firefox. То есть, клиент использует знакомую для продуктов Mozilla логику разбора HTML и CSS, в целом корректно обрабатывая базовую структуру email-писем.

Вместе с тем Thunderbird остаётся почтовым клиентом, а не браузером. Письма рендерятся не как обычные веб-страницы, а часть CSS-свойств, медиа-запросов и поведенческих механизмов здесь работает с особенностями и ограничениями. Об этих тонкостях мы и поговорим далее. 

## Особенности рендеринга писем в Thunderbird

### Работа с max-width изображений

Одна из отличительных черт Thunderbird связана с обработкой изображений.

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

<Img
img="/api/uploads/01_upscl_fe0d1cb4bc.gif"
alt="Масштабирование изображения в Thunderbird"
/>

Чтобы реализовать такое поведение, Thunderbird добавляет правило: 

`max-width: 100% !important`

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

Рассмотрим простой пример:

`<img src="..." style="width: 100%; max-width: 30px;" />`

Здесь логика компонентов работает так: 

- `width: 100%` задаёт ширину как 100%; 
- `max-width: 30px` ограничивает максимальную ширину тридцатью пикселями. 

Вот только в Thunderbird добавленный стиль `max-width: 100% !important` перекрывает ограничение `max-width: 30px`. В результате изображение попросту игнорирует заданный предел и растягивается на всю доступную ширину контейнера.

По итогу получается, что графика в рассылке может выглядеть так:

<Img
img="/api/uploads/002_imgerr_f5b8340d4e.png"
alt="Растянутые изображения в Thunderbird"
/>

Хотя по изначальной задумке изображения в письме должны были отображаться иначе:

<Img
img="/api/uploads/03_imgintnd_993bdda96b.png"
alt="Как изображения должны были выглядеть изначально"
/>

Как с этим бороться? На самом деле, довольно легко. Достаточно использовать атрибут `width` вместо `max-width` для описания точного размера:

`<img src="..." style="width: 30px;" />`

В этом случае внутренняя логика Thunderbird не будет вмешиваться в расчёт, а `shrinktofit` не повлияет на ширину изображения.

### Поведение в тёмной теме

Как и большинство других почтовых клиентов, Thunderbird поддерживает [**тёмную тему**](https://pixcraft.io/ru/blog/tyomnaya-tema-kak-ona-ustroena-i-kak-s-nej-rabotat). Однако здесь её обработка происходит по собственным правилам. 

По стандартной логике (во многих других почтовых клиентах), в тёмной теме:

- светлые фоновые цвета перекрашиваются в тёмные, сохраняя при этом свой тон; 
- изначально тёмные цвета остаются неизменными. 

<Img
img="/api/uploads/04_lghtdrkthm_b40c54b4fd.png"
alt="Отображение цветов в светлой и тёмной теме"
/>

Thunderbird действует иначе: здесь атрибут `bgcolor` в тёмной теме вырезается. Фоновый цвет, заданный через CSS-свойство `background-color`, останется без изменений, но только если он достаточно тёмный. В противном случае он также будет удалён:

<Img
img="/api/uploads/05_lghtdrkthndr_89eac7310f.png"
alt="Отображение цветов в десктопном Thunderbird"
/>

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

Вот как это выглядит на практике. Светлая кнопка, хорошо заметная в светлом режиме, в тёмной теме едва различима:

<Img
img="/api/uploads/06_bttndark_a0d0c07af6.png"
alt="Визуально малозаметная кнопка в десктопном Thunderbird"
/>

В то же время кнопка с более тёмным фоном сохраняет заметность:

<Img
img="/api/uploads/07_bttnvisible_942b732564.png"
alt="Кнопка в более тёмном тоне в десктопном Thunderbird"
/>

Решением в этой ситуации может стать использование более тёмных заливок для кнопок или использование обводки (`border`). В Thunderbird она не перекрашивается и не удаляется, за счёт чего способна акцентировать кнопку:

<Img
img="/api/uploads/08_buttonbrdr_a576045b10.png"
alt="Кнопка с обводкой в десктопном Thunderbird"
/>

### Рендеринг цветов в мобильном приложении

Начиная с 2024 года Thunderbird также стал доступен в виде приложения для Android. При этом в части отображения цветов поведение мобильного клиента отличается от десктопного в лучшую сторону.

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

<Img
img="/api/uploads/09_colrndr_33ffacada5.png"
alt="Отображение цветов в мобильном Thunderbird"
/>

### Загрузка изображений и обрезка писем

И в десктопной, и в мобильной версиях Thunderbird загрузка внешних изображений по умолчанию отключена. Их можно отобразить в конкретном письме или включить загрузку внешнего контента в «Настройках». 

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

В мобильном Thunderbird есть и ещё одна особенность — рассылка не всегда загружается целиком при открытии. Сначала видно только заголовок и часть тела письма, а остальной контент загружается после нажатия по кнопке «Загрузить полностью».

Вот так будет выглядеть письмо без изображений и загруженное не до конца:

<Img
img="/api/uploads/10_loadmore_676fe9ffcf.jpg"
alt="Письмо без изображений с кнопкой «Загрузить полностью» в мобильном Thunderbird"
src="Скриншот письма Лемана ПРО используется исключительно для иллюстрации, в информационных и образовательных целях"
/>

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

## Заключение

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

Само собой, тонкости рендеринга требуют внимания на этапе разработки писем. Но это правило справедливо практически для всех почтовых клиентов. Поэтому не забывайте тестировать шаблоны писем до отправки, особенно если они рассчитаны на определённый почтовик.

Держать вёрстку шаблонов под контролем вам поможет наш конструктор писем Pixcraft, учитывающий тонкости различных email-клиентов. Убедитесь сами: [**зарегистрируйтесь сегодня**](https://app.pixcraft.io/user/register) и получите 14 дней бесплатно, чтобы опробовать его в деле.

Рассказываем о почтовом клиенте Mozilla Thunderbird: какие преимущества он предлагает для личного и корпоративного использования, а также на какие особенности клиента следует обратить внимание.

small_thundercov.png

thumbnail_thundercov.png

thundercov.png

Mozilla Thunderbird: почему он заслуживает внимания и как обрабатывает email-рассылки

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

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

## Что такое Retina-дисплеи и в чём их особенность

Термин «Retina» был представлен корпорацией Apple в 2010 году и поначалу относился только к дисплеям её собственных устройств. Но со временем он вышел за рамки продуктов компании и неформально стал обозначать все экраны с высоким значением DPR (Device Pixel Ratio).

DPR показывает, сколько физических пикселей экрана используется для отображения одного CSS-пикселя:

- на экране с DPR=1 один CSS-пиксель соответствует одному физическому; 
- на устройствах с DPR=2 одному CSS-пикселю соответствуют два физических по горизонтали и два по вертикали, то есть всего четыре пикселя; 
- на дисплеях с DPR=3 — уже девять физических пикселей на один CSS-пиксель.

Предположим, что растровое изображение с разрешением 450×300 px в макете письма отображается как 450×300 CSS-пикселей. На экране с DPR=2 такое изображение займёт 900×600 физических пикселей и из-за этого может визуально «размываться».

Со [**шрифтами**](https://pixcraft.io/ru/blog/tipografika-pisem-kak-sdelat-tekst-chitaemym) подобных проблем обычно не возникает. Глифы шрифтов описываются векторными контурами и при выводе переводятся в пиксели с учётом плотности экрана. Поэтому визуально текст остаётся качественным в том числе на дисплеях с высокой плотностью пикселей.

### Почему это важно для email-рассылок

В email-кампаниях читатели, как правило, первым делом обращают внимание на визуальную составляющую. Поэтому графика в письме играет не менее важную роль, чем [**адаптивность вёрстки**](https://pixcraft.io/ru/blog/adaptivnyj-design) и корректное отображение в разных почтовых клиентах.

Так, фирменные элементы бренда часто содержат тонкие линии, мелкую типографику или сложные графические детали. При отображении на экране с DPR=2 и выше дефекты масштабирования особенно заметны именно в подобных элементах. 

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

<Img
img="/api/uploads/01_notadapt_355f8cb4b3.png"
alt="Логотип, не адаптированный под дисплеи с высоким DPR"
/>

Для сравнения, ниже — адаптированное изображение, сохраняющее качество детализации при масштабировании:

<Img
img="/api/uploads/02_adapted_c648987822.png"
alt="Логотип, адаптированный под дисплеи с высоким DPR"
/>

Это относится не только к [**брендингу**](https://pixcraft.io/ru/blog/kak-ispolzovat-brending-v-email-shablonah-dlya-sozdaniya-uznavaemogo-stilya), но и ко всем остальным графическим компонентам письма. Если они выглядят размытыми или присутствует заметная пикселизация, то рассылка воспринимается как небрежная и плохо подготовленная.

## Как адаптировать изображения под высокий DPR

Действенный способ адаптации визуала в письмах — подготовка иллюстраций в увеличенном разрешении с последующим уменьшением размера отображения в HTML-коде. Это означает, что файл изображения содержит больше пикселей по ширине и высоте, чем размер, в котором он будет показан в письме.

Например, если отображаемый размер логотипа составляет 150×62 px, графический файл готовят в масштабе 300×124 px. При этом в коде обязательно фиксируют отображаемый размер через атрибуты `width` и `height`, чтобы почтовый клиент отрисовал изображение в нужных пределах:

```xml
<img src="logo2x.png" width="150" height="62" alt="Company logo" style="display:block; border:0;">
```

Такой логотип будет занимать всё те же 150×62 CSS-пикселя, но за счёт подготовки файла в увеличенном размере изображение сохранит визуальное качество на экранах с DPR=2.

Обычно бывает достаточно увеличения элемента в 2 раза относительно фактического размера: коэффициент закрывает большинство типовых сценариев для современных смартфонов, ноутбуков и планшетов. Теоретически возможно и увеличение в 3 раза, но в email-рассылках оно используется реже, так как при этом растёт и вес файлов.

## Что учитывать при адаптации изображений для писем

### Подбор нужного формата

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

- **PNG** — изображения со сжатием без потерь, за счёт чего сохраняются чёткие контуры и мелкие детали. PNG поддерживается [**большинством почтовых клиентов**](https://www.caniemail.com/features/image-png/), включая мобильные версии, и подходит в том числе для логотипов, иконок, интерфейсной графики и иллюстраций с прозрачным фоном. 
- **JPEG** — здесь размер файла уменьшается за счёт частичной потери данных изображения, а прозрачные фоны не поддерживаются. Формат подходит для фотографий и сложных иллюстраций с большим количеством цветов. 
- **GIF** — чаще всего используется для простой [**анимации**](https://pixcraft.io/ru/blog/animaciya-v-email-rassylkah-rekomendacii-dlya-stabilnogo-otobrazheniya): небольших анимированных баннеров, демонстрации интерфейса или коротких иллюстративных сцен. Формат поддерживает ограниченную палитру (до 256 цветов), поэтому не подходит для сложной графики.

Помимо этого в веб-разработке широко используется формат **SVG**. За счёт того, что он является векторным, формат не имеет проблем с чёткостью отображения при масштабировании. Однако в email-рассылках SVG практически не используется. Причина — низкий уровень поддержки: ни один популярный почтовый клиент (включая Gmail и Mail.ru) не отображает SVG-иллюстрации.

### Компромисс по размеру рассылки

Увеличение размеров изображений неизбежно влияет на вес письма. Чем больше графических элементов используется в рассылке, тем выше их суммарный объём, что сказывается на времени загрузки письма.

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

### Текст внутри изображений

Иногда текст может быть неотъемлемой частью изображения. Например, в баннерах его используют, чтобы подчеркнуть предложение, выделить акцию или обратить внимание на отдельные детали. В подобных случаях усиливается визуальный акцент, а письмо становится более выразительным.

Проблемы возникают, когда в изображениях размещается основной текст письма:

- Если графический файл подготовлен без учёта Retina-адаптации, текст внутри него может выглядеть размытым. 
- Подобный текст не перестраивается так же гибко, как обычный текст в письме. Масштабирование изображения часто приводит к невозможности его прочитать. 
- Возможны проблемы с тёмной темой: текст в изображении остаётся исходного цвета, в то время как фон и прочие элементы могут быть инвертированы. Таким образом можно получить нечитаемый тёмный текст на тёмном фоне.

Основную информацию, заголовки и текстовые блоки следует добавлять в письмо как обычный HTML-текст. Он корректно отображается на разных дисплеях и в разных почтовых клиентах, оставаясь доступным даже при отключённой загрузке изображений.

## Заключение

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

Корректно адаптировать шаблоны писем вам поможет наш [**плагин для Figma**](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-export-html-email-code-from-your-figma-design-responsive-outlook-gmail-ios). Он позволяет не просто выгрузить готовую вёрстку письма, но и автоматически адаптирует все изображения под Retina-экраны.

А если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io): там мы делимся полезными материалами, лайфхаками и идеями для работы.

В статье рассказываем про особенности адаптации писем под экраны с высокой плотностью пикселей: как это происходит и что следует принимать во внимание.

small_ret_cover.png

thumbnail_ret_cover.png

ret_cover.png

Вёрстка писем под Retina-дисплеи: как адаптировать и что при этом учитывать

В статье сравниваем конструкторы писем Pixcraft и TOPOL: в чём заключаются их подходы к созданию email-шаблонов и какие различия между двумя инструментами особенно заметны.

Заметки

Рекомендовано к прочтению в блоге