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

HTMLimages2

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}

iPod

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

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.

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 facebook
Share on twitter
Share on linkedin
Share on digg

Share this page:

Share on facebook
Share on twitter
Share on linkedin
Share on digg

SUBSCRIBE
and learn the secrets that
eMail Marketing Ninja’s need

 

Your privacy is our privilege!
We will never rent, sell or share your data. 

14 Comments

  1. Anna Yeaman January 4, 2010
  2. Anna Yeaman January 4, 2010
  3. Chicago Wedding Photographer February 17, 2011
  4. Chicago Wedding Photographer February 17, 2011
  5. Elliot Ross February 17, 2011
  6. Elliot Ross February 17, 2011
  7. Anna Yeaman February 17, 2011
  8. Anna Yeaman February 17, 2011
  9. Milind June 21, 2012
  10. Milind June 21, 2012
  11. Sharath kumar November 21, 2013
  12. Sharath kumar November 21, 2013
  13. Alexei Zoubov November 11, 2017
  14. Alexei Zoubov November 11, 2017

Leave a Reply

SUBSCRIBE and get the secrets 
that marketers need to BEE an
eMail Marketing Ninja + download our
“eMail Design Mockup Tool”

Email Design Tool Free Download

Get the Secrets +
Download the eMail Mockup tool!

Your privacy is our privilege!
We will never rent, sell or share your data. 

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