12

I understand that HTML emails need to use really old school layouts - as per lots of other answers on SO (e.g. HTML email: tables or divs?, HTML Email using CSS).

However, there seems to be some debate over whether it's still a good idea to use spacer gifs in email.

For example, compare these three layouts:

DIMENSIONS:

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

WITH SPACER GIF:

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

WITH SPACER GIF AND DIMENSIONS:

<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>

How do I use them with dimensions? Are there any email clients that still require spacer gifs? Is there any harm done either way?

Community
  • 1
  • 1
Dan Blows
  • 20,846
  • 10
  • 65
  • 96

4 Answers4

13

Personally, I never use spacer gifs, because they destroy the layout when image blocking is turned off, for three reasons:

  1. If they don't render at all, any layout that requires the spacer image is lost.
  2. If they render incorrectly (such as reverting to their original size, or proportionally to their original size) they break the layout.
  3. Even if they do render properly and the layout works, all the image placeholders that are displayed when image blocking is turned on distract from the message of the email.

To get around issue #2, you can save each image with its actual dimensions. However, this obviously increases:

  • Time to build
  • Number of images to be downloaded by client

and it doesn't solve issues #1 and #3.

The reason for using spacer gifs is because some clients (Outlook 2007, Outlook 2010, Lotus Notes, Hotmail / Live Mail) will not render an empty cell. It's very difficult to have absolute precision over dimensions of a text node, and so a spacer image suffices. However, even those clients mentioned will render an empty cell that has width defined.

So as long as you're defining pixel widths on any empty cells you are fine. To go back to the examples in the question:

  • Dimensions-only - works with and without image-blocking in all major email clients
  • Spacer images only - works only when image-blocking is turned off
  • Dimensions and spacer images - works only when image-blocking is turned off

Because of this, you should use dimensions and not spacer gifs.

Various articles talk about this question as well (search for 'spacer images' on the pages)

Dan Blows
  • 20,846
  • 10
  • 65
  • 96
  • 3
    I don't understand: you ask a question and immediately answer it... What's this for? – Marco May 24 '12 at 06:25
  • 1
    @Marco I had a discussion with somebody on a different post - this issue was tangential to the OP so I didn't want to debate it in comments. I couldn't find an existing Q+A about this, so wrote one and linked to it. – Dan Blows May 24 '12 at 06:30
  • "those clients mentioned will render an empty cell that has width defined" - any sources with comprehensive lists for other clients? – user123444555621 Mar 11 '13 at 11:41
  • "Dimensions and spacer images - works only when image-blocking is turned off" - Why? I don't get it. Apart from annoying placeholders, everything should be fine – user123444555621 Mar 11 '13 at 11:44
  • 1
    @Pumbaa80 Some clients (one version of Outlook, and Thunderbird I think) will expand the placeholder to fit either a warning message or the alt tag. Other clients expand the image in proportion - so instead of stretching a 1x1 image to 1x10, it becomes 10x10. In both cases, the image dimensions will override your cell dimensions, so now the layout is broke. Given that all clients work perfectly well as long as you define a width on the cell (except Lotus Notes < v7, which won't work with spacer images either) the spacer images are at best useless, and at worst damaging. – Dan Blows Mar 11 '13 at 13:44
  • 1
    @Pumbaa80 comprehensive list? Everything tested on Litmus, plus a few others. In 7 years of email coding, I have not come across a client which has a problem with not including spacer gifs as long as cell width is defined. The 'best practice recommendation' dates back to IE4 and Netscape days, but hasn't been a problem since the late 90s. – Dan Blows Mar 11 '13 at 13:48
3

You can definitely avoid using spacer gifs.

I find that the following code works in all clients. I generally either specify the width or the height of these empty cells. This specific example is what I use to create vertical space:

<tr>
 <td style="line-height: 0; font-size: 0;" height="10">&nbsp;</td>
</tr>
Nicole Merlin
  • 31
  • 1
  • 2
    If you're specifying height or width, you don't even need the ` `. Also, I think that `font-size:0;line-height:0;` might be ignored in some clients, so you end up with a default 14px ` `. Might not show as a render issue because of the combination of supported/unsupported content, but I would think it's more buggy than not using it at all. – Dan Blows May 30 '12 at 13:44
  • This is the correct code to make it work in outlook, what email clients dont support it? – John Magnolia Nov 29 '13 at 18:18
2

If you keep your cells higher than 19px (the min default height of Outlook), you never need to use line-height, and a simple <td height="20">&nbsp;</td> works great. Example:

<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>

But, for vertical spacing, in most cases you can probably avoid doing that and add padding into the row above or below:

<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>

or like this, without padding:

<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>

Note on the last example I used &nbsp;<br> instead of just <br>. This is because Outlook will collapse any line or cell that has no content in it. That is the same reason why the original example also has a &nbsp; in the spacer cell. If you were to add multiple rows or padding underneath, it would look like this:

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

There are a couple of benefits of the two options without the spacer cell. First is that it is quicker and contains less code. The second is that it renders more consistently when someone forwards your email out of Outlook. Outlook's fabulous MS Word engine wraps everything in <p> tags, which add an unavoidable gap between rows. Having one less row will keep your email closer to your original design.

John
  • 11,985
  • 3
  • 45
  • 60
1

Note: Outlook 2007/2010 treats empty cells as spaces. AND applies default text and background color attributes to them. (so if your user likes purple backgrounds, cells with no color come out with purple background peeking through).

To offset this format your empty spacer cell this way:

<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>
artcase
  • 304
  • 1
  • 7