Как подготовить для рассылки красивое html-письмо с картинками

Потратив пару дней на изучение этого вопроса, я пришёл к выводу, что дело это непростое и лучше поручить его специалистам. Скомпоновать простое письмо они смогут за 1500 руб., обычное - за 5 т.р., нарисовать красиво, чтобы все обомлели - от 15 т.р.

Постановка задачи

Что у нас есть?

Грамотно свёрстанный html-файл с текстом письма и несколько графических файлов (png и jpg), используемых в оформлении. Наличие аттачей (вложений) роли не играет. Их можно будет прикрепить перед отправкой как к любому другому письму.

Что мы хотим получить?

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

Суть проблемы

Встроить декоративные картинки в письмо.
Если прицепить их обычным способом (как вложения), они просто будут "болтаться рядом", не участвуя в оформлении. Их можно будет посмотреть, но, обычно, в конце письма. Нам же нужно, чтобы они были на своих местах и в своих слоях.

Продвинутый пользователь компьютера скажет: "А чё париться? Размещаешь картинки в открытом доступе, а в письме, в src даёшь ссылку на них."

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

Нюансы

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

Существует ряд рекомендаций по вёрстке, призванных снизить негативные последствия наплевательского отношения почтовых программ к современным html-стандартам, но это отдельная тема.

Решение

Выбор инструмента

На момент написания этой заметки (2015 год) я пользовался программой The Bat 6. Теоретически она предоставляет возможность создания html-шаблонов, но к авторскому коду относится без должного уважения и шаблоны получаются кривые. Почитав кучу форумов, выяснил, что встроить картинки один человек смог, но отображаются они не везде. источник.

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

Продвинутый пользователь компьютера скажет: "А чё париться? В сети полно рассылочных сервисов."

Да. Они платные и обращаться к ним имеет смысл, когда речь идёт о больших объёмах. Я попробовал несколько. Русских и не русских. Наиболее удобным с точки зрения создания письма мне показался UniSender. Но и он встраивает не картинки, а ссылки на них. Кроме того, в конец письма добавляет свою строчку, разрушая ваш дизайн и заставляя перфекционистов негромко материться.

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

Ниже приведена краткая инструкция. Я предполагаю, что читатель умеет пользоваться Тандербёрдом и обращаю внимание лишь на неочевидные действия, к которым пришёл эмпирически.

Инструкция

В имеющемся у нас html-файле письма заменяем все ссылки на картинки с относительных на абсолютные локальные, например для Windows:

Было:  src="images/header.jpg"
Стало: src="D:\shablon\images\header.jpg"

В Тандербёрде создаём новое письмо.

Вставляем весь наш html (Меню -> Вставить -> HTML...) Нажимаем "ОК".

Создать html-письмо

В окне предварительного просмотра выделяем картинку,
затем: Меню -> Формат -> Свойства изображения...
Проверяем "Альтернативный текст" либо "Не использовать альтернативный текст", жмём "ОК".
И так для каждой картинки в нашем письме.

Встроить картинки в письмо

Затем: Меню -> Файл -> Сохранить как -> Шаблон

Казалось бы, вот оно — счастье. Но есть пара нюансов.

Нюанс N1

Когда мы вызываем: Меню -> Вставить -> HTML...
Тандербёрд позволяет нам вставить/редактировать только фрагмент кода, относящийся к текущему выделенному элементу. Когда мы вставляли html в пустое письмо, Тандербёрд взял всё, что было внутри тэга <body>. Редактировать свойства самого <body> (цвет фона, текста, ссылок, фоновое изображение) можно, вызвав: Меню -> Формат -> Цвета и фон страницы...

Нюанс N2

Если на странице присутствуют объекты, использующие фоновое изображение, описанное в стиле как

background-image: url('...');

эти изображения необходимо поставить в конец страницы как <img> единичного размера, провести манипуляции по встраиванию картинки в письмо (описано выше), сохранить шаблон, снова открыть на редактирование в режиме html, взять значение src нижних <img> и вставить в соответствующие стили. Нижние <img> удалять не стоит.

Удачи.

Смотри также