Как правильно оформлять картинки в письме

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

Зачем нужны изображения в письмах?

1. Картинки усиливают эффект от емейла. Перед прочтением читатель выделяет образы, акцентируя на них внимание, только потом начинает читать, о чем сообщение. С помощью грамотно подобранных фото можно подчеркнуть главную идею месседжа и создать правильный образ.
2. Люди любят нажимать на изображения в письмах — так воспользуйтесь этим и сделайте их кликабельными.
3. Реклама товара работает лучше, если представлена в виде фотографий. Лучше один раз увидеть, чем 100 раз прочитать.
4. Картинки помогают сделать ваше письмо/бренд узнаваемым. Можно добавить корпоративные изображения, логотипы, фотографии автора емейла (клиенту будет приятно видеть, с кем он общается).
5. Чтобы узнать, прочитал ли подписчик письмо, размещайте картинки на нашем сервисе. Это позволит увидеть, когда и для какого сообщения человек загрузил картинки, а следовательно — открыл его.

Подводные камни оформления изображений в письмах:

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

Во-вторых, обращайте внимание на размер изображений в пикселях. Лучше всего, чтобы размер email-картинки был равен ширине письма. Часто бывает так, что фото с параметрами 2000×2000 пикселей сжимается до 200×200 пикселей. Фотография загружается медленнее и теряет в качестве.

Оптимальный размер картинки для email — 600×480 пикселей. Ширина в 600 пикселей корректно отобразится и на десктопе, и на экране мобильного устройства. Шире сделать можно, но читатели не любят использовать горизонтальный скролл.

Не используйте картинки 1×1 пикселей, которые иногда удобно использовать для заполнения пустого места. ни могут привести к попаданию в спам. Обойти эту проблему просто — используйте вместо этого изображение 10×10 пикселей :).

Формат картинки электронной почты

Чаще всего для электронных писем используют растровые и векторные изображения в форматах JPEG, PNG и GIF. Между ними есть определенные различия. Формат JPEG хорош для фотографий небольшого размера с гаммой более 256 цветов. Его минус — в потере качества при масштабировании. Кроме того, после сжатия на фото могут появиться артефакты (например, на красном фоне образуется белая “рябь”). JPEG не поддерживает анимацию, и он не годится для логотипов, т. к. у него непрозрачный фон.

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

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

GIF-файлы поддерживают прозрачность и сжимаются без потери качества. Подходят для текстовых изображений. Но они много весят, отображают только 256 цветов и не во всех почтовых клиентах корректно работают (полноценно не видны в Outlook 2007, 2010 и 2013). Подробнее об использовании GIF в рассылках читайте здесь.

Нюансы верстки емейла с изображениями

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

Названия блоков лучше делать текстовыми, чтобы они не исчезали при пересылке.

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

При создании email-рассылки не забудьте прописать Title фотографии. Его текст должен лаконично описывать, что изображено на фото. Это описание читатель увидит, если наведет на иллюстрацию курсор.

Линкуйте изображения. Если этого не сделать, то в Gmail при клике на картинку пользователь попросту скачает ее, а не перейдет на сайт.

Если картинки для письма находятся в одном блоке — проследите, чтобы они были одинаковыми по размеру и везде был ALT-текст.

Плохо:

Хорошо:

Что такое Aльт-текст и почему он так важен для email-рассылок?

Альтернативный текст (Alt text) — это фрагмент, который прописывается под изображение в письме. Атрибут Аlt особенно удобен, когда емейл состоит преимущественно из изображений — это помогает передать смысл фото, если оно не загрузилось. Он нужен, если:

• Почтовые клиенты блокируют изображения, из-за чего письма отображаются некорректно. 
• Человек использует программу для чтения емейлов вслух (прочтется именно Alt-текст).
• Вы хотите, чтобы почтовики не ругались на отсутствие этого параметра (в том числе по описанию Альтов система судит о содержимом сообщения).

Если фото не загружаются и нет альтернативного текста, то в письме клиенту может показаться просто белый лист или блок.

Когда подписчик видит в письме атрибут Alt — это сигнал, что ему нужно нажать «показать картинки»

Cоветы для написания Aльт-текста

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

Например, у вас есть несколько продуктов в письме. Не стоит называть каждую картинку "Карточка товара". Укажите его название или дайте краткое описание.

2. Не слишком вдавайтесь в подробности.

Указывайте в Alt-тексте только основную мысль. Например, если это огромная скидка на товар — так и напишите.

3. Указывайте Alt-текст при необходимости.

Если вы по каким-то причинам не хотите указывать альты - включайте пустой атрибут, который будет выглядеть так alt=””

Пример того, как выглядит подстановка аль-текста у в eSputnik.

Важные моменты при работе с альтернативным текстом:

1. Установить ALT текст для изображений в сообщении электронной почты очень просто — это стандартная часть синтаксиса HTML, в теге:

<img width="400" height="149" src="logo.jpg" alt="Текст">

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

2. Если сделать Alt очень описательным, подписчику не нужно будет кликать на «отобразить картинки»

3. Экспериментируйте с альтом, добавив немного встроенных CSS, чтобы изменить шрифт, цвет, размер и фон Alt-текста. Например, исходное изображение:

Если добавить стили, то получится так:

<img src=”logo.jpg” width=”400″ height=”149″ alt=”Текст” style=”font-family: Georgia; color: #697c52; font-style: italic; font-size: 30px;”>

• Gmail в Firefox:

• Gmail в Chrome:

4. Во всех почтовых клиентах, поддержка стилизованного Alt-текста зависит от используемого браузера. Например, он будет виден в Gmail в Firefox, а при просмотре Gmail в Internet Explorer — нет.

• Gmail в Internet Explorer:

• Gmail в Firefox

5. Alt-текст со ссылкой на изображение в некоторых почтовых клиентах может быть подчеркнутым или выделяться синим цветом. Yahoo! подчеркивает альт-текст, а Gmail подчеркивает текст и игнорирует указанные цвета, подставляя по умолчанию синий.

6. Во многих почтовых клиентах альтернативный текст исчезает, ​​как только размер или его длина превышает ширину и/или высоту изображения. Поэтому лучше придерживаться коротких описаний и небольшого шрифта.

Firefox:

Opera:

Chrome:

7. Если вы применяете стили к Alt-атрибутам, проверяйте, как ссылки будут отображаться в разных почтовых клиентах. «Фокусы со стилями» иногда улучшают внешний вид письма, но всегда учитывайте худший вариант, когда Alt будет показан обычным текстом вместо картинки.

Конечно, хорошо если читатели добавили вас в адресную книгу или выбрали «Всегда отображать картинки от …», но все же лучше перестраховаться и оформить письмо, придерживаясь этих простых советов. Не забывайте, что емейлы, перенасыщенные информацией и картинками, могут посчитать спамом, а нам ведь этого не нужно, правда?:)

До новой встречи в нашем блоге :)