3

emailonacid の Mozify は、テーブル セルの色付きのモザイクを使用して、画像が電子メールに読み込まれる前に画像の近似値をレンダリングします。

画像が読み込まれると、テーブル全体にオーバーレイされます。モザイクは非表示になります。画像が読み込まれると、画像の「背後」にあると想定しています。

Mozify のオプションの 1 つは、テキストと背景を含む画像を、HTML テキストを含む HTML 背景 (単色) に置き換えることです。セルにテキストと img の両方を配置しながら、画像が読み込まれたときにテキストが表示されないようにするにはどうすればよいでしょうか?

これはどのように達成されますか？画像がセル内にある場合、他のすべてのセルを押し下げて、それ自体に収まるようにするだけだと思っていたでしょう.

4

2 に答える 2

2

方法 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 が必要です

お役に立てれば ;）

于 2013-10-07T10:55:57.463 に答える
1

人気が出始めたとき、私はこれで数週間遊んだ。Email on Acid はこの手法の先駆者ではありませんでしたが、この手法を中心に斬新なユーザー インターフェイスを作成し、素人が非常に使いやすくしました。

私の雇用主のための調査の一環として、似たようなもののプロトタイプを作成しました。これは、ここで perl で利用できます: https://github.com/kamelkev/HTML-ImageToMosaic

効果がどのように達成されるかについて、それほど複雑なことはありません。基本的に、元の画像の一種のサンプリングを実行し、HTML テーブルを使用してタイル ベースの表現を生成します。rowspan と colspan を使用すると、HTML が占める全体の長さを削減できます。

この時点から、HTML 電子メール メッセージ内の適切な場所に画像を挿入し、慎重な CSS を使用するだけで、すべての Web メールと mail.app などの一部の最新のメール リーダーがサポートされます。 ..

ユーザー VoT は、MS スクリプトに関するメモです。これがさまざまな Microsoft クライアントをサポートするために必要であるという彼の意見は正しいです。

Email on Acid が使用する一般的なテンプレートに従えば、特に最新のブラウザとクライアントで、非常に優れた全体的なクライアント サポートを得ることができます。

そうは言っても、最終的なメールのサイズが大幅に増加するため、この機能が「キャッチオン」になるかどうかはわかりません. これは些細なことのように聞こえるかもしれませんが、50,000 通のメールを送信している場合は問題になる可能性があります。特に複数の画像が使用されている場合、この手法を使用して最終的な電子メールが 10 万件前後になることは珍しくありませんでした...

于 2014-06-29T23:26:14.027 に答える