Using tables to create images where none are allowed.

A hot new topic in digital marketing is the use of mosaics to create images in email browsers where displaying images is turned off. Most email browsers, such as Gmail and Outlook, default to leaving images turned off. That means when you receive an email, any images in the email show up as empty boxes with some alternative text in place of the images (a good reason to always make sure your alt tags are always descriptive). A clever solution comes to us from Style Campaign in the form of their BMP to HTML Converter, which they offer as a free download on their website.

Major ISPs are already blocking mosaics, but not in the standard way they block emails. We’ll explain in a minute, but first, here’s a brief explanation of how mosaic software works: A digital image is made up of pixels. Mosaic software takes those pixels and converts them into empty HTML table cells. Each cell is given a background color that matches the color of the corresponding pixel. The end result is nearly indistinguishable from the original image. Here’s a screenshot showing our logo in both versions (the mosaic is on the left):

As you can see, the results are impressive. Suddenly you don’t have to worry about whether or not your images will show up. You can add visual information to any email, and visual information has a better chance of translating into sales.

But before you get too excited…

…there are some caveats, and they are big ones. First and foremost is the fact that most email and web design programs have trouble showing these objects accurately. Here’s what the table version of the Goolara logo looks like in Dreamweaver:

There nothing wrong with the mosaic, it’s just too much information stuffed into too small a space for a visual HTML editor to handle. Even here on this blog, I had to use a screenshot instead of the mosaic because the HTML editor for WordPress simply couldn’t handle the table. Visual HTML editors, such as Dreamweaver, want to show you the boundaries of each table cell and there’s simply not enough room to do so. The end result is a file that, while it may send okay, requires much more caution and testing before approval.

Also keep in mind that stuffing your email with tables this complex makes for a very large email file. So large, in fact, that some services, such as Gmail, may lop off part the file if you’re not careful, leaving you in a worse situation than if you’d actually used image files. In the case of our logo, the PNG file comes in at 10Kb compared to the HTML table version, which is 93Kb, and that’s before you’ve added a single line of text. The Goolara logo is a relatively small file—168 pixels by 75 pixels—but even here, we found that the email we sent was clipped after the mosaic in Gmail and Yahoo. Both of these programs required me to click a link in the display before they would download the rest of the message, which is much more confusing than the standard message about images being blocked. In the case of Gmail, the mosaic was slightly clipped as well, causing some artifacts at the bottom of the image.

File size is the real problem with mosaics.  The reason ISPs block images is because images require the browser to fetch files from the sender’s server, alerting them that the person has opened the email. To protect the privacy of their clients the ISPs allow each person to decide whether or not they want to see the images in an email. Privacy is not the issue with mosaics; it’s bandwidth. Say you send out 500,000 messages every week and each email, without the images, runs approximately 5Kb. That’s pretty big for an email already, but at that rate your sending out 2.5 Gigabytes of data. Now add our little 93 Kb image to that file and the number jumps to 49 Gigabytes! Suddenly you’re taking up almost twenty times the bandwidth to add a tiny image to the email. One way around this is to reduce the resolution of mosaic drastically, but then you end up with an email that looks like an Atari video game from 1982.  Beyond the bandwidth, the ISPs now need to store a message that is 20 times bigger than the previous average.  If many companies started to use this technology you could see that the cost to ISPs for storage and bandwidth could become quite significant.

These are all pretty big caveats. Right now, you should approach this technology with caution and use it only on images that are either very small, or are intentionally low resolution. Even so, you should keep track of your file sizes and remember that the bigger the file you are sending, the greater the opportunity for things to go wrong.