Email image generator
Drawn in your browser at double resolution. Nothing you type is sent anywhere.
For sites with their own light/dark switch that puts a dark class on <html> (VitePress, Docusaurus, most theme switchers). "One image, inverted" needs grey text on a transparent background.
Why show an email address as an image
An email address written in a page's HTML is read by every bot that crawls the web, and the ones collecting addresses for spam lists find a new one within days. An image of the address shows the same thing to a person but gives those bots nothing to copy: they read text, not pictures.
The image is drawn by your own browser, on a canvas, and downloaded straight from it. Nothing you type is sent to a server, so the address never leaves your computer while you make it.
Light and dark themes
A single image only looks right on one kind of background: dark text disappears on a dark page. So the generator makes two images, one in the colour you pick for light pages and one for dark pages, and the snippet shows the right one:
| Snippet | Use it when |
|---|---|
| Site theme switch | Your site has its own light/dark switch that puts a dark class on <html>, as VitePress and most theme switchers do. |
| Tailwind | The same, on a Tailwind site using the class strategy for dark mode. |
| System theme | Your site has no switch and follows the visitor's system setting. The browser picks the image, no CSS needed. |
| One image, inverted | You want a single file. A CSS filter flips the colours in dark mode, which only works for grey text: a brand colour would turn into its opposite. |
Both images are drawn at double resolution so they stay sharp on high-density screens, and the snippet gives each one its real width and height, so the page doesn't shift while it loads.
What it doesn't do
- Bots that read images can still read it. A crawler that runs text recognition (OCR) on images will find the address. Most address harvesters don't, so the image stops the bulk of them, not all.
- Visitors can't copy it. They have to type it out, and it can't be a
mailto:link, because that would put the address back in the HTML. The alt text spells it out ("info at example dot com") so screen readers still read it to people who can't see the image.
If you'd rather visitors could write to you in one click without your address appearing anywhere, a contact form does both: BootForm gives a static site a working form in a few minutes, free.
Frequently asked questions
Does it work for phone numbers too?
Yes. Type any short text, up to 120 characters: a phone number, an address line, a second email.
Which formats does it produce?
PNG, with a transparent background unless you choose a solid one. PNG keeps text edges crisp, which a JPEG wouldn't.
Can I put the image inside the HTML instead of uploading files?
Yes: tick "Put the images inside the snippet" and the images go into the snippet as data: URIs. There are no files to upload, but the snippet gets much longer.