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

Question

我知道 HTML 电子邮件需要使用非常老派的布局 - 根据 SO 上的许多其他答案(例如 HTML email: tables or divs? ， HTML Email using CSS )。

然而，对于在电子邮件中使用间隔 gif 是否仍然是一个好主意，似乎存在一些争论。

例如，比较这三种布局:

方面:

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

带间隔 GIF:

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

带间隔 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

就个人而言，我从不使用间隔 gif，因为它们会在图像阻塞关闭时破坏布局，原因有以下三个:

如果它们根本不渲染，则任何需要间隔图像的布局都会丢失。

如果它们渲染不正确(例如恢复到原始大小，或与其原始大小成比例)，它们会破坏布局。

即使它们正确渲染并且布局有效，打开图像阻止时显示的所有图像占位符也会分散电子邮件消息的注意力。

要解决问题 #2，您可以保存每个图像的实际尺寸。然而，这显然增加了:

build 时间

客户端要下载的图片数量

它不能解决问题#1 和#3。

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

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

仅尺寸 - 在所有主要电子邮件客户端中使用和不使用图像阻止

仅间隔图像 - 仅在图像阻止关闭时有效

尺寸和间隔图像 - 仅在图像阻止关闭时有效

正因为如此， 您应该使用尺寸而不是间隔 gif .

各种文章也讨论了这个问题(在页面上搜索“间隔图像”)

http://www.banane.com/workblog/?p=61

http://www.campaignmonitor.com/design-guidelines/