3

来自 emailonacid 的 Mozify 使用表格单元格的彩色马赛克来渲染图像的近似值，然后再将图像加载到电子邮件中。

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

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

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

4

2 回答 2

2

方法一

Mozify过去“只是”将较大的图像分割成具有较小图像的单元格，并使用它们的背景颜色来实现马赛克效果。

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

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

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

优点：

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

缺点：

  • 它非常影​​响邮件的重量
  • 由于 X 和警告文本都要求下载每个单元格中的图像，因此邮件在 Outlook 中看起来不太好。

方法二

当前版本的 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脚本的组合。<!--[if gte mso 9]>和之间的代码 <![endif]-->只能由 Outlook 读取。

优点：

  • 此 HTML 比方法 1 轻得多
  • 邮件在支持的地方看起来很酷

缺点：

  • 它没有得到普遍支持
  • 比较复杂，需要 Mozify 来自动化

希望这可以帮助 ;）

于 2013-10-07T10:55:57.463 回答
1

当它开始流行时，我玩了几个星期。Acid 上的电子邮件并不是这项技术的先驱，但他们确实围绕该技术创建了一个新颖的用户界面，使外行人非常容易使用它。

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

关于如何实现效果真的没有什么太复杂的事情。基本上，您对原始图像执行一种采样，并使用 HTML 表生成基于图块的表示。使用 rowspan 和 colspan 您可以减少 HTML 占用的总长度，否则会相当...大量。

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

关于 MS 脚本的用户 VoT 注释。他是正确的，这是支持各种 Microsoft 客户端所必需的。

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

话虽如此，我不确定您是否会看到“流行”功能，因为它大大增加了最终电子邮件的大小。这听起来可能微不足道，但是当您发送 50,000 封电子邮件时，这可能是个问题。对我来说，使用这种技术看到大约 100k 大关的最终电子邮件并不少见，尤其是在使用多张图像的情况下......

于 2014-06-29T23:26:14.027 回答