编码HTML电子邮件时是否需要使用间隔图像？

Question

据我所知,HTML电子邮件需要使用真正的老学校布局-按照很多其他的答案等等(如HTML电子邮件:表或div的？,HTML电子邮件使用CSS).

然而,在电子邮件中使用spacer Gifs仍然是一个好主意似乎存在争议.

例如,比较这三种布局:

尺寸:

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

与SPACER GIF:

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

与SPACER GIF和尺寸:

<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

就个人而言,我从不使用spacer GIF,因为它们会在关闭图像阻塞时破坏布局,原因有三:

1. 如果它们根本不渲染,则任何需要间隔图像的布局都将丢失.
2. 如果它们渲染不正确(例如恢复到原始大小,或者与原始大小成比例),则会破坏布局.
3. 即使它们确实正确渲染并且布局正常工作,打开图像阻止时显示的所有图像占位符也会分散电子邮件的消息.

要解决问题#2,您可以使用实际尺寸保存每个图像.但是,这显然会增加:

• 是时候建立了
• 客户端要下载的映像数

它并没有解决问题#1和#3.

使用spacer GIF的原因是因为某些客户端(Outlook 2007,Outlook 2010,Lotus Notes,Hotmail/Live Mail)不会呈现空单元格.在文本节点的尺寸上具有绝对精度是非常困难的,因此间隔图像就足够了.但是,即使提到的客户端也会呈现一个宽度已定义的空单元格.

因此,只要您在任何空单元格上定义像素宽度就可以了.回到问题中的示例:

• 仅维度 - 在所有主要电子邮件客户端中使用和不使用图像阻止
• 仅限间隔图像 - 仅在关闭图像阻止时起作用
• 尺寸和间隔图像 - 仅在关闭图像阻挡时有效

因此,您应该使用尺寸而不是间隔GIF.

各种文章也讨论这个问题(在页面上搜索'spacer images')

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