CODEWITHSUNDEEP
htmlhtml-email
Paul
Paul

Reputation: 536

Overlay images in HTML email

Mozify from emailonacid uses a coloured mosaic of table cells to render an approximation of an image before the image is loaded in emails.

When the image is loaded, it overlays the entire table - the mosaic is hidden. I am assuming it is "behind" the image once it loads.

One of the options with Mozify is to replace an image that contains text and background, with an HTML background (solid colour) with HTML text. How can you have both text and an img in a cell, yet not have the text show when the image is loaded?

How is this achieved? I would have thought that if an image was in a cell it would simple push all the other cells down and around to fit itself in.

Upvotes: 3

Views: 3406

Answers (2)

kamelkev
kamelkev

Reputation: 1156

I played with this for a couple weeks when it started to become popular. Email on Acid didn't pioneer the technique, but they did create a novel user interface around the technique that made it very easy to use for laypeople.

As part of my research for my employer I created a prototype of something similar, which is available for perl here: https://github.com/kamelkev/HTML-ImageToMosaic

There really isn't anything too complicated about how the effect is achieved. Basically you perform a type of sampling of the original image and generate a tile based representation with an HTML table. Using rowspan and colspan you can cut down on the total length taken up by the HTML, which otherwise is rather... voluminous.

From this point you simply inject the image into the appropriate place within the html email message and use some careful CSS, and you will have support on all webmail and some modern mail readers like mail.app - still you want to do better than that...

User VoT notes about about MS script. He is correct that this is necessary to support the various Microsoft clients.

If you follow the general template that Email on Acid uses you can get very good overall client support, especially with the latest browsers and clients.

That being said, I'm not sure you'll ever see the feature "catch on", as it substantially increases the size of your final email. This may sound minor, but when you are sending 50,000 emails it can be a problem. It was not uncommon for me to see final emails around the 100k mark using this technique, especially if multiple images were used...

Upvotes: 1

VoT
VoT

Reputation: 525

METHOD 1

Mozify used to "just" slices the bigger image in cells with smaller images and use their background colors to achieve the mosaic effect.

With this kind of solution, when an image isn't loaded it just shows the cell's background.

You can also format alt text using style (Works on gmail, yahoo and most mobile):

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

PROs:

  • it's universally supported
  • It's easy and effective (even without Mozify). Photoshop is enough.

CONs:

  • it very affects the weight of the mail
  • the mail doesn't look too much well in Outlook due to both the X and the alert text asking to download the images in every single cell.

METHOD 2

The current version of Mozify (v1) has a totally different approach: It creates an alternative table for the mosaic (with cells&background, WITHOUT image slices)

<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>

The trick is the combination of css and MS script. The code between <!--[if gte mso 9]> and <![endif]--> will be read only by Outlook.

PROs:

  • This HTML is much lighter than method 1
  • the mail looks VERY cool where supported

CONs:

  • it's NOT universally supported
  • It's more complicated, you need Mozify to automate it

Hope this helps ;)

Upvotes: 2

Related Questions