为什么HTML编写的邮件签名中的图片在Outlook中会异常放大

故障诱因 #

• 桌面版Outlook采用Word引擎渲染HTML内容，回复邮件时会优先读取<img>标签原生的width、height属性，忽略内联样式style中定义的宽高值。你当前所有图片仅在style中设置了尺寸，未添加原生宽高属性，Outlook回复时就会调用图片本身的原始超大尺寸（你的logo源图为2500宽度、社交图标源图为1500宽度），导致图片被异常放大。
• 你编写的HTML代码存在标签嵌套错误，比如社交图标区域的<td>标签未正常闭合、存在多余的</a>结束标签，Outlook的容错性远低于Gmail，代码不规范会加剧渲染异常的概率。
• 外层未设置固定宽度的table容器，Outlook回复时重写HTML结构的过程中可能拉伸容器宽度，间接导致图片被拉伸放大。

修复方案 #

• 给所有<img>标签添加原生宽高属性（注意原生属性不需要加px单位），和内联样式的宽高形成双重兼容，示例如下：

<!-- 修复后的logo标签示例 -->
<img
  class="BI_Logo" 
  src="对应图片地址"
  width="110"
  height="136"
  style="width:110px;height:136px;border-radius:20px;border:0;"
  alt="BI Logo"
/>
<!-- 社交图标同理添加width="20" height="20"原生属性 -->

• 提前把所有图片裁剪到实际使用的尺寸再上传，不要用超分辨大图强行缩放，既可以提升加载速度，也能避免Outlook读取原始尺寸的问题。
• 补全所有缺失的闭合标签、删除多余的错误标签，规范HTML结构。
• 给所有外层table添加固定宽度属性，避免容器被拉伸。

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