Bypass image blocking by converting images to HTML

Update: Download the app image-HTML app (zip download PC only), here’s a video showing how to use it. Just keep in mind we built this toy in 2009 and its not been maintained.

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.

Images blocked in Outlook 07

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}

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

mondrian template

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.

iPod block renderer

 

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

 

47 Responses to “Bypass image blocking by converting images to HTML”

  • Bloggers Digest December 2009 | Get Elastic
    December 28th, 2009 04:00

    […] Bypass Image Blocking By Converting Images Into HTML via StyleCampaign […]

  • Jon Schneider
    December 28th, 2009 06:55

    Interesting technique! I viewed the “Holiday Card” sample in my Novell Groupwise 7 desktop email client, and it did display correctly.

    Is your “image to HTML” conversion utility available for download, or is it proprietary?

  • Peter Roebuck
    December 28th, 2009 10:52

    Very cool Anna! You couldn’t hand code that in a hundred years if you wanted to.

    I can see where this could be very useful in email pre-headers, logos and even above-the-fold Call To Action.

    What happens in Lotus Notes? Does all the Table code just make Notes fail altogether?

    Thanks!

  • anon
    December 28th, 2009 12:00

    very clever …. are you going to be making the application available, meaning, can we buy it?

  • Anna Yeaman
    December 28th, 2009 14:06

    Great to know that it displayed correctly Jon. Right now it’s a Java command line app, with switches for the different parameters like scale, CSS or HTML, background color ect

    Graeme is considering porting it to C, which would make it more user friendly. It depends on the feedback/demand we get.

    Hi Peter,

    it works in Lotus Notes 8 - the latest version which has been around 2.5yrs with 8.5 now available for trial - but fails in 6.5 and 7.

    We are going to look into a workaround, as it currently stretches the tables. It’s not invisible like Outlook 2007 was before we fixed it, just distorted.

  • uberVU - social comments
    December 29th, 2009 01:25

    Social comments and analytics for this post…

    This post was mentioned on Twitter by ESPs: Bypass image blocking by converting images to HTML http://bit.ly/5ZpGVO…

  • Ted
    December 29th, 2009 08:18

    Very clever. But wrong. You have no way of knowing which people have purposely turned images off because they have bandwidth issues or have been burned by porn in their inbox before. Publicizing this technique is a great disservice to end users. Boo!

  • Peter Roebuck
    December 29th, 2009 14:53

    Put me down for at least one copy Anna & Graeme.

  • Heather C
    December 30th, 2009 07:04

    We’d love to use this technique! Keep us updated!

  • pagetronic
    December 30th, 2009 15:24

    Hi,
    I love so, I made a little php function to transform an image in html
    http://seofuckly.com/img2html/

    thanks for this postl

  • Pedro
    December 30th, 2009 18:31

    Very novel idea! One possible downside is the huge jump in size when converting the image to HTML. Your sample Google logo HTML takes up 125 kb, which may not be a huge issue over decent broadband, but it’s still many times its regular filesize. Gzipping it takes it down to 7.6 kb, which is about what the original image would be. If mail servers compress messages before sending them to the user (I don’t know if they do) like web servers compress website content, this could be really good.

  • Online Marketing Blog » Blog Archive » links for 2009-12-29
    December 31st, 2009 00:05

    […] Bypass image blocking by converting images to HTML this is pretty cool! I’d love to get my hands on that app! (tags: design coding) […]

  • Michelle Klann
    December 31st, 2009 14:21

    Very interesting stuff here - I love it when people push the envelope and think outside the box. Keep up the good work :)

    And if anyone wants to test this out, feel free to check out our free email testing tool.

  • Anna Yeaman
    December 31st, 2009 19:51

    Nice php script pagetronic!

    - Graeme

  • Bright New Media
    January 5th, 2010 00:43

    […] another gem from LA based email marketers, Style Campaign. Image to HTML scripts convert an image, a logo, graphic or even a photo, to HTML code by replacing […]

  • Elliot Ross
    January 5th, 2010 11:16

    good work! we’ve had a go at this a few months ago, it worked partially but we came up against problems when rendering complex logos in gmail - gmail mailings truncate after 100k of html code, so if you’ve taken 99k to code a logo there’s not much left :)

  • Anna Yeaman
    January 5th, 2010 11:47

    Thanks Elliot,

    were aware of the Gmail issue, I’d not advise sending 100K of HTML to any client because of the time some take to draw (Outlook 07 is slower than others).

    As you’ve found out, some logos will be too complex/large to convert…without a doubt this technique has its limitations. We’ll continue to chip away at file sizes, Graeme tells me there are optimizations he’s not yet implemented.

    I’d love to see what you guys did if you want to drop me an email…anna (at) stylecampaign.com

  • Scott Hardigree
    January 7th, 2010 13:07

    Hey Guys - Here’s another resource, in Perl. How does it stack up?

    http://neil.fraser.name/software/img2html/

    -S.

  • Anna Yeaman
    January 8th, 2010 11:25

    Hi Scott,

    glad you asked :) Graeme ran Neil’s, ‘Tux’ example through our converter and saw a 69% reduction in file size. Neil’s converter is cool, but our app was created for email and has different requirements.

    Neil’s converter:

    Has RLE compression but no block.
    Uses <img> tag to size cells (bloated).
    Does not include fix for Outlook 2007/XP.
    Completely unformatted HTML means difficult to alter and add content.
    No default background colour, so all cells contain bgcolor parameter (bigger
    files).
    JPG source files = lots of colours (bloated file)
    Obviously it doesn’t do scaling.

    G.

    P.S. Did some quick tests. Converted his ‘tux’ example to a 24bit bitmap and
    ran it through our converter. Got a 178K file as opposed to the 274K that
    his script generated (35% reduction). That’s without any optimization of the
    image. Quick optimization reduced it further to 150K (46% reduction). Got it
    down to 85K without any noticeable loss of quality (69% reduction).

  • Scott Hardigree
    January 8th, 2010 12:10

    Once again…very impressive! Have you considered adding a ‘quality’ function that would allow the user to test quality against file size?

  • Anna Yeaman
    January 8th, 2010 12:27

    No, but the output is variable. The source bitmap file is what determines quality, relative to file size. Images can be converted at any bit depth (e.g. 4, 8 or 24bit).

    Optimizing the source file by cleaning up the image (e.g. stray pixels) can make a big difference. We’ve seen savings in file size of 20-30% just by cleaning the source image.

    You can remove return characters to reduce size, but that makes it harder to read and edit.

    There is also an advanced feature, which allows you to set the minimum tile width for the block compression. This affects file size also…

    So there are a few parameters you can play around with, but its largely trial and error.

  • Email Marketing: Importante Innovación en Diseño | Email Marketing Point
    January 12th, 2010 05:02

    […] que transforma a código HTML las imágenes de nuestra campaña. Por lo que se aprecia en el artículo original, la empresa ofrece este servicio para todo lo que respecta a logos corporativos y botones para […]

  • mathieu
    January 20th, 2010 03:18

    Hi Anna,

    looping back from Jon’s question : Is your “image to HTML” conversion utility available for download, or is it proprietary?

  • Ben Twomey
    January 20th, 2010 05:47

    I saw this on the Campaign Monitor blog and it looks awesome. Well done all round!

    Will you be making the app available for download (free or paid-for) when it gets to a more user-friendly state, ‘cos I’d love to have a go with it :)

  • Naca-Yoda
    January 20th, 2010 15:10

    Also found this article via CM news. Great theories at work here.
    Please publish this app for us all to play with!

  • jody
    January 21st, 2010 13:25

    neato… would love to experiment with converting our organization’s logo, let me know when it is available.

  • Transformer une image en html sans images :) « SeoFuckly
    January 22nd, 2010 05:19

    […] Découvert sur Twitter grâce à Toucouleur une sympathique technique pour contourner les limitations à afficher les images dans les newsletter […]

  • Schepp
    January 26th, 2010 06:29

    Hey guys! I had that type of script lying around for quite some time now. I built it just for fun some years ago, also with the intention to circumvent image-blocking in emails.

    So I cleaned it up and put it for you to download on Github:
    http://github.com/Schepp/IMG-2-TABLE

    It might not be 100% bulletproof for all email-clients as I opted for better “compression” and therefore make use of CSS-classes instead of wiring the colors directly to the ’s.

    There is no documentation or inline code-commenting in there at the moment, but I think it should speak for itself.

    Have fun!

    Schepp

    PS: I ran the Tux.jpg though my converter, and it squeezes it down to 48KB. That’s quite cool (at the cost of probably being less suited for cross-(email-)client-compatibility)

  • Anna Yeaman
    January 26th, 2010 17:06

    Hi Schepp,

    while you have written a cool php script, the fact that it’s not compatible in the email environment, defeats the purpose of our C app. Which is bypassing image blocking in email :)

    I’m not a programmer so I had Graeme take a look:

    Your ‘Compression’ uses CSS class interface (not in-lined css, it’s defined
    in the head which is stripped out, it would fail…)

    Uses RLE type ‘rowspan’ compression, not blocks so file size is not
    optimal.

    Not html DOCTYPE agnostic. So I would expect formatting issues depending on
    the client.

    No solution for Outlook 07 (so it would fail)

    NOTE: the 48KB Tex.jpg test would fail on all of the above.

    G.

  • Schepp
    January 26th, 2010 17:58

    Hi Anna,

    you are the experts regarding Outlook 07 and the sorts, that’s out of question.
    But… :)

    1) The styles are in fact part of the body, not head, which isn’t the clean HTML-style but, hey, email-HTML isn’t nice in general! :) In most client-apps, this would still work, as I already noticed in many cases. I don’t know about every case though.

    2) It is true that my script doesn’t pay any attention to the DOCTYPE, but again this is by design: it is a cost which one pays for being able to omit closing HTML-tags and not putting HTML-attributes inside quote. It is understood by HTML-renderers and even allowed by HTML (not XHTML). All this reduces code-size and in the end it simply just needs to work.

    3) On that missing “blocks”-compression you quote your programmer yourself earlier on by saying “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 is also my way of seeing it, especially as tables are rows-oriented by design. Or are you talking about something different?

    Anyway you now made me wanting to test putting that stuff into an email and checking it out with OL2007. I read a lot about it (and its brother 2010) so I am really really currious to see how this piece of MS-software tears everything apart… It must be horror. If you don’t hear from me any more, ahem, call the police ;)

    Regards from Germany

    Schepp

  • Anna Yeaman
    January 26th, 2010 20:13

    You’re right about block compression…when we first wrote this post we did not see a big improvement over rowspan compression (in some cases).

    Then Graeme made some revisions around a month ago (see update at bottom of post) and we saw 20-30% reduction in file sizes. Depending on the artwork we’ve had savings of up to 60%. Graeme believes he can reduce sizes further with a more sophisticated algorithm.

    Have fun trying to get your php script working in Outlook 2007! It is a horror, the bane of email designers everywhere :)

    - Anna

    p.s. Can you post a link to one of the images you have converted with your script?

  • Anna Yeaman
    January 27th, 2010 23:30

    Hi Schepp,

    You should not use <style type=”text/css”> tags in email, it will fail in most clients (I converted the ebay logo with your script, in Gmail it comes up blank):

    http://stylecampaign.com/blog/blogimages/pixel/ebay.gif

    You must use strictly formatted HTML for email client compatibility, you
    cannot omit closing tags, etc. Formatting shortcuts should not be used as a
    compression strategy.

    G.

  • Bloggers Digest December 2009 « Get Elastic
    February 2nd, 2010 15:25

    […] Bypass Image Blocking By Converting Images Into HTML via StyleCampaign […]

  • neosin
    February 3rd, 2010 12:42

    How do we go about getting your app? Is it free or do you charge for it?

  • Truc et astuce: Comment garder des petits visuels toujours visibles | BLOG PARTY
    February 23rd, 2010 09:05

    […] article de stylecampaign nous dévoile une belle astuce pour garantir la passage de petites images tels que le logo auprès […]

  • Anna Yeaman
    March 9th, 2010 17:28

    Hi neosin,

    you get a free license to our app when you join our monthly newsletter. The download link is in the welcome email. You can join to your left, in the gray column…

    - Anna

  • Emails Marketing » Trucs & Astuces : Comment garder des petits visuels toujours visibles
    March 21st, 2010 05:49

    […] article de stylecampaign nous dévoile une belle astuce pour garantir la passage de petites images, tel que le logo d’un […]

  • No más imágenes bloqueadas en el Email Marketing
    June 5th, 2010 20:32

    […] que transforma a código HTML las imágenes de nuestra campaña. Por lo que se aprecia en el artículo original, la empresa ofrece este servicio para todo lo que respecta a logos corporativos y botones para […]

  • Dimitris
    July 14th, 2010 23:17

    I have joined your newsletter some months ago. How can I get the link to download the file ?

  • Anna Yeaman
    September 25th, 2011 13:13

    If you want a free copy of the app either join our newsletter here: http://stylecampaign.com/newsletter.html
    - download is in the welcome email - or drop me an email anna (at) stylecampaign.com

  • Rocky
    July 30th, 2012 10:49

    Hello. I have an image and it’s a flyer with a lot of color and shading. Your html code program “does” work however, the code is…10,500 lines long! It is writing code for ever color it sees obviously. This is a photo/graphic photo or flyer that has thousands of colors. I am trying to email the flyer by using your program to create the html code and “insert as text” into my Outlook but, it is so big that outlook crashes. I am wondering is there anyway of using your program to code the image and it be a small line of code? Please help! Thanks very much

  • Anna Yeaman
    July 30th, 2012 11:06

    Hi Rocky,

    as I mentioned file size is the big constraint here. For that reason you only want to convert small images like logos, rather than whole flyers. You might be better of coding up your flyer into an email template, so its not all image-based.

  • Should You Use Mosaics in Email? « The Goolara Blog
    November 6th, 2012 09:11

    […] 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 […]

  • DS
    May 17th, 2013 17:59

    The app is great, but for some reason Outlook.com stretches all the images when replying.

  • Ben EM
    October 14th, 2014 10:46

    Hi Anna,

    Thank you for the program, it’s a really interesting and innovative approach to tackling image blocking! I was curious if you have had any issues with rendering on mobile formats (specifically Gmail for android). The image seems to get skewed completely out of proportion. Thanks!

  • Anna Yeaman
    October 14th, 2014 11:52

    Cheers Ben,

    we built this toy back in 2009 and it hasn’t been maintained. Back then mobile email usage was really low - think I was 5% back then - so I’m not surprised if there’s issues in Android Gmail today.

    We’ve thought of building out an upgrade, but the sticking point has always been that it would have to be fluid or it’s not much good to us. We’ll see, but for now its more a toy and an old idea we messed around with. Though pixel art fallbacks have grown out of this, so still valid though limited use cases today.

  • Ben EM
    October 14th, 2014 13:47

    Thanks for the response Anna. We have managed to use this solution to create an image-less email header and for the most part it seems to work well on the clients I have tried (apple devices, outlook, in-browser Gmail etc) so thank you! I will be testing through Litmus soon, so we will see how well it holds up. I will let you know if I figure out a solution to the Android issue.

 

Leave a comment: