eguchi.net

CID（Content-ID）参照とは？HTMLメールで画像を確実に表示する仕組み・MIME構造とBase64との違いまで解説

,
メルマガやシステム通知などのHTMLメールを作成していると、「送った画像が相手の画面で真っ白になって表示されない」「画像を表示するにはここをクリック、という警告ボタンが出てしまう」という問題に直面することがよくあります。

Webページであれば「<img src=”https://…”>」と書くだけで表示されますが、メールの世界ではセキュリティやプライバシー保護の観点から、画像の読み込みが厳しく制限されているためです。

この問題を解決し、HTMLメールの本文中に画像を確実にインライン表示させる標準技術が「CID（Content-ID）参照」です。

この記事では、CID参照の基本的な仕組みから、MIMEマルチパート（multipart/related）のデータ構造、外部URLやBase64データURIとの違い、Google Apps Script (GAS) やPythonでの実装方法、そしてメール運用時の注意点まで、分かりやすく整理して解説します。

CID参照のMIMEマルチパート構造とHTMLメール表示フロー

図：CID（Content-ID）参照によるMIMEマルチパート構造とメール本文の紐付けフロー

CID（Content-ID）参照とは？メール画像の基本概念

CID参照（Content-ID Reference）とは、インターネットメールの標準規格（MIME: Multipurpose Internet Mail Extensions / RFC 2392）において、「1通のメール内に添付された画像などのリソースを、メール本文（HTML）から参照してインライン表示させるための仕組み」です。

HTML本文内では、通常のWeb URL（http:// や https://）の代わりに、「cid:」という専用のURLスキームを使って画像タグを記述します。 

<!-- メール本文（HTMLパート）内の記述 -->
<img src="cid:company_logo" alt="企業ロゴ">

メールソフト（Gmail、Outlook、Apple Mailなど）は、この「cid:company_logo」という記述を見つけると、外部サーバーに画像を取りに行くのではなく、同じメールデータの中に一緒に梱包されている「Content-ID: <company_logo>」という識別子を持った添付パートを探し出し、その場で画面に展開します。

HTMLメールで画像を表示する3つの方式の比較

HTMLメールで画像を表示させる方法には、主に以下の3種類が存在します。それぞれの特徴と実務上の位置づけを比較してみましょう。

配信方式 HTML内の記述例 主なメリット 主な課題・デメリット
外部URL参照
（Hosted Image）		 <img src="https://example.com/logo.png"> ・メールデータ容量が極小
・後から画像の差し替えが可能		 ・多くのメールソフトで初期非表示（「画像を読み込む」ボタンが出る）
・Webサーバーの維持が必要
Base64データURI
（Data URL）		 <img src="data:image/png;base64,iVBOR..."> ・HTML単体で完結する
・Webブラウザでは即座に描画		 ・GmailやOutlookで非表示・ブロックされる
・容量が約33%増加しHTMLが肥大化
CID参照
（Inline Attachment）		 <img src="cid:logo_01"> ・ほぼ全メールソフトで確実に即時表示
・外部サーバー不要で自己完結		 ・画像ファイル分だけメール容量が増加
・大量配信時の送信トラフィック増

※Base64データURIの仕様や容量肥大化の理由については、別記事 Base64データURI（Data URL）とは？仕組み・構文からメリット・デメリット、メールやWebでの注意点まで解説 も併せてご参照ください。

CID参照を支えるMIMEマルチパート（multipart/related）の仕組み

CID参照を正しく機能させるためには、メール全体のMIME構造が「multipart/related（マルチパート・リレイテッド）」という形式で組み立てられている必要があります。

通常のファイル添付メールでは「multipart/mixed」が使われますが、これは「本文とは別に、独立したファイル（PDFやExcelなど）が添付されている」ことを示します。
これに対して「multipart/related」は、「同梱されているパート同士が互いに関連（参照）し合っている」ことをメールソフトに宣言する特別なコンテナです。

multipart/related の内部構造

  • ルート（親コンテナ）：Content-Type: multipart/related; boundary="----boundary_string"
  • 第1パート（親リソース）：Content-Type: text/html（HTML本文。本文内に cid:xxx の参照タグを含む）
  • 第2パート以降（子リソース）：Content-Type: image/png などのバイナリパート。
    ヘッダーに Content-ID: <xxx> および Content-Disposition: inline を指定。

実際のメール生データ（MIMEヘッダーとパート構成）を解剖

CID参照を用いたメールが送信されると、ネットワーク上では以下のような生のMIMEデータとして流れます。 

