HTMLメールに画像をインライン埋め込みする方法

メール本文に画像を「外部リンク参照ではなく中身で持たせる」2つの方式：Base64のData URIとcid:参照。どちらが何のクライアントで映るか、配信先別の選び方を整理しました。

なぜ画像URLを直書きしてはいけないか

<img src="https://yoursite.com/logo.png"> のように外部URLを書いた画像は、メールクライアント側で「画像の表示」をクリックされないと出ません（Gmail・Outlook・iOS Mail全てデフォルトでブロック）。「迷惑メールかも」と疑われている状態で表示されないと、本文の意図が伝わりません。インライン埋め込みならクリック不要で確実に表示されます。

方式1：Data URI（Base64）

<img src="data:image/png;base64,iVBORw0KGgo..."> の形でHTML本文の中に直接Base64で画像を埋め込みます。RFC 2397準拠で、現代の多くのWebメールが対応。

○ Gmail（Web・iOS・Android）：表示OK
○ Apple Mail（macOS／iOS）：表示OK
○ Yahoo!メール：表示OK
× Outlook 2007以降（デスクトップ版）：Word.exeレンダラがData URIを認識せず、画像が壊れアイコンになる
△ Outlook.com（Web版）：表示OKだが、デスクトップ版と挙動が分かれる

B2Bの取引先がOutlookデスクトップ版を使っている場合、Data URIだけだと「画像が表示されない」と問い合わせが来ます。

方式2：cid:参照（MIME multipart/related）

画像をメールにMIME添付し、本文HTMLからは<img src="cid:logo.png">のようにContent-IDで参照する方式。RFC 2392準拠。

○ Outlook デスクトップ版：表示OK（cid:は古くから対応）
○ Apple Mail・iOS Mail：表示OK
△ Gmail：以前は表示NGだったが、現在のGmailは表示OK
○ Thunderbird・各種MUA：表示OK

Outlook対応が必須なB2Bやメルマガではcid:参照が標準です。HTMLメール送信ライブラリ（Nodemailer・PHPMailer・SendGrid・AWS SES等）には cid: をサポートする attachments: [{filename, content, cid}] のようなオプションが必ず用意されています。

配信先別の選び方

配信先がGmail・Apple Mail中心（toC・社内通知）：Data URIで十分
配信先にOutlookが混在（B2B・取引先）：cid:参照が無難
不特定多数（メルマガ・マーケ）：cid:参照＋画像はやや小さめで両対応

サイズ上限の現実的な目安

メール添付ファイルのサイズ制限は本ツールのメール添付PDF記事にも書きましたが、画像インライン埋め込みでも同じ制限がかかります。

Gmail：1通あたり25MB
Outlook.com：20MB
Exchange Online：初期値35MB（管理者設定で最大150MBまで）

Base64のData URIは元バイナリの+33%膨張するので、本体画像は数十KB以下に圧縮するのが現実的。画像圧縮で長辺800px・80%圧縮にしてからBase64化すると、ロゴ画像でも10〜20KB程度に収まります。

手順（Gmail向け配信の例）

送りたい画像を画像圧縮でPNG/JPGに軽量化。
画像⇔Base64変換で「Data URI付き」を選択してコピー。
HTMLメールテンプレに<img src="...">のsrcに貼り付け。
Gmailのテストアドレスに送信し、開封テスト。