HTMLメールの画像幅について

<!-- 横幅いっぱいの画像 -->
<tr>
<td width="600" style="font-size:0;"><img src="img/main.jpg" width="600" alt="" style="display:block;width:100%;max-width:600px;height:auto;"></td>
</tr>
<tr>
<td style="font-size:0;"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
<tr>
<td style="font-size:0;" class="space"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>

<td>タグについて
画像を入れる<td>タグに style="font-size:0;" を指定してください。
これは画像の下に出来る余白を消すためです。
line-height:0; はOutlook2013で画像の上部が1px欠けるため、使用しないようにしています。
また、<td>タグに width="600" などコンテンツ幅を設定します。Outlook2013への対策です。

<img>タグについて
<img>タグには width="600" と幅を指定してください。幅を指定していないとOutlook2013では画像本来の幅に変わります。
例えば幅が800pxだった場合、800pxの大きさで表示されます。コンテンツの幅に合わせて指定してください。
CSSの display:block; は画像の下に出来る余白を消します。これは<td>タグのCSSが効かないメーラー用に2重の対策をしています。
width:100%;max-width:600px;height:auto; はスマホで見た時、画面幅に合わせて幅と高さを調整するように指定しています。
なお、Outlook2013ではstyleが効きませんので、widthとstyleで2重設定することを忘れないようにしてください。
画像をリサイズして横幅600pxにしている場合のみ、width="100%" style="display:block;" と省略することも可能です。

いいなと思ったら応援しよう!