Нужно ли использовать spacer-изображения при кодировании HTML-писем?

Я понимаю, что HTML-письма должны использовать действительно старые макеты школы-согласно множеству других ответов на SO (например, HTML-письма: таблицы или divs?, HTML-почта с использованием CSS ).

Тем не менее, похоже, есть некоторые споры о том, по-прежнему ли это хорошая идея использовать spacer GIF в электронной почте.

Например, сравните эти три макета:

Размеры: 

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

С РАЗДЕЛИТЕЛЕМ 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>

Как я использую они с размерами? Есть ли почтовые клиенты, которые все еще требуют spacer gif? Есть ли какой-нибудь вред в любом случае?

4 9
email html-email

4 ответа:

Лично я никогда не использую spacer gif, потому что они разрушают макет, когда блокировка изображения отключена, по трем причинам:

  1. если они не отрисовываются вообще, любая компоновка, требующая изображения спейсера, теряется.
  2. если они визуализируются неправильно (например, возвращаясь к своему исходному размеру или пропорционально своему исходному размеру), они нарушают макет.
  3. Даже если они отрисовываются правильно и макет работает, все заполнители изображения, которые отображаются при отображении изображения блокировка включена отвлекать от сообщения электронной почты.

Чтобы обойти проблему №2, Вы можете сохранить каждое изображение с его фактическими размерами. Однако это, очевидно, увеличивает:

  • Время строить
  • количество изображений, загружаемых клиентом

И это не решает проблем №1 и № 3.

Причина использования spacer gif заключается в том, что некоторые клиенты (Outlook 2007, Outlook 2010, Lotus Notes, Hotmail / Live Mail) не будут отображать пустую ячейку. Это очень трудно иметь абсолютную точность по размерам текстового узла, и поэтому достаточно пространственного изображения. Однако даже упомянутые клиенты будут отображать пустую ячейку , ширина которой определена.

Таким образом, пока вы определяете ширину пикселей в любых пустых ячейках, вы в порядке. Чтобы вернуться к примерам в вопросе:

  • Dimensions-only-работает с блокировкой изображений и без нее во всех основных почтовых клиентах
  • Spacer images only-работает только тогда, когда блокировка изображений отключена
  • Dimensions and spacer images-работает только при отключенной блокировке изображений

Из-за этого, Вы должны использовать размеры, а не spacer gif.

Различные статьи также говорят об этом вопросе (поиск "spacer images" На страницах)

11

Вы определенно можете избежать использования spacer gif.

Я нахожу, что следующий код работает во всех клиентах. Обычно я указываю ширину или высоту этих пустых ячеек. Этот конкретный пример я использую для создания вертикального пространства: 

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

Если вы держите ваши ячейки выше 19px (минимальная высота по умолчанию Outlook), вам никогда не нужно использовать высоту строки, и простой <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>
Обратите внимание, что в последнем примере я использовал &nbsp;<br> вместо просто <br>. Это происходит потому, что Outlook свернет любую строку или ячейку, которая не имеет содержание в нем. Это та же самая причина, по которой исходный пример также имеет &nbsp; в ячейке spacer. Если бы вы добавили несколько строк или отступов под ними, это выглядело бы так: 
<td align="center">
  &nbsp;<br>
  &nbsp;<br>
  &nbsp;<br>
  bottom
  <br>&nbsp;
  <br>&nbsp;
  <br>&nbsp;
</td>

Есть несколько преимуществ двух вариантов без ячейки spacer. Во-первых, он быстрее и содержит меньше кода. Во-вторых, он более последовательно отображается, когда кто-то пересылает вашу электронную почту из Outlook. Сказочный движок MS Word Outlook оборачивает все в теги <p>, которые добавьте неизбежный разрыв между строками. Имея на одну строку меньше, ваша электронная почта будет ближе к вашему оригинальному дизайну.

2

Примечание: 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>
1