Stop spammer email harvesters by drawing addresses with images or Flash

Spammers use email harvesters (spambots) to scan the text of your web pages looking for email addresses. Protect those addresses by replacing the text address with an image or Flash animation that draws the email address. None of the harvesters tested in this article could read addresses drawn with images or Flash.

This article is part of a series on Effective methods to protect email addresses from spammers that compares and tests 50 ways to protect email addresses published on a web site.

How to protect an email address with an Image or Flash

An email harvester (“spam robot” or “spambot”) is a web spider used by spammers that scans the text of your web pages looking for email addresses (and sometimes phone numbers and street addresses too). But harvesters only look at the web page text. They can’t read images or run Flash animations. You can protect your email address from spammers by replacing the text of the address with an image or Flash animation that draws the protected address. The image or Flash address is still readable by your site’s visitors, but since harvesters can’t find it, they can’t add your address to their mailing lists and you’ll get less spam.

Below I discuss each of the most common ways to use images and Flash to draw an email address. After this list, I report the results of running protected email addresses past a collection of email harvesters to see which methods are effective at protecting your email address, and which are not.

Replace the “@” with an image of an “@”

To find an email address, an email harvester scans web page text looking for an “@” character. The words on either side of it are the user and domain name of an email address. To protect the email address, hide the “@” character by drawing it with an image. Leave the rest of the address as text.

HTML person<img src="justat.gif" alt="" width="10" height="10" />example.com
Result personexample.com

To avoid telling spambots what your image is for, don’t name the file something easy like “at.gif” and don’t fill in the “alt” property of the image.

You can create the “@” image using any image editor, or copy the one I created for this example. To help the “@” image blend in with the rest of the text, use the same font as the rest of the web page.

If you want to use a “mailto” link containing your email address, you can use this method for the visual part of the link but you’ll need to protect the “href” part of the link with another method. The other articles in this series discuss a few ways to do this.

Replace the whole address with an image

The method above just replaces the “@” character — the rest of the email address is left as text. It is possible that a smart email harvester might guess what you’re doing and still find the protected email address. You can prevent this by hiding the whole email address within an image.

HTML <img src="email.gif" alt="" width="189" height="12" />
Result

Web accessibility guidelines recommend that you fill in the “alt” property of an image with equivalent text that can be read by a screen reader for the visually impaired. Unfortunately, if you do this, it defeats the purpose of the image by providing harvesters with easy text to scan. So, you’ll have to leave the “alt” property empty for this to work. This makes your email address inaccessible for the visually impaired.

You can create the email address image using any image editor. EmailCover.com’s Hide your email address in an image web page has a free image generator for email address images. Digital Colony’s Mask Email Image Generator web page has a similar generator but with font control. Since you can use any image you like, you can also use CoolText.com’s Graphics Generator to create fancy flashing, glowing, embossed, or burning text, if that fits the style of your web site.

Replace the whole address with a Flash animation

Adobe’s Flash plugin is ubiquitous for showing flashing ads and involved menu systems. You can use it to protect your email address by embedding the address within a Flash file. The file can animate your email address, or just draw it simply onto your web page.

HTML <object data="email.swf" type="application/x-shockwave-flash"
width=300 height=30><param name=movie value="email.swf"></object>
Result

The Flash plugin is free and may be downloaded from Adobe’s web site. The plugin is available for most operating systems and most web browsers. Site visitors must download and install the plugin or your address will not be visible.  Most visitors probably already have it.

You can create Flash files using Adobe’s authoring tools. Sophistronix.com also has several interesting on-line tools for creating Flash animations. Their Text-FX Builder has a free web page for building text-based animations, like the one above.

Results

I tested 23 widely-available email harvesters to see how well these methods work to protect an email address.  Each harvester was aimed at a test page containing plain, image, and Flash email addresses. In the table below, a harvester gets a check mark if it recognizes the protected address.

All of the harvesters were tested on Windows XP SP2. The names of the harvesters are intentionally left off to avoid giving this web page search engine attention for spammers looking for the ”best” harvester to download.

Protected email address test results
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
Plain email address
Replace “@” with an image of an “@”                                              
Replace the whole address with an image of the address                                              
Replace the whole address with a Flash animation                                              

Every harvester found the plain email address that was not protected.

None of the harvesters found protected email addresses drawn using images or Flash.

Conclusions

All of these methods successfully protected email addresses from all of the tested harvesters. Protecting an email address with an image and Flash animation is an effective way to stop spammer harvesters and reduce spam.

However, all of these methods have poor usability and accessibility. Email addresses drawn with images and Flash cannot be copy and pasted directly into a visitor’s email program. Flash addresses also require the Flash plugin, which some people block in an effort to stop banner ads. And image and Flash addresses cannot be read by the screen readers used by the visually impaired.

All of these methods have visual artifacts. The protected email address must be drawn using a font chosen when the image or Flash file is created. The address will look out of place if that font doesn’t match the font of the web page. But making a perfect match may not be possible. Font shapes and sizes differ somewhat between browsers and between Windows, Mac OS X, and Linux. Also, visitors with aging eyesight may increase their browser’s font size so that it no longer matches the font used in your image. These differences will leave your email address looking wrong.

All of these methods slow down web browsing. They replace a short piece of text with a much larger image or Flash file that takes longer to download to the visitor’s browser.

Recommendation: while these methods work to protect an email address from spambots, the impact on page load time and the reduced usability and accessibility is undesirable. There are simpler and equally-effective ways to protect an address. Several good methods are discussed in the other articles in this series.

Further reading

Comments

Another non-text form to consider?

You could try SVG instead of image or flash types. Smaller footprint so not of much of a hit bandwidth wise. Major drawbacks are the need to have an SVG capable browser, usability is still an issue for cut/paste and rendering for the visually impared.

SVG support in browsers

SVT (Scalable Vector Graphics) can be used to draw an email address and hide it from email harvesters. Unfortunately, browser support is very weak. Opera has basic SVG support but under 2% of the browser market. Safari has partial SVG support, but also less than 2% of the market. Firefox has about 35% of the market, but doesn't have SVG support yet, though it is in progress. Internet Explorer has 50% of the market, and no SVG support. Adobe's SVG viewer plugin for IE and Safari has now been discontinued.

One could speculate that the reason Adobe is killing its SVG plugin, and Microsoft is avoiding SVG in IE, is that Adobe and Microsoft are competing with proprietary technologies: Flash and Silverlight. Broad SVG support in all the other browsers (in a few years?) and a continued decline in IE's market share may put pressure on Microsoft to support SVG. But until then, it isn't practical for web designers to use SVG.

Automatic scales up/down of bitmap with browser font size change

Dear Mr Nadeau!

First thank you for providing this compilation of useful email address obfuscations! As you have shared your knowledge so far, I do likewise, and share a little trick here.

When using a pre-rendered email address bitmap image, and a user in/de-creases the font viewing size, the image can proportionally scale up/down, when you use CSS em dimensional values for your image, which in contrast to the absolute px values are relative!

Stefan Nowak


// CSS CODE

.eml {
 height:1em;
 margin-bottom:-0.2em;
 vertical-align:middle;
 border-style:none;
}

.eml:hover:after {
 font-size:1em;
 content:"To prevent spam, please type the address manually";
 color:red;
}

/*
All browsers support :hover:after except Internet Explorer,
hence the redundant <img title="..." />
*/

// XHTML CODE

<img class="eml" title="Please type the email address manually
(spam protection)" src="picture.gif" />


// EXAMPLE OF USAGE

Contact Page of a Diner in Austria

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

Nadeau software consulting
Nadeau software consulting