HTML 이메일을 코딩 할 때 스페이서 이미지를 사용해야합니까?

Question

HTML 이메일은 SO에 대한 다른 답변 (예 : HTML email: tables or divs?, HTML Email using CSS)에 따라 정말 오래된 학교 레이아웃을 사용해야 함을 알고 있습니다.

그러나 이메일에 스페이서 gif를 사용하는 것이 여전히 좋은지에 대한 몇 가지 논란이있는 것 같습니다.

치수 : SPACER의 GIF 함께

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

:

<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

는 개인적으로, 나는 결코, 스페이서 GIF를 사용하지 :

1. 그들은 전혀 렌더링하지 않는 경우, 스페이서 이미지를 필요로하는 레이아웃 분실되었다.
2. 잘못 렌더링하면 (예 : 원래 크기로 되 돌리거나 원본 크기에 비례하여) 레이아웃이 깨집니다.
3. 이미지가 올바르게 렌더링되고 레이아웃이 작동하더라도 이미지 차단이 켜져있을 때 표시되는 모든 이미지 자리 표시자는 이메일의 메시지를 분산시킵니다.

문제 2를 해결하려면 각 이미지를 실제 크기로 저장할 수 있습니다. 클라이언트

로 다운로드 할 이미지의

번호를 구축하기

• 시간 그것은 문제의 # 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/

Answer 2

당신은 확실히 스페이서 GIF를 사용하여 피할 수 있습니다 (페이지에 '스페이서 이미지'에 대한 검색)뿐만 아니라이 문제에 대해 이야기.

다음 코드는 모든 클라이언트에서 작동합니다. 일반적으로 이러한 빈 셀의 너비 또는 높이를 지정합니다. 다음은 수직 공간을 만드는 데 사용하는 구체적인 예입니다.

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

Answer 3

참고 : 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> 

Answer 4

당신이 당신의 세포보다 높은 19px (아웃룩의 최소 기본 높이)를 유지하는 경우, 당신은 라인 높이를 사용할 필요가 없습니다, 그리고 간단한 <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> 

마지막 예제에서 나는 <br> 대신 &nbsp;<br>을 사용했습니다. 이는 Outlook이 내용이없는 라인이나 셀을 축소하기 때문입니다. 이것이 원본 예제가 스페이서 셀에  을 갖는 것과 같은 이유입니다. 당신이 아래에 여러 행 또는 패딩을 추가한다면, 그 결과는 다음과 같습니다 스페이서 세포가없는 두 가지 옵션의 장점 몇 가지가 있습니다

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

. 첫 번째는 더 빠르고 코드가 적다는 것입니다. 두 번째는 누군가가 Outlook에서 이메일을 전달할 때보다 일관성있게 렌더링한다는 것입니다. Outlook의 엄청난 MS Word 엔진은 <p> 태그의 모든 것을 래핑하여 행 사이에 불가 피한 간격을 추가합니다. 하나의 행을 줄이면 이메일을 원본 디자인에 가깝게 유지할 수 있습니다.