Данный пост содержит информацию, которая не тестировалась при массовой рассылке, но имеет весомое значение для неё.
Основные вопросы данного поста:
1. Как грамотно, без нагрузки для Вашего SMTP сервера, вставить картинку в email письмо;
2. Как рандомить картинку.
1. Вставка картинки не такой уж и сложный процесс, чего там, просто нашел картинку на компе и запилил ее в шаблон email письма. Но проблема заключается в другом, при рассылке такого письма, его размер существенно увеличивается, соответственно увеличивается нагрузка на Ваш СМТП, далее падает скорость рассылки, письма вовсе уходят в очередь exim или того хуже сразу в папку СПАМ.
Но эта задача, решается очень просто! Размещаем наши картинки на хостинге и затем вставляем в письмо url ссылку, далее настраиваем размер картинки. Но перед нами стоит очень не маловажная проблема как избежать бана домена на котором расположена картинка? Брать трастовый домен или размещать картинки на ШЕЛЛах, и затем рандомить их? Осталось выкроить время для теста, и можно рассылать.
2. Как рандомить картинку?
Есть два варианта:
А. Мы рандомим размеры картинки в письме, оставляя url картинки тем же, изменяя только тело письма. Эффект не известен!
( В AMS рандом происходит вставкой макроса с размерами в HTML код письма, либо вставкой в HTML код модуля такого вида <240|241|242|243|244>).
B. Мы рандомим картинки как по размеру, так и по названию, закидываем их на большое количество ШЕЛЛов, хостингов, затем вставляем url в шаблон письма.
PS. Для создания хорошего письма используйте лучше HTML редакторы и хранилища для картинок от сервиса рассылок mailchimp или smart responder. Там и домен будет трастовый и качество отображения письма лучше!
И запомни существуют почтовые клиенты, которые по умолчанию не показывают картинки и только после клика на определенную кнопку картинки начинают отображаться. Это вызывает некие проблемы в верстке писем. Если картинки не показываются и не задана ее ширина и высота вместе, то почтовый клиент не знает, какого размера эта картинка и как рендерить свободное место. Таким образом, картинка занимает все свободное пространство. Выглядит это ужасно. Всегда пишите ширину и высоту картинки, чтобы избавится от таких проблем. Если нет такой возможности, указывайте ширину картинки и тогда письмо не будет рваться в стороны.
Пару раз верстал письма и картинки вставлял ссылками с сервера
всех всё устраивало, но в новой вёрстке попросили встроить картинки непосредственно в само письмо.
Как я понял blob никто не использует для этих целей.
Base64 да.
но этот вариант блочит gmail и некоторые другие клиенты.
в статье на хабре
https://habrahabr.ru/company/sibirix/blog/114472/
увидел, что если указывать абсолютный путь src=«y: empрассылкаheader.jpg», то картинка встроится в само письмо.
Но т.к. я не занимаюсь массовой рассылкой, а только отправляю тестовое письмо, то отправляю его с сервера. Т.е. пишу php файл с mail функцией, закидываю на фтп, через браузер вызываю его, он выполняется и письмо улетает на почту.
В таком варианте я не могу указать src=«y: empрассылкаheader.jpg». Пытался указать что-то типо src=«/home/user/public_html/emails/header.jpg», но в таком варианте письмо приходит на почту вообще без картинок.
Соответственно вопрос, как можно вставить картинку непосредственно в письмо при отправке с сервера или как можно отправить письмо с локального компа, чтобы указать путь как в статье хабра?
Добрый день, уважаемые хабравчане!
Не так давно мы вплотную столкнулись с задачей верстки e-mail рассылок. Это не самое приятное занятие, но многие компании активно используют корпоративные рассылки, и верстка становится всё более актуальной задачей.
Казалось бы, что сложного — сверстать простую страничку? Но есть «подводные камни», которые могут поставить в тупик даже опытного верстальщика. Именно таким «камням» и посвящен пост (оговоримся сразу — все эксперименты, описанные в посте, проводились под Windows с тем ПО, которое есть у многих под рукой).
Первый камень — Изображения
1. Подгрузка с сервера
Блокировка графики, во-первых, приводит к тому, что пользователю приходится выполнять лишние действия для просмотра картинок, во-вторых, если картинки не были подгружены сразу, то в офлайне при просмотре письма не будет возможности просмотреть картинки.
2. Прикрепление картинок непосредственно к письму
Стандарт MIME, описывающий передачу данных посредством электронной почты, определяет в частности механизм передачи нетекстового контента (такого, как картинки). «MIME определяет набор e-mail-заголовков для определения дополнительных атрибутов сообщения». Одним из таких заголовоков является «Content-ID». Content-ID — это уникальный идентификатор части сообщения. Значение идентификатора указывается в угловых скобках после заголовка:
Content-ID:
Основное условие формирования 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: empрассылка вместе с html-файлом письма. Если к картинке прописан путь
src=«y: empрассылка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! испорченные картинки отображаются с сильными искажениями.
Outlook Express
Плюсы:
- К письму не будут прикрепляться дубли картинок — даже если картинка используется 100 раз, к письму будет прикреплена всего одна картинка.
- Jpg передаются нормально, без искажений.
Минусы:
- При использовании прозрачных gif-ов, вместо прозрачности в TheBat! будет черный фон.
Outlook 2007
Действие механизма на примере:
В рассылке используется файл 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»).
Резюме:
В поисках истины были прочитаны разные полезные статьи (отдельное спасибо Aralot за статью 10 рекомендаций по html-верстке электронных писем и dudeonthehorse за статью Верстка почтовых рассылок: разбор полетов и 3 предшествующих).
Какой из двух способов использования картинок в e-mail рассылках использовать — вопрос индивидуальный, свои плюсы и минусы есть и у того, и у другого. Так что дать однозначный совет здесь нельзя — всё зависит от ситуации.
