Pull to refresh
0

Верстка e-mail рассылок — «подводные камни». Часть первая. Картинки

Reading time 5 min
Views 108K
Верстка e-mail рассылок. Часть первая. Картинки.Добрый день, уважаемые хабравчане!
Не так давно мы вплотную столкнулись с задачей верстки e-mail рассылок. Это не самое приятное занятие, но многие компании активно используют корпоративные рассылки, и верстка становится всё более актуальной задачей.

Казалось бы, что сложного — сверстать простую страничку? Но есть «подводные камни», которые могут поставить в тупик даже опытного верстальщика. Именно таким «камням» и посвящен пост (оговоримся сразу — все эксперименты, описанные в посте, проводились под Windows с тем ПО, которое есть у многих под рукой).

Первый камень — Изображения


Практически каждая рассылка содержит картинки. Логотип, шапка, фотографии, иконки соц.сетей…
Есть 2 способа использования картинок:

1. Подгрузка с сервера

Плюсы:
  • Небольшой вес письма;
  • Все почтовые программы «понимают» такое использование картинок и в состоянии подгружать их из указанного места.

Минусы:
  • В крупных бюрократических компаниях зачастую нет возможности оперативно выделить место на сервере для выкладки картинок, а размещение картинок на стороннем сервере для таких компаний неприемлемо. В этом случае подгрузка картинок с сервера в принципе невозможна.
  • Политики клиентов могут запрещать подгрузку графики. Например, в почтовых программах Windows Live Mail, Outlook Express, Outlook 2007 подгрузка картинок по умолчанию не осуществляется. Картинки подгружаются только если пользователь вручную разрешит выполнить это действие, либо если он (опять же вручную) настроит программу на автоматическую подгрузку изображений. В других почтовых программах блокировка подгрузки графики может быть настроена у пользователя вручную намеренно.

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


2. Прикрепление картинок непосредственно к письму

Первое, о чем стоит сказать — как именно добиться прикрепления картинок к письму. При просмотре html-кода писем с прикрепленными картинками, можно увидеть, что пути всех внедренных картинок задаются через специальный идентификатор cid.
Стандарт MIME, описывающий передачу данных посредством электронной почты, определяет в частности механизм передачи нетекстового контента (такого, как картинки). «MIME определяет набор e-mail-заголовков для определения дополнительных атрибутов сообщения». Одним из таких заголовоков является «Content-ID». Content-ID — это уникальный идентификатор части сообщения. Значение идентификатора указывается в угловых скобках после заголовка:
Content-ID: <1.23.44455.9874563210@test.example>
Основное условие формирования Content-ID — это уникальность, одна из конвенций, которая была принята относительно формирования Content-ID — использование символа «@» и указание имени хоста компьютера справа от него, слева же от знака должен стоять идентификатор уникальный для данного компьютера.


При использовании картинок в теле писем (тэг img) в ссылке на картинку (параметр «src») указывается нужный идентификатор с использованием URI-схемы «cid», синтаксис идентификатора отличается от Content-ID отсутствием угловых скобок:
cid: 1.23.44455.9874563210@test.example

Помимо заголовков, стандарт MIME определяет схему преобразования данных для передачи посредством e-mail — это схема base64. Любое изображение, которое передается в теле письма, сначала преобразуется в формат base64.

Таким образом для того, чтобы вручную сформировать письмо с прикрепленными картинками, нужно переконвертировать картинки в base64, прописать заголовки Content-ID, и для всех изображений в параметре «src» прописать URI-схему с нужным идентификатором.

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

Остается только определить, в каких почтовых программах можно использовать html-файлы в качестве шаблонов сообщений.

