Base64 encoded images in email signatures

html

email-signatures

base64-encoding

image-embedding

byNikita Barsukov·Jan 7, 2025

To embed a base64 encoded image in an email signature, leverage the <img> tag and include the base64 data. Keeping the image small is crucial to prevent excessive email size.

Example:

<img src="data:image/png;base64,R0lGODlhPQBEAPeoAJosM...." alt="Your Image">

Insert your base64 data following base64,, and provide a suitable alt text for accessibility.

Important Notes:

Use tools or code for converting your desired image to a base64 string.
Check the base64 output is correctly formatted in the src attribute of <img>.
Consider potential compatibility issues across different email clients.
If things don't quite look right, verify the integrity of the base64 string in the HTML.
Simplify the conversion process using libraries like Apache Commons Mail for direct embedding.

Understanding the base64 strategy

Auto-bake your images with libraries

If the manual approach sounds like re-inventing the (base64) wheel, use Apache Commons Mail's ImageHtmlEmail. Why bother?

Automates the embedding process, saves you from encoding headaches.
Utilizes ByteArrayDataSource to bypass the need for saving images separately.
Includes the .embed() method to guarantee cross-client compatibility. No one left behind!

Keeping everything tidy with inline images

For a fuss-free image display across email clients, opt for inline embedding. What you need to know:

Inline images are not relying on external links, which can fail or get blocked. Less chance of disappearing into the great pixel beyond!
Trust in Apache Commons Mail to do the heavy lifting for you.
Apparently, according to the accepted answer guidelines, data URIs are the preferred method.

Making everyone happy (Email client compatibility)

Different email clients, different quirks. Here's a checklist to avoid tantrums:

Some clients might throw a fit if served images in data URI format.
Before sending, test your images across various platforms to ensure all is fine.
If some finicky clients refuse to cooperate, have a fallback option at hand.

Going a step further

The alternatives crossroad

While data URIs are the bee's knees, there are alternative methods in some use cases:

CID (Content-ID) attachments that are linked to the email and make the HTML less of a spaghetti bowl.
Linked images need a hosting platform & must be invited (not blocked) by the client.

Shrink, then shine

When it comes to signatures, size matters. Here's how to avoid the "oversized hat" effect:

Remember, you're not recreating the Mona Lisa. Reduce resolution or dimensions for signatures.
HP Lovecraft was verbose; your emails shouldn't be. Compress to keep file size in check, avoiding terrified bloated computers.
Large base64 strings are like a double-decker bus in a narrow street – they block the path and hurt deliverability.