HTML電子メールをコーディングする際にスペーサーイメージを使用する必要がありますか？

Question

私は、HTMLに関する電子メールは、本当に古い学校のレイアウトを使用する必要があることを理解しています.SOのその他の回答（例えば、HTML email: tables or divs?、HTML Email using CSS）にも当てはまります。

しかし、メールにスペーサーgifを使用することはまだ良いかどうかについて、いくつかの議論があるようです。

DIMENSIONS：スペーサーGIF WITH

<table cellpadding="0" cellspacing="0" border="0" width="100"> 
    <tr> 
    <td width="100" height="10"></td> 
    </tr> 
</table> 

：

<table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
    <td><img src="spacer.gif" width="100" height="10"></td> 
    </tr> 
</table> 

スペーサーGIF WITH

・寸法：

<table cellpadding="0" cellspacing="0" border="0" width="100"> 
    <tr> 
    <td width="100" height="10"><img src="spacer.gif" width="100" height="10"></td> 
    </tr> 
</table> 

方法

例えば

は、これら三つのレイアウトを比較します私はやるそれらを次元で見る？まだスペーサーgifが必要なメールクライアントはありますか？いずれにせよ害がありますか？

Answer 1

画像ブロッキングは三つの理由のために、オフにされたとき、彼らはレイアウトを破壊するので、個人的に、私は、スペーサーGIFを使用することはありません：彼らは全くレンダリングされない場合は

1. 、スペーサーイメージが必要なレイアウトを失われます。
2. レンダリングが正しく行われなかった場合（元のサイズに戻す、元のサイズに比例するなど）、レイアウトが壊れます。
3. 彼らは適切にレンダリングしますとレイアウトが動作する場合であっても、画像のブロッキングが電子メールのメッセージからそらすオンになっているときに表示されているすべての画像のプレースホルダ。

問題2を回避するには、各画像を実際の寸法で保存します。しかし、これは明らかに増大します。クライアント

によってダウンロードされると、それは問題に＃1、＃3を解決していない画像の

番号を構築するための

• 時間を。一部のクライアント（Outlook 2007のは、Outlook 2010、ロータスノーツ、Hotmailの/ Liveメール）は空のセルを表示されませんので、

  スペーサーGIFを使用する理由はあります。テキストノードの寸法に絶対精度を持たせるのは非常に難しいので、スペーサーイメージで十分です。しかし、言及さえそれらのクライアントは、幅がを定義している空のセルをレンダリングします。あなたが任意の空のセルにピクセル幅を定義しているよう

  だから限り、あなたは大丈夫です。問題の例に戻るには：

  • 寸法のみ - 画像ブロッキングが
  をオフになっている場合にのみ機能 - とし、
  • スペーサー画像のみすべての主要な電子メールクライアントで画像が、ブロックせずに動作します
  • 寸法とスペーサーイメージ - イメージブロッキングは、ディメンションではなく、スペーサーGIFをを使用する必要があります、このため

  をオフにされている場合にのみ機能します。

  様々な記事があなたは間違いなく、スペーサーGIFを使用して回避することができ

  • http://www.banane.com/workblog/?p=61
  • http://www.campaignmonitor.com/design-guidelines/

Answer 2

（ページの 'スペーサー画像' を検索）だけでなく、この質問について話しています。

次のコードはすべてのクライアントで機能することがわかりました。私は一般に、これらの空のセルの幅または高さを指定します。この具体的な例は、私が垂直空間を作成するために使用するものです。

<tr> 
<td style="line-height: 0; font-size: 0;" height="10">&nbsp;</td> 
</tr> 

Answer 3

注：Outlook 2007/2010は、空のセルをスペースとして扱います。デフォルトのテキストと背景色の属性が適用されます。 （ユーザーが紫色の背景を好む場合は、色のない細胞が紫色の背景が透けて見える）。

あなたの空のスペーサーセルをこのように、このフォーマットを相殺するために：

<td width=(a percentage or a pixel width) height=(optional unless needed) bgcolor="#FFFFFF(always use 6 digit hex!)" style="font-size:1px; line-height:1px;")>&nbsp;</td> 

Answer 4

あなたは19px（見通しの分デフォルトの高さ）よりも高くあなたの細胞を維持する場合は、行の高さを使用する必要はありません、そしてA簡単な<td height="20">&nbsp;</td>は素晴らしい作品です。例：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> 
    <tr> 
    <td align="center"> 
     top 
    </td> 
    <tr> 
    </tr> 
    <td height="20"> 
     &nbsp; 
    </td> 
    <tr> 
    </tr> 
    <td align="center"> 
     bottom 
    </td> 
    </tr> 
</table> 

しかし、垂直方向の間隔を、ほとんどの場合、あなたはおそらくそれを行うことを避けることができ、上または下の行にパディングを追加します。

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> 
    <tr> 
    <td align="center"> 
     top 
    </td> 
    <tr> 
    </tr> 
    <td align="center" style="padding-top:20px;"> 
     bottom 
    </td> 
    </tr> 
</table> 

またはこのような、パディングなし：

を

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> 
    <tr> 
    <td align="center"> 
     top 
    </td> 
    <tr> 
    </tr> 
    <td align="center"> 
     &nbsp;<br> 
     bottom 
    </td> 
    </tr> 
</table> 

最後の例では、ちょうど<br>の代わりに&nbsp;<br>を使用しました。これは、Outlookが内容を持たない行またはセルを折り畳むためです。これは元の例もスペーサーセルに を持っているのと同じ理由です。あなたは下に複数の行やパディングを追加した場合、それは次のようになります。

<td align="center"> 
    &nbsp;<br> 
    &nbsp;<br> 
    &nbsp;<br> 
    bottom 
    <br>&nbsp; 
    <br>&nbsp; 
    <br>&nbsp; 
</td> 

スペーサーセルのない二つの選択肢の利点がいくつかあります。まず、コードが短く、コードが少なくて済むことです。もう1つは、誰かが電子メールをOutlookから転送したときに、より一貫してレンダリングされることです。 OutlookのすばらしいMS Wordエンジンは、<p>タグ内のすべてをラップし、行間に不可避的なギャップを追加します。行が1つ少ないと、元のデザインに近い電子メールになります。