Как оптимизировать изображения для email-писем в тёмном режиме: краткое руководство для начинающих
Более 40% современных пользователей читают email-письма на своём смартфоне, где всё чаще активирован тёмный режим или Dark Mode.
Dark Mode — это изменение цветов интерфейса мобильных приложений, при котором тёмный текст на белом фоне превращается в белый текст на чёрном фоне.
Чтобы ваша рассылка выглядела корректно при включённом тёмном режиме, важно её оптимизировать.
5 советов по оптимизации изображений в письме для Dark Mode
- Делайте все элементы карточки товаров в прозрачном фоне. В другом случае может быть так, что при включении ночного режима картинка товара останется на белом фоне, а его описание и кнопка станут чёрными. Визуально это будет выглядеть как несколько отдельных элементов, а не единая карточка продукта.
- Вставляйте светлую подложку для вашего логотипа, если он отрисован в тёмном цвете. Иначе лого сольётся с фоном и будет незаметным.
- Добавьте стили ночного режима для @media с помощью медиазапроса prefers-color-scheme: dark в раздел <style></style>. Это поможет оптимизировать ваше письмо для лучше совместимости с почтовыми сервисами.
- Применяйте светлые контуры или фоновые фигуры для outline иконок и изображений. Если вы используете в дизайне «незаполненные» элементы, для них необходимо сразу прописать светлую подложку или обводку. Это поможет избежать ситуации, когда элемент «растворился» в тёмном фоне самого электронного письма.
- Вместо GIF-файлов, выбирайте APNG (Animated Portable Network Graphics). Классические гифки плохо поддерживают прозрачность — белые контуры файла могут стать пикселизированными из‑за ограниченного цветового диапазона. Формат APNG в этом случае будет более надежным вариантом.
Оптимизируйте ваши рассылки под Dark Mode, чтобы проявить заботу о пользователях и повысить их лояльность к вашей компании.
