Как вставить картинку в письмо что бы её не заблокировали

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

Вот так выглядит письмо с картинками у которых атрибут src как url:

А вот как оно выглядит если снять запрет на загрузку картинок из интернета:

Давайте рассмотрим два способа вставки картинок.

Для обычного письма

Этот способ подходит для повседневного использования в переписке. Иногда возникает необходимость вставить в письмо картинку, именно в само письмо, а не в качестве вложения, а именно в само письмо. В этом нам поможет почтовый клиент. Лично я пользуюсь Mozila Thunderbird, на его примере и расскажу как вставлять картинки в письмо.

Если вы сидите на почте «через браузер», то я настоятельно рекомендую вам использовать почтовый клиент. Это очень удобно, если у вас несколько адресов и вам поступают письма на которые необходимо отвечать оперативно. А оперативности способствуют звуковые уведомления о новых письмах и индикация количества новых писем на панели задач.

Открываем окно для создания письма, затем нам надо добавить изображение

После чего появится диалог для добавления картинки:

Тут мы можем добавить изображение двумя способами

1. Добавить картинку с компьютера, нажав кнопку «Выбрать файл»
2. Указать URL картинки из сети Интернет и поставить галочку «Вложить это изображение в сообщение», таким образом изображение будет скопировано и вложено в письмо и не будет загружаться из сети.

Далее в данном диалоговом окне мы видим вкладки: Размеры, Внешний вид, Ссылка. Вкладка «Размеры», само собой, отвечает за видимые размеры изображения, там нет ничего особенного и данный диалог не вызовет у вас проблем.

Как видите ничего особенно сложного в этом диалоге нет. Теперь давайте рассмотрим следующую вкладку «Внешний вид»:

Тут мы с вами видим чуть больше параметров, уже не настолько очевидных, давайте их рассмотрим поподробнее:

• Поля: слева и справа, сверху и снизу — тут вы задаете размер пустого пространства между изображением и окружающим его содержимым
• Сплошная граница — тут вы указываете толщину бордюра (обводки) изображения.
• Расположение текста по отношению к изображению — тут вы выбираете то, как будет располагаться изображение относительно окружающего её содержимого. Для вставки изображения в текст лучше всего подходит влево или вправо где изображение окружается текстом.

Следующая вкладка «Ссылка» имеет всего 4 элемента:

1. Само поле, куда необходимо вставить ссылку на ресурс в сети Интернет
2. Кнопка «Выбрать файл», тут вы можете выбрать любой файл, который необходимо открыть при клике на изображение

Остальные два элемента не представляют особого интереса, поэтому я не стану описывать их предназначение. Тем кто не в теме оно не надо, а люди в теме поймут и без меня.

Для почтовой рассылки

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

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

После того, как сообщение вставлено в шаблон, программа обрабатывает атрибуты src и вместо ссылок на картинки вставляет изображение закодированное в base64 и мы получаем «<img src=»data:image/png;base64,[тело картинки в base64]»/>». Таким образом почтовому сервису, после того как пользователь откроет письмо, не надо ничего грузить из сети Интернет, а это значит все картинки будут отображены.

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

Картинка в подписи

Изображения в подписи, у многих я видел и такое, так же есть смысл встраивать в саму подпись, а подпись делать в формате html. Для этого, наверняка есть куча сервисов и вряд ли тут у вас возникнут особые проблемы. Но если вам это не столь очевидно, а красивую подпись в письме ой как хочется, то оставляйте комментарии с вопросами и я объясню как это можно сделать в другой статье, поскольку эта и так уже перегружена.

Век живи, век учись

Вот почему я люблю писать статьи, если до этого я обладал эфимерным представлением о работе с почтовым клиентом, то работая над данной статьей я открыл для себя интересный подход в организации письма. Как и в случае с картинкой мы можем внедрять в письмо различные документы и ставить на них ссылки в тексте. Это позволяет:

• Отправителю обратить внимание на документ с помощью текста письма
• Получателю в один клик открыть/скачать данный документ

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

Если есть вопросы, добро пожаловать в комментарии.