Bypass image blocking by converting images to HTML by Anna Yeaman @stylecampaign


Anna Yeaman of StyleCampaign has a way for you to work those images into your eMail marketing without having to worry about client image blocking. It makes me nostalgic for the grand old days of ASCII art and BBS’s where a welcome screen graphic on a 300 baud modem would take five minutes to load — nice pirate ship! Now let me just log in please. There are plenty of converters on the web for HTMLizing images but, Anna and her team have created their own app which from what we’ve seen, does a stellar job.

– Jim

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.

View and forward yourself one of our 3 demos, I can only see how many times our demos are forwarded not your email address.

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.

Images blocked in Outlook 07

File size and client rendering time prevent us from using this technique over large areas. I suggest focusing 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.

Sample 1 – Google Logo

Sample 2 – eBay Logo

Besides logos and social icons, I plan to test other graphics in the preheader, like this video graphic.

Video Sample

Forward yourself the Samsung demo »

2. Pixel art iPod {view 33k}


pixel art ipod

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

Style Campaign holiday card

pixel santa 26x32

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
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 Yes
MSN Hotmail 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.


Image to HTML 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.

Meet the author:

Anna Yeaman

Anna Yeaman

Anna Yeaman is the Co-Founder and Creative Director at STYLECampaign, an email creative agency in LA.

Connect with me:

Share this page:

Share on linkedin
Share on facebook
Share on twitter
Share on email

Connect with us:

To stay in the know and get the best eMail Marketing information that will teach you how to BEE an eMail Marketing Ninja.

Share this page:

Share on linkedin
Share on facebook
Share on twitter
Share on email

to download our
“27 Free Tools Every
eMail Marketer Needs
in Their Toolbox”


Your privacy is our privilege!
We will never rent, sell or share your data. 
You can unsubscribe at any time, but you won’t want to 😃

SUBSCRIBE to our newsletter
to download our FREE GUIDE
“27 Free Tools Every
eMail Marketer Needs in Their Toolbox”

Download our free guide 27 Free Tools Every eMail Marketer Needs in Their Toolbox

Download our FREE GUIDE

Your privacy is our privilege!
We will never rent, sell or share your data. 
You can unsubscribe at any time, but you won’t want to 😃

This website uses cookies to ensure you get the best experience on our website.