web-dev-qa-db-ja.com

Webメールクライアントで表示するために画像をHTMLに埋め込む方法

Base 64データURLにエンコードされた画像を使用して、HTMLで署名しようとしています。次に例を示します。

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

MacまたはThunderbirdのMailのようなメールソフトウェアでは問題なく動作しますが、Gmail、Outlook、roundcube、hotmailなどのWebメールでは動作しません...

それを機能させる方法について何か考えがありますか？私は本当にそれらの画像を直接ソースコードに入れたいのですが、もっと実用的です。

htmlformatbase64webmail
24
frénésie

簡単な答えは？

できません。 Gmail、Outlookなどはbase64画像を無視します。

これについて詳しくは、このサイトをご覧ください

enter image description here

したがって、私たちの結果に基づいて、電子メールに埋め込まれた画像を使用することは明らかに価値がありません。あなたがやろうとしていることは、人々が彼らが見ることができないであろうエンコードされた画像をダウンロードするように強いることです。

25
Mark

埋め込みSVGを使用していますが、その理由は次のとおりです。

  • 見栄えがいいです（ベクターグラフィックはロゴに適しています）。
  • 添付ファイルなし（いわゆる非表示の電子メール添付ファイルとして送信された画像でさえ、多くの電子メールクライアントではそのように表示されます）。
  • 追加のhttp要求はありません（ダウンロード後、オフラインで機能します）。
  • 「イメージをロードしますか？」という質問はありません。
  • GmailやOutlookに表示されなくても問題ありません。それは一種の優雅な低下です。

ただし、GmailやOutlookで画像を表示したい場合は、HTTP経由で画像をロードする必要があります。

CSS-tricksの人は、メールで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">

しかし、クライアントがユーザーに追加のリソースをロードするかどうかを尋ねるのは望ましくないので、個人的には好きではありません。

0
borisdiakur