MIME-Version: 1.0
From: newsletter@example.com
To: user@example.com
Subject: 新着物件のご案内
Content-Type: multipart/related; boundary="----=_Part_12345_67890"

------=_Part_12345_67890
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: 7bit

<html>
  <body>
    <h1>おすすめ新着物件</h1>
    <!-- cid: で同一メール内の画像を呼び出す -->
    <img src="cid:property_photo_01" alt="物件外観写真">
    <p>駅徒歩5分の好立地マンションです。</p>
  </body>
</html>

------=_Part_12345_67890
Content-Type: image/jpeg; name="photo.jpg"
Content-Transfer-Encoding: base64
Content-ID: <property_photo_01>
Content-Disposition: inline; filename="photo.jpg"

/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQY
GBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYa
...（画像のBase64文字列）...
------=_Part_12345_67890--

HTML本文内の src="cid:property_photo_01" と、画像パートの Content-ID: <property_photo_01> が山括弧（< >）を含めて完全一致している点に注目してください。メールソフトはこのヘッダーを照合することで、本文中の指定箇所に画像を正しくはめ込みます。

なぜGmailやOutlookでBase64画像が消え、CID画像なら表示されるのか

多くの開発者が「Base64データURIもCIDも、Base64文字列を使う点は同じなのに、なぜ表示結果が異なるのか？」と疑問に感じます。
その理由は、メールクライアントが採用している「セキュリティポリシーと画像プロキシ機構」の違いにあります。

外部URL参照がブロックされる理由（プライバシー保護）

外部URL形式（<img src="https://...">）の場合、メールを開いた瞬間に外部サーバーへHTTPリクエストが飛びます。
送信者はこれを利用して「何時何分に、どのIPアドレスのユーザーがメールを開封したか」を追跡（トラッキング）できます。そのため、主要なメールソフトはユーザーのプライバシー保護を理由に、デフォルトで外部画像の自動読み込みを遮断します。

Base64データURIがブロックされる理由（セキュリティと制限）

Base64データURI（data:image/...）は、HTMLの文字列そのものとして画像が埋め込まれます。
しかし、GmailやYahoo!メール等のWebメールは、受信したHTMLメールを自社サーバーの「画像プロキシ」を経由してサニタイズ（無害化）してから表示します。データURIは悪意のあるスクリプト難読化やメモリ枯渇攻撃に悪用されるリスクがあるため、Google等のプロキシフィルターによってタグごと除去・非表示にされます。また、Outlookなどの古いレンダリングエンジンはそもそもデータURIの解釈自体をサポートしていません。

CID参照が標準で安全とみなされる理由

CID参照の画像は、外部サーバーへの通信を一切発生させず、最初からメール本体に同梱されている「純粋なMIMEパート（添付ファイル）」です。
プライバシー侵害のリスクがなく、プロキシサーバーも通常の添付ファイルとして安全にキャッシュ・レンダリングできるため、主要なメールクライアントで警告なしにインライン表示されます。

プログラムでの実装方法

Google Apps Script (GAS) での実装例

GASの「GmailApp.sendEmail」には、CID参照インライン画像を極めてシンプルに送信できる「inlineImages」オプションが用意されています。 

function sendNewsletterWithCid() {
  var recipient = 'user@example.com';
  var subject = 'CIDインライン画像付きメルマガ';
  var body = 'お使いのメールソフトはHTMLメールに対応していません。';

  // 本文HTML内で cid:logo_image を指定
  var htmlBody = 
    '<div style="font-family: sans-serif;">' +
    '  <img src="cid:logo_image" alt="ロゴ" style="max-width:200px;">' +
    '  <h2>いつもご利用ありがとうございます</h2>' +
    '  <p>今月のおすすめトピックスをお届けします。</p>' +
    '</div>';

  // Googleドライブから画像Blobを取得
  var imageFile = DriveApp.getFileById('YOUR_IMAGE_FILE_ID');
  var imageBlob = imageFile.getBlob().setName('logo.png');

  // inlineImages オブジェクトにキー（CID名）とBlobを渡す
  GmailApp.sendEmail(recipient, subject, body, {
    htmlBody: htmlBody,
    inlineImages: {
      logo_image: imageBlob // HTML側の「cid:logo_image」と自動連動
    }
  });

  Logger.log('CIDインライン画像付きメールを送信しました。');
}

※Googleドキュメントの貼り付け画像を自動抽出して上記のようなBlob辞書に変換する完全な自動化手法は、連載記事 第2回：GoogleドキュメントのHTMLメール変換とインライン画像埋め込みの解説 で詳しく解説しています。

Python（smtplib / emailモジュール）での実装例

