メールメルマガの画像サイズとクライアント別容量制限

メルマガの画像はそれぞれ100 KB以下に抑え、表示幅の2倍のサイズで書き出し、WebPではなくJPGまたはPNGを使用してください。 Gmailは、HTML（Hypertext Markup Language）ソースが約102 KBを超えるとメッセージを途中で切り捨て、残りの部分を「メッセージ全体を表示」リンクに置き換えてしまいます。

多くの配信者は、配信停止リンクやトラッキングピクセルがカットラインより下に落ちてしまい、初めてこの省略制限の厳しさを身をもって知ることになります。その原因は画像であることが多く、画像がメッセージに直接埋め込まれているか、あるいは何度もキャンペーンを重ねるうちに画像周りのマークアップが肥大化してしまったためです。

Gmailの省略制限が実際に測定しているもの

Gmailが測定するのはメッセージのHTMLソースの容量であり、リンク先の画像自体の容量ではありません。 10枚の大きな写真にリンクしているメルマガであっても制限内に余裕で収まりますが、重いインラインスタイルや埋め込み画像を持つメッセージは収まりません。

この違いは重要です。なぜなら、解決策が異なるからです。リンクされた画像は102 KBの制限にはカウントされないため、省略が発生している場合は、繰り返されるインラインスタイル、すべてのリンクに付いた長いトラッキングパラメータ、またはbase64データとして埋め込まれた画像が原因であることがほとんどです。埋め込み画像を削除してマークアップを整理すれば省略問題は解決し、リンクされた写真を圧縮すれば読み込み時間が解決します。

メールに推奨される画像サイズ

メールの本文は幅600 pxでデザインし、高解像度ディスプレイ向けに画像は1200 pxで書き出します。 600 pxという標準規格は、デスクトップクライアントのプレビューペインに横スクロールなしで収まるため、長年維持されています。

書き出し幅を2倍にすれば、高解像度ディスプレイを十分にカバーできます。表示幅の3倍で書き出しても、メールクライアントでの表示品質はそれ以上向上せず、容量だけが無駄に増えてしまいます。メールは、すべてのキロバイトがスマートフォンのモバイル回線でダウンロードされるチャネルであることを忘れてはなりません。

メールにおいてWebPが依然として適さない理由

メールクライアントのWebP対応状況は依然としてばらつきがあり、特にOutlookでの動作は予測できません。 メールは、安全で古いフォーマットを選択するのが正解となる、数少ない場所の1つです。

ウェブブラウザはすべてWebPをサポートしているため、メールクライアントも同様だと誤解されがちです。しかし、デスクトップ版Outlookは全く異なるレンダリングエンジンを使用しており、一部の企業向けメールシステムでは、認識できないフォーマットを削除したり、表示に失敗したりします。メルマガ内の画像が表示されない損失は、WebPによる30%のファイル削減効果よりもはるかに大きいため、ここではJPGとPNGを使用するのが正解です。

メール内でのフォーマットの選び方

写真にはJPGを使用し、ロゴ、ボタン、文字を含むものにはPNGを使用します。 ルールはウェブと同じですが、メール画像は小さく表示されることが多いため、その影響はより顕著に現れます。

• JPG：商品の写真、ヘッダー画像、および実際の風景の写真に使用します。
• PNG：ロゴ、アイコン、および平坦な色やシャープな文字の輪郭を持つグラフィックに使用します。
• アニメーションGIF：アニメーションに意味がある場合のみ使用し、容量は1 MB以下に抑えます。
• WebPとAVIFは避ける：すべてのメールクライアントで安定してレンダリングされるとは限りません。
• SVGは完全に避ける：セキュリティ上の理由から、ほとんどのメールクライアントでブロックされます。

多くのクライアントで画像はデフォルトでブロックされる

多くの受信者は画像がオフの状態でメールを見るため、テキストだけでもメッセージが伝わるようにする必要があります。 企業向けメールシステムやプライバシーを重視するユーザーは、読者が読み込みを選択するまで外部画像をブロックします。

ブロックされた画像には代わりに代替テキストが表示されるため、すべての画像にaltテキストを設定してください。特典内容、期限、コールトゥアクション（行動喚起）などの重要な情報を、画像の中だけに配置することは絶対に避けてください。1枚の大きな画像だけで構成されたメルマガは、リストの大部分の読者にとってただの空白の長方形になってしまい、スクリーンリーダーでのアクセシビリティも著しく低下します。

メルマガ画像の準備手順

メルマガを高速で読みやすく保つために、以下の7つのステップに従ってください。

1. メールを幅600 pxでデザインします。これにより、すべてのデスクトップクライアントでスクロールなしで表示されます。
2. 各画像をレイアウト内で占める正確な形状に切り抜きます（クロップ）。
3. 表示幅のちょうど2倍のサイズに変更し、それ以上大きくしないようにします。
4. 写真の場合はJPGに、文字を含むグラフィックの場合はPNGに変換します。
5. 各ファイルを100 KB以下の目標サイズに圧縮します。
6. 画像をメッセージに埋め込むのではなく、配信プラットフォームまたは自社サーバーにホストします。
7. キャンペーンを配信予約する前に、Gmail、Outlook、およびスマートフォンにテストメールを送信して確認します。

単一の画像よりもメール全体の総容量が重要

購読者は電波状況の悪い場所でスマートフォンからメルマガを開くことも多いため、画像を含めたメッセージ全体の容量を600 KB以下に抑えてください。 5 MBもあるメルマガは読み込みが遅く、表示される前に閉じられてしまいます。

圧縮作業を始める前に、画像の枚数を数えましょう。それぞれ100 KBの写真を12枚掲載しているメルマガは、すでに1.2 MBに達しています。これは画像を小さくするよりも、レイアウト内の画像枚数を減らす必要があることを示しています。画像枚数を減らすことは、パフォーマンスと読みやすさの両方を向上させます。画像だらけの長いメルマガが最後まで読まれることは滅多にないからです。

ダークモードによる見え方の変化

一部のクライアントはダークモードで色を反転または調整するため、白い背景のロゴは暗いメッセージの中で明るい長方形として浮いてしまいます。 配信前に必ずダークモードでテストを行ってください。

ロゴやアイコンには背景が透明なPNGファイルを使用し、どちらの背景色でも正しく表示されるようにします。デザイン上、背景が白であることを前提とした、白い背景付きの画像は避けてください。写真はクライアントによって変更されることがほとんどないため安全ですが、フラットなグラフィックや文字画像はダークモードで問題が発生しやすい場所です。

Retinaディスプレイと画像の鮮明さ

高解像度画面でも画像を鮮明に保つために表示幅の2倍で書き出し、増えたピクセル分を相殺するためにより強く圧縮します。 画質70で書き出した1200 pxの画像は、通常、画質95で書き出した600 pxの画像よりも見た目が良く、容量も軽くなります。

マークアップ内のwidth属性には、ファイルサイズではなく表示サイズを設定してください。これにより、クライアントは追加のディテールを活かしながら、画像を600 pxでレンダリングします。width属性を省略すると、一部のクライアントで画像がフルピクセルサイズで表示され、デスクトップでのレイアウトが崩れる原因になります。

配信前のキャンペーンチェックリスト

• Gmail、Outlook、Apple Mail、および少なくとも1台のスマートフォンにテストメールを送信する。
• 画像をブロックした状態でテストメールを表示し、メッセージが依然として理解できるか確認する。
• Gmailでメッセージが省略されていないか確認する（省略された場合は「メッセージ全体を表示」リンクが表示されます）。
• すべての画像に、何が表示されているかを示すaltテキストが設定されていることを確認する。
• 特にロゴやフラットなグラフィックについて、ダークモードでの表示を確認する。
• すべての画像の総容量を足し算し、600 KB以下に収まっていることを確認する。

キャンペーン画像をまとめて一括処理する

メルマガ内のすべての画像をまとめて処理することで、キャンペーン全体で一貫した仕様を共有できます。 メルマガには通常5〜15枚の画像が含まれており、毎週配信する場合、年間で数百枚の画像を準備することになります。

幅と目標KBを一度設定して画像をドロップするだけで、すべてのファイルが仕様に合わせて処理されます。すべてはご自身のブラウザ内、ご自身のプロセッサ上で実行されるため、未公開のキャンペーン情報や、画像化された購読者リスト、クライアントの制作物などがサーバーに送信されることはありません。ローンチを控えた代理店にとって、ファイルをローカルに保つことは、いかなる圧縮効果をも上回る情報漏洩防止のメリットをもたらします。

ヘッダー、2カラムの商品行、フッターのロゴなど、繰り返し使用するレイアウトブロック用に、正確なサイズに調整されたプレースホルダーのテンプレートフォルダを用意しておきましょう。毎週配信を行う場合、同じ4〜5つの形状を永続的に再利用することになり、新しい素材を既存の仕様に合わせる方が、キャンペーンごとに毎回寸法を決定するよりも時間を大幅に短縮できます。