メールをお客様にお送りする際に悩ましいのが画像の扱いですね。せっかくきれいにレイアウトし、画像を貼り付けても、表示側で非表示とされていたら見てもらえません。

この「画像の非表示」は表示だけの問題ではありません。画像が非表示になっている場合に、メールのレイアウトが崩れてしまったらもう最悪。お伝えしたいことが届けられないどころか、会社・商品のイメージダウンに繋がることも。

「だからメールには画像を付けません」とおっしゃる会社もありますが、それでは消極的すぎます。今やメールの画像がデフォルトで表示されるデバイスも多いのです。iPhone, iPad, Macはその代表例です。こちらの記事のように、この3つのプラットホームだけでほぼ半数近くの46%のメールが見られているのですから。

このように、メール内の画像の重要性は見逃せません。けれどもまだ残り半数近いプラットホームでは画像がデフォルトでは非表示となっていることも忘れてはいけません。デフォルトだけではありません。Gmailのユーザの内、なんと43%のユーザは、わざわざ画像表示をオンにすることなくメールを読んでいるという調査データもあります。

では、メール内の画像の扱いはどうすればいいのでしょうか。簡単にまとめてみました。

各メールクライアントの画像の扱い

メールクライアント デフォルトの画像表示 ALTテキストの表示 ALTテキストのスタイル表示
Apple Mail 表示する 対応 対応
Lotus Notes 8.5 非表示 対応 非対応
Outlook 2000-2003 非表示 対応 非対応
Outlook 2007/2010/2013 非表示 対応 非対応
Outlook 2011 (Outlook for Mac) 非表示 対応 対応
Thunderbird 表示する 表示 表示

Apple MailとThunderbird以外はデフォルトでの画像表示はされません。気をつけたいのは、Outlookです。Outlookの場合、画像が非表示の際に代わりに表示されるALTテキストの前に、このようにセキュリティ警告が表示されるのです。そのために、ALTテキストがあまり目立ちません。

Outlookでの非表示の場合

また、後述しますがOutlookはALTテキストのスタイル表示に対応していません。

Webメールでの画像の取り扱い

メールクライアント デフォルトの画像表示 ALTテキストの表示 ALTテキストのスタイル表示
AOL Mail (Chrome) 非表示 対応 対応
AOL Mail (Firefox) 非表示 対応 対応
AOL Mail (IE) 非表示 対応 非対応
Gmail (Chrome) 表示する 対応 対応
Gmail (Firefox) 表示する 対応 対応
Gmail (IE) 表示する 対応 非対応
Outlook.com (Chrome) 時々表示する 対応 対応
Outlook.com (Firefox) 時々表示する 対応 対応
Outlook.com (IE) 時々表示する 対応 非対応
Yahoo! USA Mail (Chrome) 非表示 対応 対応
Yahoo! USA Mail (Firefox) 非表示 対応 対応
Yahoo! USA Mail (IE) 非表示 対応 非対応

Outlookの場合、条件はよくわかっていませんがメールによって画像がデフォルトで表示されたり、されなかったりするようです。怪しいメールと判断されたら表示しないなどのアルゴリズムが働いているのかも知れません。

Gmailユーザの例のように、画像表示をわざわざオンにしないユーザは多いのですから、画像を表示してもらうことを前提にメールを作成するのは誤りです。画像が表示されなくても正しく・崩れずにメールを表示するために、下記を心がけましょう。

  • 画像は正しくwidth, heightのサイズ指定を付けましょう
  • 画像が非表示された際に代わりに表示したいメッセージをALTで設定しましょう
  • 上記ALTは、文字を大きくするなどスタイルを付けておきましょう

ALTテキストにスタイルを付けない場合、下記のように表示されます。

ALTテキスト・スタイルなし

ALTテキストにスタイルも付けた場合、下記のようにテキストを目立たせることができて効果的です。

ALTテキスト・スタイル付き

ALTテキストにスタイルを付ける場合はこのようにします。

<img style="font-size: 15px; color: #ffffff; font-style: italic; font-weight: bold; height: 250px; width: 250px;" alt="insert alt text here" src="image.jpg" width="250" height="250" />

この例では、ALTテキストのフォントサイズを15pxとして、イタリックの太字で表示するようにしています。style属性内にも画像サイズと同じサイズ設定をしているところもミソです。

次回はモバイル環境でのメールの画像の取り扱いについて書きたいと思います。

The Ultimate Guide to Email Image Blockingより要約と抜粋