Python標準ライブラリを用いて、MIMEマルチパート構造を明示的に構築するコード例です。 

import smtplib
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText
from email.mime.image import MIMEImage

# 1. ルートコンテナの作成 (multipart/related)
msg_root = MIMEMultipart('related')
msg_root['Subject'] = 'PythonからのCID画像メール'
msg_root['From'] = 'sender@example.com'
msg_root['To'] = 'receiver@example.com'

# 2. HTMLパートの作成と追加
html_content = '''
<html>
  <body>
    <h2>Pythonから送信されたインライン画像</h2>
    <img src="cid:header_image">
  </body>
</html>
'''
msg_html = MIMEText(html_content, 'html', 'utf-8')
msg_root.attach(msg_html)

# 3. 画像パートの作成とContent-IDの設定
with open('header.jpg', 'rb') as f:
    msg_img = MIMEImage(f.read())

# Content-IDヘッダーを山括弧付きで設定
msg_img.add_header('Content-ID', '<header_image>')
msg_img.add_header('Content-Disposition', 'inline', filename='header.jpg')
msg_root.attach(msg_img)

# 4. SMTP送信
with smtplib.SMTP('smtp.example.com', 587) as server:
    server.starttls()
    server.login('user', 'password')
    server.send_message(msg_root)

CID画像運用における注意点

CID参照は表示の確実性に優れる一方、大量のメルマガを一括送信するようなシーンでは以下の点に配慮する必要があります。

1通あたりのデータ容量増加

画像をメール内に直接添付するため、画像ファイルの容量がそのままメール1通ごとのサイズに加算されます。
たとえば500KBの画像を埋め込んで1,000人に配信すると、送信トラフィックは「500MB」に膨らみます。ヘッダーのロゴやアイコン、ワンポイントの図解画像などに絞り、画像サイズを事前にしっかり圧縮（WebPからJPEG/PNGへ適正サイズ化）しておくことが重要です。

添付ファイルアイコンの表示挙動

メールソフトの種類によっては、本文中に画像が表示されているにもかかわらず、メール一覧画面で「クリップ（添付あり）マーク」が表示される場合があります。
これを防ぐため、画像パートのヘッダーには必ず「Content-Disposition: inline」を明記しておくことが推奨されます。

迷惑メール判定（スパムスコア）対策

本文の文字数が極端に少なく、巨大な画像1枚だけをCID添付したメール（いわゆる「画像1枚メール」）は、多くのスパムフィルタで警戒対象と判定されます。
HTMLメールを作成する際は、画像だけでなく十分なテキスト情報を含め、テキストと画像のバランス（画像比率が高すぎない構成）を意識してください。

まとめ：メール用途に応じた適切な画像配信方式の選択

記事の要点まとめ

  • CID（Content-ID）参照は、メール本文内の src="cid:識別子" と、MIME添付パートの Content-ID: <識別子> を紐付ける標準規格。
  • multipart/related コンテナを用いることで、本文と画像が1通のメール内に統合され、外部サーバー通信なしでインライン表示される。
  • 外部URL参照のように「画像表示ボタン」で遮断されず、Base64データURIのようにGmailで消えることもないため、最も信頼性の高い画像表示手法である。
  • メール容量が肥大化するため、画像は適正サイズに圧縮し、重要なロゴや図解に絞って活用するのが実務におけるベストプラクティス。

HTMLメールの制作において、画像の表示不具合は読者の離脱やブランド毀損に直結する重要な課題です。
「確実にその場で見てほしい重要なヘッダー画像や商品写真」にはCID参照を活用し、「膨大な枚数のギャラリー画像」には外部URLホスティングを組み合わせるなど、それぞれの特性を理解して賢く使い分けましょう。

eguchi.netをもっと見る

購読すると最新の投稿がメールで送信されます。

,
ココナラ
お困りの方へ

WordPress修正・GAS自動化をプロに依頼

「自力で直す時間がない」「エラーが解決しない」ときは、ココナラで専門スキルを持つプロに1,000円〜個別相談できます。

  • WordPress: 画面崩れ・プラグイン不具合・高速化
  • GAS/スプレッドシート: 自動集計・API連携・ツール開発
ココナラで得意なプロを探す ➔
スプレッドシート Googleスプレッドシート 入門
Amazonでチェック

eguchi.netのスプレッドシート読本を見る

表計算を覚えて仕事を速くするGoogleスプレッドシート入門
›
初めてのWordPress入門読本
Amazonでチェック

eguchi.netのWordPress読本を見る

Web初心者の方がWordPressをここから学べる入門読本
›

投稿をさらに読み込む