Bypass image blocking by converting images to HTML
Many email clients such as Outlook 2007 and Gmail block images by default.
48% see pictures automatically (in HTML emails) while 52% do not - Merkle (2009)
As a solution, we wrote an app that converts each pixel of an image into a corresponding HTML cell. It works in all email clients, except for Lotus Notes 6.5 & 7. It also works on the iPhone.
1. Logo + social icons {view - 69k}
Below is a screenshot showing a Samsung email in Outlook 2007, with images blocked. As you can see, the converted logo and social media icons still display.
File size and client rendering time prevent us from using this technique over large areas. I suggest focusing your efforts on the preview pane.
69% of at-work email users view emails in their preview panes (80% of those use Outlook) - MarketingSherpa (2007)Here are a couple of other logos we have converted.
Besides logos and social icons I plan to test other graphics in the preheader, like this video graphic.
Forward yourself the Samsung demo »
2. Pixel art iPod {view 33k}
This is what the iPod looks like before running it through our app, we scaled it 8x. The Apple logo was converted 1-1.
By utilizing the scale parameter with pixel art, you can create unconventional email templates. It would be painful to try and code these by hand.
You can then incorporate HTML text, as the block renderer can convert large areas of color into one cell.
Pixel art is not for every brand, but it would stand out in an inbox dominated by rectangular designs. It's also 100% visible with images blocked. Forward yourself the iPod demo »
3. Holiday card {view 32k}
The pixel art Santa, snowflakes and the robin are all HTML cells. We ran them through our app individually, scaling the Santa 11x and keeping the robin and snowflakes 1-1. We then combined them and added HTML text.
Forward yourself the Xmas demo »
How it works
There are image to HTML converters out there, but none targeted at the email environment. They also lack scaling or compression of the HTML output.
Our first test, back in Dec 2007 failed in Outlook 2007 and Outlook XP. It did pass the Spam test at 100% though.
Graeme has provided more detail below about how it works:
The Command line application was written in Java and can be run with multiple parameters to allow HTML output in a variety of formats, from standard HTML table layout to full CSS. Comprehensive testing determined that the standard HTML table layout was the most reliable.
The application utilizes a simple run length style compression system, using table cell colspan to create rows of contiguous color. This saves significantly on file size and client processing time. A background color can also be passed as a parameter, so that cells containing the specified color do not have to have their color defined in the table cell, further saving file size.
We experimented with a block based compression system combining rowspan with colspan to create blocks of contiguous color. The minimum length of a span that can be 'stretched' vertically being passed as a parameter. However, this process proved to be inefficient and resulted in file sizes that were, at best, not significantly smaller than the runlength method and in some cases larger. This was due to the simple compression logic creating vertical columns that would split subsequent rows of contiguous color, resulting in extra cells being generated per row.
A more sophisticated method may prove efficient, but would require more complex image analysis and would probably involve several passes to determine optimum table layout. The block method does prove useful in one respect however; when it is necessary to create large empty cells for text fields and other integrated content. The application can target specific colors for block treatment, the target color being passed as a parameter. This allows the user to draw into the bitmap large colored rects to determine areas for empty multi row/column cells.
(In plain English we found an Outlook 07 and XP workaround and compressed the file sizes down to a manageable level for email. We are still working on further optimizations.)
Support for Images to HTML
| IMG - HTML support in email | |
|---|---|
| Desktop clients | |
| AOL 9 | Yes |
| Apple Mail 3 | Yes |
| Lotus Notes vr 6.5 & 7 | No |
| Lotus Notes vr 8 | Yes |
| AOL | Yes |
| Outlook XP | Yes |
| Outlook Express 6 | Yes |
| Outlook 2000 | Yes |
| Outlook 2003 | Yes |
| Outlook 2007 | Yes |
| Thunderbird | Yes |
| Windows Mail | Yes |
| Web clients | |
| AOL Web | Yes |
| Gmail | Yes |
| Mobile me | Yes |
| Windows live hotmail | Yes |
| Yahoo Mail + Classic | Yes |
| Comcast | Yes |
| Earthlink | Yes |
| Mail.com | Yes |
| MSN Hotmail | Yes |
| Mobile | |
| iPhone | Yes |
| Web browsers | |
| Firefox | Yes |
| Chrome | Yes |
| Internet explorer | Yes |
| Safari | Yes |
This technique works in all email clients, except for Lotus Notes Vr. 6.5 and 7. Our app works in Lotus Vr 8, released in Aug 2007.
"PV data shows total Lotus opens for B2B senders over past 3 months was 6.29% ... for B2C was only 0.9% . " - Jordan Cohen of Pivotal Veracity.Campaign Monitor put Lotus Notes market share at at 1.72%. I've been unable to find data that distinguishes between different Lotus versions.
The link to the web version acts as a fallback for that one Lotus Vr 7 holdout, alternatively you could segment Lotus Notes users. We'll continue to work on creating a solution for all email clients.
Conclusion
Our Image to HTML app is a partial solution to image blocking. The dominance of the preview pane and value we place on preheader space, means this technique has its uses.
“The preheader is probably the area [of an email] with the most creative growth,” said Matt Caldwell of Yesmail at The Email Insider Summit this month.
Whether it's a logo standing out in a sea of suppressed images or a bunny shaped email, it can help cut through inbox clutter.
Yes, file size and processing overhead are big constraints. But with one in five emails invisible and ineffective due to blocked images (EEC) and 30% of recipients unaware that images are even disabled (Epsilon), I'll take what help I can get.
Update Dec 31st: Block Renderer
Graeme tweaked the block renderer, which reduced file sizes significantly. Although some artwork had savings of up to 60%, your looking at 20-30% on average:
ebay logo Was 39.8k - Now 27.1k = 32% reduction
ipod email Was 32.2k - Now 22.6k = 30% reduction
Google logo Was 124k Now 99.7k = 20% reduction
Further optimizations are still possible.
Painting HTML layouts:
Two features of the block renderer for email designers:
1. Shortcut to traditional designs:Besides using the app to create iPod or bunny shaped templates, it can be used as a shortcut for traditional designs. Draw a few colored pixels in Photoshop, scale it up and you have the foundations of an email template.
As an example we drew this Mondrian inspired image in Photoshop. Ran it through our app to create this template. The whole process took less than a minute.
2. Assign a color value:
The block renderer can work exclusively on an assigned color, such as green (#00FF00). If you take the iPod example, we wanted to insert some HTML in the green areas below. To save time we painted green blocks in Photoshop, then converted the image to HTML. The four cells were exactly where we needed them. We just changed the background color from green to white.
Email specific features:
Conceived and optimized for the email environment. This is not a web app...
Background color option: reduces file size by allowing cells with no bgcolor property.
HTML DOCTYPE agnostic: Specifying DOCTYPE in web based clients will fail (all code outside body tag stripped by web clients). HTML optimized for maximum compatibility.
Outlook 2007 and XP compatibility.
Block based compression (combines colspan/rowspan), reduced file size.
Scaling: Enables pixel art design and fast template prototyping. All HTML output modes are scalable.
Also check out: Mobile email pixel art