Do I need to use spacer images when coding HTML emails?

Question

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?

Answer 1

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)

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

Answer 2

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>