А вы просматриваете папку «Спам» как это делаю я? Если нет, то зря. Несмотря на то, что это спам, тем не менее там можно увидеть очень много интересных фишек, которые используются в письме. В одном таком письме я заметил картинку, точнее анимацию, которую не заблокировала почтовая программа. И я заинтересовался почему. Как оказалось ничего хитрого, атрибут src у картинки выглядел как data:image/gif;base64,(далее идет закодированное в base64 тело картинки).
Вот так выглядит письмо с картинками у которых атрибут src как url:

А вот как оно выглядит если снять запрет на загрузку картинок из интернета:
Давайте рассмотрим два способа вставки картинок.
Содержание
Для обычного письма
Этот способ подходит для повседневного использования в переписке. Иногда возникает необходимость вставить в письмо картинку, именно в само письмо, а не в качестве вложения, а именно в само письмо. В этом нам поможет почтовый клиент. Лично я пользуюсь Mozila Thunderbird, на его примере и расскажу как вставлять картинки в письмо.
Если вы сидите на почте «через браузер», то я настоятельно рекомендую вам использовать почтовый клиент. Это очень удобно, если у вас несколько адресов и вам поступают письма на которые необходимо отвечать оперативно. А оперативности способствуют звуковые уведомления о новых письмах и индикация количества новых писем на панели задач.
Открываем окно для создания письма, затем нам надо добавить изображение
После чего появится диалог для добавления картинки:
Тут мы можем добавить изображение двумя способами
- Добавить картинку с компьютера, нажав кнопку «Выбрать файл»
- Указать URL картинки из сети Интернет и поставить галочку «Вложить это изображение в сообщение», таким образом изображение будет скопировано и вложено в письмо и не будет загружаться из сети.
Далее в данном диалоговом окне мы видим вкладки: Размеры, Внешний вид, Ссылка. Вкладка «Размеры», само собой, отвечает за видимые размеры изображения, там нет ничего особенного и данный диалог не вызовет у вас проблем.
Как видите ничего особенно сложного в этом диалоге нет. Теперь давайте рассмотрим следующую вкладку «Внешний вид»:
Тут мы с вами видим чуть больше параметров, уже не настолько очевидных, давайте их рассмотрим поподробнее:
- Поля: слева и справа, сверху и снизу — тут вы задаете размер пустого пространства между изображением и окружающим его содержимым
- Сплошная граница — тут вы указываете толщину бордюра (обводки) изображения.
- Расположение текста по отношению к изображению — тут вы выбираете то, как будет располагаться изображение относительно окружающего её содержимого. Для вставки изображения в текст лучше всего подходит влево или вправо где изображение окружается текстом.
Следующая вкладка «Ссылка» имеет всего 4 элемента:
- Само поле, куда необходимо вставить ссылку на ресурс в сети Интернет
- Кнопка «Выбрать файл», тут вы можете выбрать любой файл, который необходимо открыть при клике на изображение
Остальные два элемента не представляют особого интереса, поэтому я не стану описывать их предназначение. Тем кто не в теме оно не надо, а люди в теме поймут и без меня.
Для почтовой рассылки
Этот способ для тех, кто хочет организовать или улучшить уже созданную рассылку писем. У меня на одном из проектов используется рассылка писем с использованием фирменного оформления в виде шаблона основанного на табличной верстке. В нем присутствуют изображения с , путями в виде URL.
Если письмо с этим шаблоном отправить без дополнительной обработки и к тому же с содержимым, которое содержит изображения из сети Интернет, то такое письмо будет выглядеть весьма ужасно.
После того, как сообщение вставлено в шаблон, программа обрабатывает атрибуты src и вместо ссылок на картинки вставляет изображение закодированное в base64 и мы получаем «<img src=»data:image/png;base64,[тело картинки в base64]»/>». Таким образом почтовому сервису, после того как пользователь откроет письмо, не надо ничего грузить из сети Интернет, а это значит все картинки будут отображены.
Я специально не привожу никакого кода давая вам свободу творчества, поскольку осуществить сбор атрибутов src и последующую их замену реализовать весьма просто и программисты с легкостью с этим справятся.
Картинка в подписи
Изображения в подписи, у многих я видел и такое, так же есть смысл встраивать в саму подпись, а подпись делать в формате html. Для этого, наверняка есть куча сервисов и вряд ли тут у вас возникнут особые проблемы. Но если вам это не столь очевидно, а красивую подпись в письме ой как хочется, то оставляйте комментарии с вопросами и я объясню как это можно сделать в другой статье, поскольку эта и так уже перегружена.
Век живи, век учись
Вот почему я люблю писать статьи, если до этого я обладал эфимерным представлением о работе с почтовым клиентом, то работая над данной статьей я открыл для себя интересный подход в организации письма. Как и в случае с картинкой мы можем внедрять в письмо различные документы и ставить на них ссылки в тексте. Это позволяет:
- Отправителю обратить внимание на документ с помощью текста письма
- Получателю в один клик открыть/скачать данный документ
Правда это корректно работает только в почтовых клиентах и то возможно не во всех, веб-интерфейс обрабатывает такие ссылки некорректно, но файл, на который ведет ссылка, отображается в виде вложения. Так что сам файл никуда не денется в любом случае.
Если есть вопросы, добро пожаловать в комментарии.