Сибирикс
Компания
53,51
рейтинг
25 февраля 2011 в 09:59

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

Верстка 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 рассылках использовать — вопрос индивидуальный, свои плюсы и минусы есть и у того, и у другого. Так что дать однозначный совет здесь нельзя — всё зависит от ситуации.
Автор: @zevvssibirix
Сибирикс
рейтинг 53,51
Компания прекратила активность на сайте

Комментарии (16)

  • +17
    Не хватает библиографии.
    habrahabr.ru/blogs/webdev/106387/ Грабли при верстке HTML писем 18 октября 2010
    habrahabr.ru/blogs/css/112163/ Верстка почтовых рассылок 19 января 2011
    habrahabr.ru/blogs/css/112307/ С версткой почтовых рассылок все не так уж плохо 21 января 2011
    habrahabr.ru/blogs/css/114119/ Верстка почтовых рассылок: взгляд изнутри 20 февраля 2011
    habrahabr.ru/blogs/css/114234/ Верстка почтовых рассылок: разбор полетов 21 февраля 2011
  • +1
    Напишите, плиз, про кодировку.
  • 0
    Для PHP рекомендую использовать SwiftMailer — умеет работать с sendmail, mail(), SMTP, картинками в аттаче и просто аттачами
    • 0
      А чем плох phpmailer? Мне действительно хочется знать чем он плох по сравнению с тем что предлагаете Вы и на какие грабли в один прекрасный момент наступлю.

      Заранее спасибо!
      • 0
        Например то, что phpmailer не умеет прописывать Content-ID для картинок, соответственно то о чем написано в статье сделать не получится.
  • +1
    А почему недостатки The Bat становятся минусами других продуктов?
  • +1
    жалко что в статье ни слова про Mozilla Thunderbird
    вроде бы достаточно популярный почтовый клиент
    • 0
      Проблема с «черными» гифами в BAT'e давно не наблюдается. В каких версиях вы видели этот «косяк»?
      • 0
        Простите, это коммент к топику.
      • 0
        4.2.42 — проблемы проявляются.
        • 0
          Очень интересно, но я не наблюдал. Хотя даже если оно и так, что стоит использовать gif распорки не прозрачные, а совпадающие по цвету с фоном.
  • +1
    Неделя вёрстки рассылок на хабре? :))
    • 0
      [irony]Последователи :)[/irony]
  • 0
    А вот насчет прочтения кириллических писем на продуктах apple было бы интересно узнать. Часто с этим проблемы.
  • +2
    При верстке — старайтесь не использовать стандартных шаблонов, всяких бессмысленных картинок цветочков вверху и прочих темплейтов — все это убивает читаемость. Чем персональнее подготовлен newsletter тем больше его прочтут. Подобные приведенному приемеру выше newsletter чаще всего идут «в топку» не читаясь, потому как каждый человек увидев цветочки, понимает, что послана какая-то корпоративная бессмысслица.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разное