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

Автор Бидюков Денис
Share on facebook
Share on twitter
Share on vk
Share on telegram
Share on whatsapp

А вы просматриваете папку «Спам» как это делаю я? Если нет, то зря. Несмотря на то, что это спам, тем не менее там можно увидеть очень много интересных фишек, которые используются в письме. В одном таком письме я заметил картинку, точнее анимацию, которую не заблокировала почтовая программа. И я заинтересовался почему. Как оказалось ничего хитрого, атрибут 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. Для этого, наверняка есть куча сервисов и вряд ли тут у вас возникнут особые проблемы. Но если вам это не столь очевидно, а красивую подпись в письме ой как хочется, то оставляйте комментарии с вопросами и я объясню как это можно сделать в другой статье, поскольку эта и так уже перегружена.

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

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

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

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

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

Share on facebook
Share on twitter
Share on vk
Share on telegram
Share on whatsapp

Знаете что такое City Life?

Эта штука из меня, полуслепого инвалида второй группы, сделала успешным человеком!

Бидюков Денис

Эксперт по сайтам

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