メールは画像にとって最も敵対的な環境です。クライアントはデフォルトで画像をブロックし、 OutlookはCSSバックグラウンド画像を無視し、GmailはCSSを削除し、モバイルデータ使用者は高速ロードのメッセージを望んでいます。メール画像を正しく処理するには制約を理解する必要があります — サイズを選んで結果を期待するだけでは不十分です。

メール幅：600 pxルール

メールを600 px幅でデザインしてください。これが最も普遍的に安全なメール幅です：

Gmail、Outlook、Apple Mailはすべてデスクトップで600 pxで安定してレンダリングします
多くのメールクライアントはブラウザウィンドウのサイズに関係なく固定600 pxのレンダリング幅を持ちます
モバイルでは、メールは320〜375 pxの単一列にスタックするべきです — 画像は固定ピクセル幅ではなくコンテナの100%幅にする必要があります
避けるべき：700 pxより広いメール — 多くのクライアントで切り取られ、横スクロールが強制されます

一般的なメール要素の画像サイズ

ヒーロー/ヘッダー画像：600×200 pxまたは600×300 px（ヒーローの高さによる）。メールの上部にある全幅画像 — 狭い画面でのクロップに備えてキーメッセージを中央に配置
商品画像：1:1正方形には600×600 px、600 pxメールでの横並びレイアウトには300×300 px。正方形画像は商品撮影に最も汎用性が高いです
サムネイル画像：記事や商品グリッドに150×150 px〜200×200 px
ロゴ：横長ロゴに200×50 px、または正方形ロゴに最大150×150 px。ファイルサイズを小さく保ちます（20 KB未満）— すべてのメールにロードされます
フッター画像：ソーシャルアイコンは30×30 px

ファイルサイズの目標

合計メールサイズは配信可能性とロード速度に影響します：

個別画像：可能であれば各画像を100 KB未満に保つ。 85% JPEG品質の600×300ヒーロー画像は20〜50 KBにするべきです
合計メール：合計1 MB未満を目指す（HTML + サーバーからロードされた画像）。 Gmailは生のHTML 102 KBを超えるメールをクリップします — 画像は外部なのでその制限には含まれませんが、遅くロードされる画像はエンゲージメントを損ないます
アニメーションGIF：メール用に1 MB未満に保つ。多くのモバイルメールアプリは GIFが大きすぎるか接続が遅い場合、最初のフレームのみを表示します

メールに最適な画像フォーマット

JPEG：写真とグラデーションがある画像に使用。最高の圧縮、すべてのメールクライアントで普遍的なサポート。良いサイズ-品質トレードオフのために80〜85%品質を使用
PNG：透明背景が必要なロゴ、アイコン、グラフィックに使用。写真コンテンツではJPEGより大きいため、本当に透明度が必要なアセットのみに予約
GIF：広範なメールサポートを持つ唯一のアニメーション形式。 Windows用Outlook 2007〜2019は最初のフレームのみ表示します — 静止画像として意味のある最初のフレームをデザインしてください
WebPとAVIF：メールには使用しないでください。これらの現代フォーマットはメールクライアントでのサポートが低いです — Outlookはこれらを完全に無視します。 JPEG、PNG、GIFのみ使用してください

Retinaと高DPIディスプレイ

最新のスマートフォンの多くとノートパソコンは2×または3×のピクセル密度スクリーンを持ちます。これらでシャープに表示するには：

表示幅の2×の画像を使用 — 600 px幅のメール画像には1200 px幅の画像をアップロードし、 HTMLでwidth="600"で600 px幅に制限します
画像ファイルサイズが2倍になるので積極的に圧縮してください。メール表示のために70%品質の 1200 px JPEGはまだシャープに見え、90%品質の600 px画像と同じファイルサイズかもしれません

常にAltテキストを書く

多くのメールクライアントはユーザーが明示的に承認するまでデフォルトで画像をブロックします。 AndroidのGmailは即座に画像を表示しますが、Windows用Outlookはデフォルトでブロックします。メールがaltテキストなしの画像のみの場合、画像をブロックした受信者は空のメールを見ます。

すべての画像に説明的なaltテキストを書く：alt="image1.jpg"ではなく alt="夏のセール - 全製品40%オフ"
情報を追加しない装飾的な画像には空のaltタグを使用：alt=""
件名、CTA、価格などの重要なテキストを表示するために画像を絶対に使用しないでください — スクリーンリーダーとテキスト専用メールクライアントは画像内のテキストを読めません

画像とテキストの比率とスパムフィルター

スパムフィルターは、テキストがほとんどなく完全に画像のみのメールにペナルティを与えます — スパムキャンペーンでよく見られるパターンです。60/40ルールに従ってください：

メールでテキストエリア最低60%、画像エリア最大40%を目指す
単一画像メール（周囲にテキストのない画像）は絶対に送らないでください — スパムフィルターを引き起こし、アクセシビリティを完全に無視する可能性が高いです
価格、オファー、CTAの重要な情報には目に見えるテキストを含める — 画像コンテンツと視覚的に重なる場合でも

ステップバイステップ：メールマーケティング画像を準備する

ヒーロー画像：1200×600 pxでデザインし、80〜85%品質のJPEGでエクスポート。 100 KB未満に削減するために画像圧縮を使用
商品画像：正方形レイアウトには600×600 px、グリッドレイアウトには300×300 pxにリサイズ。80%品質のJPEG
ロゴ：透明度付きPNGでエクスポート。200×50 pxまたは適切な寸法にリサイズ。20 KB未満に保つ
アニメーションGIF：GIF圧縮ツールで1 MB未満に。 Outlookユーザーのために最初のフレームが完全なメッセージを伝えているか確認
テスト：リストに送る前にOutlook、Gmail、Apple Mailにテストメールを送信。ブラウザで問題なく見える画像がメールクライアントでは異なってレンダリングされる場合があります

メールマーケティング画像クイックリファレンス

メール幅：600 px（700 pxより広くしない）
ヒーロー画像：600×200〜300 px、100 KB未満、JPEG
商品画像：600×600 pxまたは300×300 px、JPEG
ロゴ：横長200×50 px、PNG、20 KB未満
アニメーションGIF：1 MB未満；最初のフレーム = 静的フォールバック
使用するフォーマット：JPEG、PNG、GIFのみ — WebP、AVIFは除く