В Outlook Express такая возможность есть и описана во многих источниках («Сообщение — Создать с использованием — Выбор бланка...» ). А вот в более современном аналоге — Windows Live Mail специальной опции нет, как нет её и в Outlook 2007. Однако здравый смысл подсказал, что возможность где-то быть должна, и она обнаружилась. Чтобы использовать html-шаблоны в этих программах нужно из папки, в которой располагается сверстанное письмо, перетащить мышкой html-файл письма на папку «Входящие» в программе — письмо автоматически сформируется по шаблону. При этом, если в письме используются картинки, которые лежат где-то на компьютере, и к ним прописаны абсолютные пути — картинки автоматически приаттачиваются к письму, а пути автоматически меняются на идентификаторы ресурса «cid» ":" content-id.
Важный момент — должны быть прописаны именно абсолютные пути. Пример: картинка header.jpg лежит в y:\temp\рассылка\ вместе с html-файлом письма. Если к картинке прописан путь
src=«y:\temp\рассылка\header.jpg» или
src=«file:///Y:/temp/рассылка/header.jpg» — картинка подгрузится. Если прописать просто
src=«header.jpg» — увы, ничего не выйдет.


Общие плюсы:
Картинки отображаются во всех почтовых программах. Даже если в настройках программы отключена автоматическая подгрузка графики, «внедренные» картинки будут отображаться (подгружать их не надо);
Не требуется оперативно искать место для размещения картинок (как говорилось выше, для крупных бюрократических компаний такой поиск может быть весьма проблематичным).
Общий минус:
Письмо будет весить больше — каждому адресату придет письмо с полным набором картинок.

Сравнение программ Windows Live Mail, Outlook Express, Outlook 2007 с точки зрения использования HTML-шаблонов


Оригинальный макет

Оригинальный макет

Windows Live Mail

Минусы:
  • Все картинки, которые используются в рассылке, будут прикреплены к письму в качестве аттачей, и это важный момент: даже если 100 раз используется одна и та же картинка (spacer, например) — к письму приаттачатся 100 одинаковых картинок (!!!);
  • При использовании gif-ов с прозрачностью, в некоторых почтовых программах могут возникнуть проблемы с отображением. Например, в программе TheBat! вместо прозрачности проявится черный цвет;
  • Картинкам в jpg добавятся «тени» — то есть фактически картинки портятся. В TheBat! испорченные картинки отображаются с сильными искажениями.

image

Outlook Express

Плюсы:
  • К письму не будут прикрепляться дубли картинок — даже если картинка используется 100 раз, к письму будет прикреплена всего одна картинка.
  • Jpg передаются нормально, без искажений.

Минусы:
  • При использовании прозрачных gif-ов, вместо прозрачности в TheBat! будет черный фон.

image

Outlook 2007

Плюсы:
  • Jpg передаются без искажений;
  • Абсолютно одинаковые картинки не будут прикрепляться дублями к письму, прикрепится одна картинка;
  • Если используется прозрачный файл gif для «заполнения» отдельных ячеек, Outlook 2007 анализирует это, конвертирует gif в png и прикрепляет к письму столько файлов png, сколько областей разного размера было «заполнено» gif-ом.

Действие механизма на примере:
В рассылке используется файл spacer.gif размером 1х1, прозрачный. Этот файл используется для заполнения нескольких областей: 2-ух ячеек 800х10, и 3-х ячеек 120х10. В результате к письму прикрепляются 2 файла png: один 800х10, другой 120х10. Также в рассылке используется 2 раза файл top_g.gif, который непрозрачен — он прикрепляется к письму один раз, в png не конвертируется.


Минусы:
  • Outlook 2007 платный — лицензию можно либо приобрести отдельно, либо в пакете MS Office 2007 (отсутствует только в версии «Home And Student»).

image

Резюме:


В поисках истины были прочитаны разные полезные статьи (отдельное спасибо Aralot за статью 10 рекомендаций по html-верстке электронных писем и dudeonthehorse за статью Верстка почтовых рассылок: разбор полетов и 3 предшествующих).

Вставка картинок в различные почтовые программы

Какой из двух способов использования картинок в e-mail рассылках использовать — вопрос индивидуальный, свои плюсы и минусы есть и у того, и у другого. Так что дать однозначный совет здесь нельзя — всё зависит от ситуации.
Tags:
Hubs:
+31
Comments 16
Comments Comments 16

Articles

Information

Website
www.sibirix.ru
Registered
Founded
Employees
31–50 employees
Location
Россия