Gmail与Outlook对邮件嵌入图片的行为差异及通用解决方案咨询

方案1：CID附件嵌入（优先推荐，全客户端兼容） #

该方案基于标准邮件协议实现，是目前兼容性覆盖最广的处理方式，实现逻辑如下：

• 将所有需要嵌入的图片作为独立附件添加到邮件中，为每张图片设置唯一的Content-ID标识，注意ID不要包含特殊字符
• HTML代码中图片的src属性填写 cid:你设置的Content-ID 即可，示例代码：

<!-- 假设图片的Content-ID设置为 official_logo_2024 -->
<img src="cid:official_logo_2024" alt="官方logo" width="120" height="40">

• 优势：同时兼容Outlook、Gmail、QQ邮箱、网易邮箱等几乎所有主流邮件客户端，不需要区分环境编写多套代码，也不需要考虑base64体积过大或者外链被拦截的问题

方案2：Outlook条件注释分流（适合不想附加图片附件的场景） #

如果业务需求不允许将图片作为邮件附件发送，可以用Outlook专属的条件注释做内容分流，给Outlook渲染base64格式图片，给其他客户端渲染外链/背景图格式：

• 实现示例代码：

<!--[if mso]>
<!-- 仅Outlook会识别这部分内容，放置base64格式图片 -->
<img src="data:image/png;base64,此处替换为你的base64编码内容" alt="官方logo" width="120" height="40">
<![endif]-->
<!--[if !mso]>-->
<!-- 除Outlook外的所有客户端会识别这部分内容，放置外链图片或者背景图实现 -->
<img src="https://你的图片存储地址/logo.png" alt="官方logo" width="120" height="40">
<!--<![endif]-->

• 注意事项：单张base64编码的图片体积不要超过100KB，避免被部分客户端的安全策略过滤；外链图片需要放在稳定的公网存储节点，降低被拦截的概率。

如果需要兼容背景图的场景，也可以用相同的条件注释逻辑：Outlook环境用base64格式的img元素占位，其他客户端正常使用background属性实现背景图即可。

内容的提问来源于stack exchange，提问作者Guy Ben David