HTMLメールの画像ってどんな仕組みになっているの?

March 16, 2016 / コラム
HTMLメールの画像ってどんな仕組みになっているの? (c)Kama
HTMLメールの基本要素
HTMLメールを配信する際、基本の要素は以下のようになります。
HTMLメールの基本要素
①メール/mail.html
配信原稿。画像はサーバに置いた場所から読み取る必要があるため、絶対パスで記述します。

②ミラーページ/index.html
配信されたメールの画像がユーザー環境で正しく表示されない場合のために用意されたページ。内容は基本はメールと同じ※1。
ただしこちらはデータをサーバ上に置くため、画像は相対パスで記述される場合が多い(例外あり※2)。

③LP(ランディング)ページ/lp.html
メール(およびミラー)からのリンク先に表示されるページ。
ミラーページ同様、データをサーバ上に置くため、画像は相対パスで記述される場合が多い(例外あり※2)。

④画像フォルダ/images
メール(およびミラーページ)、ランディングページで使用する画像。
※1 ミラーページへの誘導文言や差し替え用のタグを削除したり、メールとは文字コードを変える場合もある。
※2 ミラーページ、LPページと画像フォルダを違うサーバもしくはディレクトリに置く場合は絶対パスで記述することもあります。
これらのディレクトリ構成は、事前にシステム管理者に確認をしておくとテスト配信から本番配信への流れがスムーズになります。
 
HTMLメールが画像を読み取る仕組み
メールはサーバにデータを置かずに、システムを通じて配信されるので、画像の場所は必ず絶対パスで記述する必要があります。
一方、ミラーページ・ランディングページ・画像フォルダのデータはサーバ上に置きます。これらは多くの場合は同じディレクトリ内に置かれるため、画像の場所は相対パスで記述される場合が多いです。
相対パスとは 基準となるファイルから見てのファイルの場所を指定すること
例:images/○○○.gif
絶対パスとは「http://~」もしくは「https://~」で始まるアドレスでファイルの場所を指定すること
例:http://www.aaa.cp.jp/images/○○○.gif
HTMLメールの仕組み
HTMLメールの画像は必ず絶対パスで記述する必要があります。相対パスのままだとサーバ上の画像が正しく表示されません。
おまけ デコメールとHTMLメールの違い

著者プロフィール

Kama

株式会社ディレクタス クリエイティブ デザイナー
主にWebコンテンツの制作を担当。

ディレクタスでは本コラムやセミナーの開催情報などを掲載したメールマガジンを毎月1回お届けで発行しています。以下のリンクボタンより簡単にご登録いただけますので、インターネットマーケティングの現在について、ご興味をもたれた方は是非ご登録ください。

メールマガジン登録