方法1

Question

来自emailonacid的Mozify使用彩色马赛克表格单元格在图像加载到电子邮件之前渲染图像的近似值。

加载图像时，它会覆盖整个表格 - 隐藏马赛克。我假设它一旦加载就“在图片后面”。

Mozify的一个选项是用HTML文本替换包含文本和背景的图像，HTML背景（纯色）。如何在单元格中同时包含文本和img，但在加载图像时却没有显示文本？

这是如何实现的？我原本以为如果一个图像在一个单元格中，它会简单地向下推动所有其他单元格以适应自己。

Answer 1

方法1

Mozify 用于“只是”在具有较小图像的单元格中切割较大的图像，并使用其背景颜色来实现马赛克效果。

使用这种解决方案，当未加载图像时，它只显示单元格的背景。

您还可以使用样式格式化替代文字（适用于Gmail，雅虎和大多数移动设备）：

<img src="http://domain.tld/img/image.jpg" alt="Your text!" style="font-size:22px; color:#ffffff; font-family:arial" >

PROs：

普遍支持
简单有效（即使没有Mozify）。 Photoshop就足够了。

<强>缺点：

它会影响邮件的重量
由于X和警报文本，邮件在Outlook中看起来不太好要求在每个单元格中下载图像。

方法2

当前版本的Mozify（v1）采用了完全不同的方法：它为马赛克创建了一个替代表格（带有单元格和背景，没有图像切片）

<DIV CLASS="tempMozHolder" ID="m_wwlIf" STYLE="display:inline; margin:0; padding:0; float:none">
  <STYLE TYPE="text/css">
    .ExternalClass .ecxhm1_wwlIf{width:690px !important;height:620px !important; float:none !important}
    .ExternalClass .ecxhm2_wwlIf{display:none !important}
    .olwwlIf td b{width:1px;height:1px;font-size:1px}
    .olwwlIf{-webkit-text-size-adjust: none}
  </STYLE>
  <!--[if gte mso 9]><style>
.olwwlIf{display:none !important}
</style><table cellpadding="0" cellspacing="0" style="display:block;float:none;" align=""><tr><td><img alt="" border="0" height="620" src="http://domain.tld/img/image.jpg" style="margin: 0px; padding: 0px; display: block;" title="" width="690"></a></td></tr></table><style type="text/css">/*<![endif]-->
  <TABLE ALIGN="" BORDER="0" CELLPADDING="0" CELLSPACING="0" CLASS="olwwlIf" STYLE="display:block;float:none" WIDTH="690">
    <TBODY>
      <TR>
        <TD CLASS="olwwlIf" STYLE="padding:0px 0px 0px 0px;">THAT'S YOUR MOSAIC TABLE</TD>
      </TR>
    </TBODY>
  </TABLE>
  <!--[if gte mso 9]>*/</style><![endif]-->
</DIV>

诀窍是css和MS脚本的组合。之间的代码 将仅由Outlook读取。

PROs：

此HTML比方法1
邮件看起来非常酷，支持

<强>缺点：

并非普遍支持
它更复杂，你需要Mozify自动化它

希望这会有所帮助;）

Answer 2

当它开始变得流行时，我玩了几个星期。关于Acid的电子邮件并没有开创这项技术，但他们确实围绕这项技术创建了一个新颖的用户界面，使其非常容易用于外行。

作为我对我的雇主的研究的一部分，我创建了类似的原型的原型，可在此处获得perl：https://github.com/kamelkev/HTML-ImageToMosaic

关于如何实现效果真的没有太复杂。基本上，您执行原始图像的一种采样，并使用HTML表生成基于图块的表示。使用rowspan和colspan，你可以减少HTML所占用的总长度，否则就是......很大。

从这一点开始，您只需将图像注入html电子邮件消息中的适当位置并使用一些仔细的CSS，您将获得所有网络邮件和一些现代邮件阅读器（如mail.app）的支持 - 您仍希望做得更好比那......

用户VoT注意到有关MS脚本的信息。他是正确的，这是支持各种Microsoft客户所必需的。

如果您遵循Email on Acid使用的一般模板，您可以获得非常好的整体客户端支持，尤其是对于最新的浏览器和客户端。

话虽这么说，我不确定您是否会看到该功能＆＃34;赶上＆＃34;，因为它会大大增加您最终电子邮件的大小。这可能听起来很小，但是当您发送50,000封电子邮件时，这可能是个问题。我使用这种技术看到100k标记周围的最终电子邮件并不少见，特别是如果使用了多个图像...

在HTML电子邮件中叠加图像

2 个答案:

方法1

方法2