Thursday, November 27th, 2014

8
VN:F [1.9.22_1171]
Rating: 4.3/5 (13 votes cast)

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.

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}

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.

Other post by this Author

Comments

8 Responses to “Bypass image blocking by converting images to HTML by Anna Yeaman @stylecampaign”
  1. Sharath kumar says:

    Interesting! ……So how do i make or convert and image to html/pixel art, are there websites or software for the same?? Thank you.

  2. Milind says:

    This is an awesome technique! Would have loved to see more examples of pixel art, but I will google them. Does anyone have any nos of increased email conversions after switching from images to pixel art in their headers or logos?

  3. Anna Yeaman says:

    We came across the 100K Gmail file size limit early on ourselves. You’ll notice the demos above are all <100k (as was our Pacman email: http://stylecampaign.com/blog/?p=84 ). It's definitely a limitation.

    I like to create pixel art templates but most of the interest has been in converting logos. There are a no. of ways to reduce file size such as no. of colors, bit depth and resolution. It's a free app we give away to our newsletter subscribers, over a year old now. A toy we made for some in-house fun.

    - Anna

  4. Elliot Ross says:

    Love option 1, and it’s something we’ve implemented in the past for clients. One thing to look out for though, is that Gmail will truncate the code around the 100kb mark, so be sure to avoid that happening as a result of a bloated image-as-table logo – it can result in pretty out there rendering issues if not done right!

  5. That’s pretty amazing. File size would definitely be a concern, but creating html versions of logo or icons could definitely be helpful in getting those crucial clicks.

  6. Anna Yeaman says:

    Just wanted to mention that I’ve added an update at the bottom of the original post: http://tinyurl.com/yhz7dhy

    Smaller file sizes 20-30% on average…also a new demo showing how you can use the app as a shortcut when coding traditional HTML layouts.

    We list a few of the features that make the app email specific. Such as compatibility with Outlook 2007 and scaling, none of the existing converters I’ve seen have these features as they were not conceived for email….

Trackbacks

Check out what others are saying about this post...
  1. [...] If you’ve got images of your product, go ahead and include them. Like they say, an image is worth a thousand words. Just remember, some email readers strip out images so make sure your copy that you write also tells the story. (editor’s note: here’s one way to avoid blocking using HTMLized images) [...]

  2. [...] This post was mentioned on Twitter by andrewkordek, The Email Guide. The Email Guide said: Bypass image blocking by converting images to HTML by Anna Yeaman of StyleCampaign http://bit.ly/7VGmpi ^jd #emailmarketing #email marketing [...]



Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!