Gmailで画像を非表示にできない

display:noneは無効

何かとクセの多いHTMLメールコーディングですが、Gmailは特に癖が多く、先日は画像の非表示ができないというバグに直面しました。

調べたところ、どうやらdisplay:noneは無効になってしまうとのことです。

stackoverflow.com

こちらの記事よると、次のスタイルを指定することで非表示にできるとのこと。

    <img alt="XXX" src="XXX" style="width:0px; min-height:0px;">

ただし、この方法だとOutlookでは表示されてしまうので、次の指定も追加します。

    <img alt="XXX" src="XXX" style="width:0px; min-height:0px; display:none; mso-hide:all;">

mso-XXXとは、Outlook専用のハックのようなものです。

OutlookのレンダリングがWord(Microsoft Office Word) を利用していることが由来だとか。

WordドキュメントをHTML出力した際につけられるプロパティらしく、ほかにもmso-para-marginなど様々なものがあるとか。

余談

横道にそれてしまいますが、Outlookのみに有効な条件付きコメントが存在するそうです。

<!--[if gte mso 9]>
    <style type="text/css">
    /* Outlook用のスタイルを記述. */
    </style>
<![endif]-->

確実に有効とは言い切れないそうですが、覚えておいて損はないでしょう。