方法 1
以前の Mozifyは、大きな画像を小さな画像のセルに「ちょうど」スライスし、それらの背景色を使用してモザイク効果を実現していました。
この種のソリューションでは、画像が読み込まれていない場合、セルの背景だけが表示されます。
スタイルを使用して代替テキストをフォーマットすることもできます (gmail、yahoo、およびほとんどのモバイルで動作します)。
<img src="http://domain.tld/img/image.jpg" alt="Your text!" style="font-size:22px; color:#ffffff; font-family:arial" >
長所:
- それは普遍的にサポートされています
- 簡単で効果的です (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スクリプトの組み合わせです。<!--[if gte mso 9]>
との間のコードは
<![endif]-->
、Outlook によってのみ読み取られます。
長所:
- この HTML は、方法 1 よりもはるかに軽量です。
- サポートされている場所では、メールは非常にクールに見えます
短所:
- それは普遍的にサポートされていません
- もっと複雑です。自動化するには Mozify が必要です
お役に立てれば ;)