Как успешно внедрять изображения в HTML для отображения в клиентах электронной почты?

Я пытаюсь сделать подпись в HTML, используя изображения, которые закодированы в базовых URL-адресах данных. Вот пример:

<img src="data:image/png;base64,iVBORw0KGgoAAAAN...kJggg==">

Он отлично работает с почтовым программным обеспечением как Mail на Mac или Thunderbird, но не работает с электронной почтой, такой как gmail, outlook, roundcube, hotmail...

Есть ли у вас какие-либо идеи, как заставить его работать? Я действительно хочу разместить эти изображения непосредственно в исходном коде, это более практично.

Ответы

Ответ 1

простой ответ?

Вы не можете. Gmail, Outlook и т.д. Будут игнорировать образы base64.

Посмотрите на этот сайт, чтобы узнать больше об этом

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

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

Ответ 2

Im, использующий встроенный SVG, вот почему:

  • Это выглядит хорошо (векторная графика хорошо работает для логотипов).
  • Никакое вложение (даже изображения, отправленные по почте, так называемые скрытые вложения электронной почты, видны как таковые во многих почтовых клиентах).
  • Отсутствует дополнительный HTTP-запрос (работает автономно, после его загрузки).
  • Нет "Вы хотите загрузить изображения..".
  • Это нормально для меня, если оно не отображается в Gmail и Outlook. Его вид изящной деградации.

Но если вы действительно хотите отображать изображения в Gmail и Outlook, вам нужно будет загрузить их через HTTP.

У парня из CSS-трюков есть хорошее руководство по SVG по электронной почте: https://css-tricks.com/a-guide-on-svg-support-in-email/

Окончательное решение следующее:

/* Resize an element that has a width and height of zero to full size */
.showy {
  height: 100% !important;
  width: 100% !important;
}
<!-- Image: SVG -->
<img class="showy" width="0" height="0" src="my-image.svg">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg">