web-dev-qa-db-ja.com

Base64画像をGmailに

IPadから送信されたメールのインライン画像を生成しています。すべてのデスクトップメールクライアントで見栄えがよくなりますが、Gmailはbase64イメージを好まないようで、テキストとして表示されます。

Base64とgmailで画像を埋め込む運はありますか？または、iPadの画像を含むHTMLメールを送信するためのより良いソリューションをご存知ですか？

htmlemailipadgmailbase64
46
Steven Baughman

Moin Zamanからのリンクは、古い（2008年以降の）テスト結果を示しています。今日の完全なテストの時点で、Gmailは両方の方法の埋め込み画像の表示をサポートしています。

<img src="...">内でインラインでbase64エンコード画像を使用する

<html><body><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA9QAAADmCAIAAAC77FroAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAO..."></body></html>

Base64でエンコードされた画像を添付ファイルとして使用する

Message-ID: <[email protected]>
Accept-Language: en-US
Content-Language: en-US
X-MS-Has-Attach: yes
X-MS-TNEF-Correlator:
x-originating-ip: [xxx.xxx.xxx.xxx]

Content-Type: multipart/related;
    boundary="_038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_";
    type="multipart/alternative"
MIME-Version: 1.0
Return-Path: [email protected]
X-OriginatorOrg: example.com

--_038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
Content-Type: multipart/alternative;
    boundary="_000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_"

...skipping Content-Type: text/plain which would be here for this example...

--_000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
Content-Type: text/html; charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable

<html><body><img border=3D"0" width=3D"980" height=3D"230" id=3D"Picture_x0020_1" src==3D"cid:[email protected]"></body></html>

--_000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_--

--_038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
Content-Type: image/png; name="image001.png"
Content-Description: image001.png
Content-Disposition: inline; filename="image001.png"; size=32756;
    creation-date="Mon, 08 Oct 2012 15:27:07 GMT";
    modification-date="Mon, 08 Oct 2012 15:27:07 GMT";
Content-ID: <[email protected]>
Content-Transfer-Encoding: base64

iVBORw0KGgoAAAANSUhEUgAAA9QAAADmCAIAAAC77FroAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAO
xAAADsQBlSsOGwAAf5lJREFUeF7tvQlgVdW18L+ZR20mpsSLCYlBQKwgwRCMr9TAqzg0CAl98Y9a
ikBfHxL1A/r0tUr77Feg1mDav4LUijxTk8hLRIstQ2mJhEiAWAEpNCGRa8KUSQXCzLf2cOZz7j33
5s5Zx6j3nruHtX97n33WWWfttbtdv36d4IEEkAASQAJIAAkgASSABJCA/wl0938VWAMSQAJIAAkg
ASSABJAAEkAClAAq3zgOkAASQAJIAAkgASSABJBAgAig8h0g0FgNEkACSAAJIAEkgASQABJA5RvH
...

独自のテストを行うには、次のいずれかの手法を使用して、インライン埋め込み画像を含むメールを送信できます

上記のいずれかを使用してメールをGmailアカウントに送信し、Gmail Webクライアント（動作する任意のブラウザー）でメールを開き、[返信]ボタンの横にある下矢印を使用して[オリジナルを表示]オプションを選択します。これにより、受信方法がわかります。

ベストプラクティスは、添付画像として埋め込み画像を使用することだと思います。

Gmail Web Clientを使用したテストで、異なるサイズの1つの電子メールで30枚の画像を送信した場合、画像コンテナではなく画像コンテナを表示するものが正常にロードされませんでした。その場合は、ページをリロードしてください。

私のテストでは（Windows 7）...

  • Chrome（最新）では、30枚の画像すべてを正常に読み込み/表示するには、数回の再読み込みが必要でした
  • Opera（最新）は、リロードの回数に関係なく30の画像すべてを正常に表示しませんでした
  • Firefox（最新）は問題なく30の画像すべてを一貫して表示しました
  • Internet Explorer 9（最新）は、問題なく30の画像すべてを一貫して表示しました
  • Safari（最新）が問題なく30の画像すべてを一貫して表示した
21
cusman

公式のドキュメントにはないようですが、Gmailはこれをインラインまたはbase64の添付ファイルとしてサポートしていません。

キャンペーンモニターが試みたいくつかのテストを次に示します。
電子メールに画像を埋め込む
埋め込み画像の再検討

8
Moin Zaman

必ずContent-Typeを設定してください：multipart/mixed; 、境界、およびContent-Transfer-Encoding：base64

4
valexa

これは正常に機能します。2つのsrc属性を設定します。1つはdata：image/png; base64で、もう1つは画像へのリンクで設定します。 gmailを使用する場合、リンクでsrc属性を使用し、電子メールの他のクライアントを使用する場合、data：image/png; base64でsrc属性を使用します。それを試してみてください！。表示されます。

0
Ivan Extremera