Embedding Local Images using Data URIs

Sometimes, when you publish your HTML from the editor, it is impossible to use locally inserted images, because the published HTML might be hosted in a different environment. In order to keep your inserted images, you can embed them using Base64 Data URI.

Base64 Data URI allows you to get rid of image dependencies and keep image data right in HTML markup. It looks like this:

<img src="data:image/gif;base64,R0lGODlhFAAUAPejAP/OXv/ihv" />

The editor provides very simple API method Content.EmbedLocalImagesAsBase64(). It can be used as follows:

winFormHtmlEditor1.Content.EmbedLocalImagesAsBase64()

Base64 Data URI

Users of your application can also use checkbox "Insert local image as base64" on "Image Insert Dialog":

Base64 checkbox

One very important note : If you plan to create Email Message from the HTML content from this Editor where the HTML contains Base64 image, you should follow the instruction given in the page on Email Message Image Embedding. Without using that technique, the base64 images usually wont show up in the email clients.

Programmatic API

Before and after view of DocumentHtml showing local file image src rewritten to base64 data URI by EmbedLocalImagesAsBase64 in WinForms HTML Editor

Everything the UI button does is also reachable from code via the content service on the editor. Call EmbedLocalImagesAsBase64 to walk the current document, locate any <img> elements whose src points at a local file path, read the bytes, and rewrite each src in-place as a data: URI. After the call returns, DocumentHtml is self-contained and safe to email, paste into a CMS, or save to a single-file archive.

Self-contained portable HTML output file saved to disk with all images embedded as base64 data URIs ready for sharing

// 1. Trigger the conversion (in-place; no return value).
htmlEditor1.Content.EmbedLocalImagesAsBase64();

// 2. Grab the now self-contained HTML.
string portableHtml = htmlEditor1.DocumentHtml;

// 3. Persist / send it.
System.IO.File.WriteAllText("ExportedDoc.html", portableHtml);

Run the call right before saving or sending, not on every keystroke — base64 inflates payload size by roughly 33 percent, so for large images you generally want the conversion to happen once at export time.