如何在HTML邮件中避免图片加载前出现方形占位块？

Outlook的图片占位逻辑会默认以图片宽度生成正方形占位，即便父容器设置了高度也会失效。以下是无需JavaScript、同时保证响应式的解决方案：

方案1：用padding-top维持宽高比+图片绝对定位 #

通过CSS的padding-top百分比（基于父元素宽度计算）精准锁定图片比例，同时给图片设置明确的宽高属性让Outlook识别正确占位：

<table width="650" align="center" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:650px;">
  <tr>
    <td style="padding-top:49.23%; /* 325÷650×100%，精准匹配图片比例 */ position:relative; overflow:hidden;">
      <img src="你的图片URL" width="650" height="325" style="position:absolute; top:0; left:0; width:100%; height:auto;" alt="图片描述"/>
    </td>
  </tr>
</table>

• 核心逻辑：padding-top百分比能自适应容器宽度，保持图片比例；Outlook读取图片的width/height属性生成正确高度的占位，现代邮箱则遵循CSS实现响应式。

方案2：用同比例透明占位图替代默认占位 #

制作一张和目标图片同比例的极小透明PNG（比如1×1像素，通过宽高属性拉伸），作为加载前的占位：

<table width="650" align="center" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:650px;">
  <tr>
    <td>
      <img src="透明占位图URL" width="650" height="325" style="width:100%; height:auto;" 
           alt="图片描述"/>
    </td>
  </tr>
</table>

• 核心逻辑：Outlook会直接渲染这张透明图，不会生成默认正方形占位；透明图体积极小，不会增加邮件加载负担。

方案3：单元格强制锁定高度+溢出隐藏 #

给单元格同时设置height属性和内联样式，强制限制占位高度：

<table width="650" align="center" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:650px;">
  <tr>
    <td height="325" style="height:325px; overflow:hidden;">
      <img src="你的图片URL" width="650" height="325" style="width:100%; height:auto;" alt="图片描述"/>
    </td>
  </tr>
</table>

• 核心逻辑：Outlook会识别单元格的height属性，强制限制占位高度；overflow:hidden防止内容超出，现代客户端通过width:100%; height:auto;实现响应式。

通用注意事项 #

• 所有样式尽量用内联CSS，Outlook对外部样式表支持极差；
• 图片必须同时设置width和height属性，Outlook依赖这些属性确定占位尺寸；
• 表格添加width:100%; max-width:650px;保证小屏幕下的自适应效果。

内容的提问来源于stack exchange，提问作者Josiah