メールクライアントでの画像処理

多くのクライアントでは、ユーザーが「画像を表示」をクリックするまで画像がデフォルトでブロックされます。Outlook、Gmail（不明な送信者の場合）、従量制接続中のほとんどのモバイルクライアントでは、代わりにプレースホルダーが表示されます。画像が表示されないことを前提にデザインしてください。

重要な文言（見出し、CTAラベル、価格）を画像に埋め込まないでください。インラインCSSでスタイルを設定したHTMLテキストを使用すれば、画像がブロックされてもメッセージが届き、スクリーンリーダーで読み上げられ、ダークモードによる反転にも適切に対応できます。

すべての <img> には説明的な alt 属性が必要です。画像がブロックされると、プレースホルダーのボックス内に alt テキストが表示されます。適切に記述した alt テキストは、画像が伝えるはずだったメッセージで視覚的な空白を補います。

明示的なサイズを指定しないと、プレースホルダーが潰れ、画像の読み込み時にレイアウトがずれます。両方の属性と、それに対応するインラインスタイルを設定して、画像が実際に読み込まれるかどうかにかかわらず、セルが領域を確保するようにしてください。

Outlook はインライン画像の下に小さな隙間を挿入します。すべての <img> に style="display:block" を適用してこの隙間をなくし、すべてのクライアントで縦方向のリズムを統一してください。

古いクライアントでは、<a><img></a> の周囲に青い境界線が追加されます。画像の属性に border="0" を設定し、インラインで style="border:0" も設定して、CTA内のリンク画像がきれいに表示されるようにしてください。

メールクライアントには「このページ」に相当する概念がありません。すべての画像の src には、一般公開されている CDN を指す絶対 https:// URL を指定する必要があります。ローカルパス、相対パス、http:// URL（混在コンテンツ）は、読み込みに失敗しても通知されないことがあります。

高速で、地理的に分散された画像ホストを使用してください。一部のクライアント（Gmail）はプロキシ経由で画像を取得し、独自のキャッシュ層を追加します。自社管理の CDN を使用すれば、遅いオリジンからの読み込みを避け、地域を問わず画像を安定して読み込めます。

ヒーロー背景には、CSS の background-image と、主要な色調に合う bgcolor を組み合わせてください。画像がブロックされてもセルには適切な色が表示され、bgcolor 上に重ねたテキストも読みやすくなります。これにより、白い背景に白いテキストが表示される問題を避けられます。

画像を2倍のサイズで用意し、width 属性で縮小表示すると、高DPIディスプレイでも鮮明に見えます。たとえば、600x600 の画像を width="300" height="300" で表示すると、Retina ではくっきり表示されます。ただし通信量が増えるため、WebP相当の圧縮でファイルサイズを小さくしてください。

アニメーションGIFは、Outlook（最初のフレームだけを表示します）を除くほとんどのクライアントで動作します。最初のフレームだけでも静止画として意味が通るようにデザインしてください。残りのアニメーションがなくても、見出し、CTA、または重要な価値が読める必要があります。

HTMLメールでは、重要な文言（見出し、CTAラベル、価格）を画像に埋め込んではならないのはなぜでしょうか。

画像はメッセージそのものではなく、付加要素として扱ってください。絶対 https URL を使用し、width/height/display:block/border:0 を設定し、意味のある alt テキストを記述し、高速な CDN でホストしてください。背景には bgcolor のフォールバックを組み合わせ、Retina向けに2倍のサイズで用意し、Outlook ではGIFが最初のフレームで停止することを忘れないでください。