Welcome to LanDen Labs
Source Code, Tools, Developer Notes and Performance Metrics

[ To Main Page ]

Inline and Extract base64 images into/from HTML using Csharp program to improver website performance


Inline and Extract base64 image in HTML

Dennis Lang
Tip publish in CodePrpoject 20 May 2010


Program to convert HTML image references to inlined (embedded) Images

Source code:
Executable (vs2010/net 3.5): InlineHtmlImages-v1.7.exe
Mono Exe for OSX InlineHtmlImages-mono.exe

Inlining images in HTML can solve two different problems:

  1. Improve page load speed
  2. Create a single HTML file that can be embedded into a program.

What is inlining ?

Inlining refers to replacing an image reference with the image data. Normally HTML displays images using the following syntax:
<img src='happy-image.png'>
The img HTML tag tells the browser to load the image from the data source (network or local disk). When an image is inlined or embed the image is placed directly in the HTML in a base64 character encoding. The following HTML syntax is used to inline an image:

Syntax comparison

External image references Inlined images ( is base64 data)
<img alt="Layout.png" src="Layout.png"> <img alt="Layout.png" src="data:image/png;base64,">
background-image: url("bg512.png"); background-image: url("data:image/png;base64,");

A full description of the data encoding syntax and supported browsers can be found on the following wikis

InlineHtmlImages is a command line program to automatically convert external image references to inlined base64 character streams. It will inline both standard <img> tags and background-image styles.

InlineHtmlImages has the following main execution modes:

Here is a sample of InlineHtmlImages's help banner:

InlineHtmlImages v1.7

Des:  Convert image references to inlined base64 images 
   -in <inputFile.html>    
   -out <outputFile.html>  
   -embed                 ; Encode images into html (default)
   -extract               ; Extract encoded image from html
   -summary               ; List image tag info
   -help                  ; help

   -toB64                 ; Encode raw input data to base64
   -fromB64               ; Decode base64 input data

 ; Inline HTML images referenced in helpOrg.html
 InlineHtmlImages -embed    -in helpOrg.html -out helpInlined.html

 ; Reverse inlined HTML and get original images back
 InlineHtmlImages -extract  -in helpInlined.html -out helpNew.html

 ; Encode PNG images into base64 character stream
 InlineHtmlImages -toB64   -in *.png -out b64\*.png
 InlineHtmlImages -toB64   -in *.png -out *.b64
 InlineHtmlImages -fromB64 -in *.b64 -out *.png

As mentioned above, by inlining images a browser will load the page faster because it can avoid multiple trips to the data source. The second reasons is to create a single HTML file. A single HTML file is handy if you want to embed HTML in a program, such as a Help document.

See Download Link at top to download the Csharp windows program to automate the conversion of your image references to inlined (embedded) base64 encoded images. If you need to convert on Mac try using Mono to build program. The download section includes a pre-built version using OSX Visual Studio 7.4.1 (build 48) Net 4.5. To run on OSX need to use the mono command line tool. For example:

   /Library/Frameworks/Mono.framework/Commands/mono InlineHtmlImages-mono.exe -in intest.html -out outtest.html

I plan to port the cSharp program to Java to make it easier for others to automate their web page conversion.

To Top

C# Embedded HTML viewer

If you are a developer and wish to embed HTML files in your Visual Studio project read on, web designers skip to next section. I use HTML to make a colorful image rich Help files in my Visual Studio CS programs.

An embedded HTML file is one which is built into your program and is not an external file. It is common for program help documentation to be stored in an external .html, .chm or .hlp file. The instant your program has multiple files (executable plus help files), it encourages the author to create an installation process. Under windows you create a .msi or installer. Under unix you make a tar ball. The next problem with a multi-file program is if you want to move the program around or share with a friend, you have to remember to copy all the files and place them in the correct location. To avoid this mess, you can embed HTML help files and have images inlined in the HTML. Thus avoiding installers and sticking with a single program that includes HTML help file with images.

To add an embedded HTML file viewer to your C# program you need to create a webbrowser object which has its document stream set to the embedded HTML file (which has its images inlined).

The .NET webbrowser component supports a data stream which can be an internal embedded resource.

  1. Add your HTML document to your project.
  2. Select its properties and set it as embedded (see example ->)
  3. Set webbrowser document source to embedded resource.

Add HTML to project

Add your HTML file(s) to your Visual Studio project and set the Properties Build Action to "Embedded Resourse".


C# syntax to open browser with embedded html

    Assembly a = Assembly.GetExecutingAssembly();
    Stream HTMLStream = 
    webBrowser.DocumentStream = HTMLStream;

C# Sample code

namespace AmaZonk
    public partial class HelpDlg : Form
        public HelpDlg()

            // Attach the embedded html resource
            Assembly a = Assembly.GetExecutingAssembly();
            Stream htmlStream = a.GetManifestResourceStream(
            this.webBrowser.DocumentStream = htmlStream;

To Top

Manual Embedding Images in HTML

To produce embedded HTML file in projects, you can manually encode each image into its base64 character stream using an image encoder such as:

Searched and replaced all of the image tags that look like:

 <img src="image.jpg" alt="image.jpg" />
With the following, where the ...... is the base64 image character stream
 <img src="data:image/jpg;base64,......." alt="image.jpg" />
I don't know how important it is to include the /jpg or what every type of image you have.
 <img src="data:image/jpg;base64,......." alt="image.jpg" />

The reason I say this is I often used the wrong type for my encoded images and the image still displays. When you convert your images to base64 using tool like those referenced above or a website, it will produce a text stream that is either saved in a file or you can redirect into a file. Open the base64 data with your favorite text editor and paste into your HTML file. Here is a sample of a few lines of a base64 encoded image:

<img src="data:image/png;base64,
uQmCC" >
The base64 can be spread across multiple lines, as in the example above. The exception is if you add a base64 encoded image to a style sheet. Inside a style sheet, you must remove the line breaks in your base64 image and produce a single super long line.

To Top


Your embedded base64 images have to be smallish. I ran into problems with large images not displaying or getting cut in half. I had to reduce the image complexity and shrink its size before encoding to produce a smaller data payload. See Data URI scheme wiki for details:
Microsoft's discussion on DATA URI limits url-length-limits-in-internet-explorer
Internet Explorer 8 introduced support for DataURIs, a method of encoding a resource directly within a URI using base64 encoding. For performance reasons, IE8 supported DataURIs up to 32kb in length and this longer limit required changes elsewhere. For example, some DOM attributes at the time were limited to 4096 characters, a factor that would have hampered use of DataURIs in the HREF attributes of IMG elements.

In IE9, the 32kb limit for DataURIs was removed, although for security reasons their use remains limited to certain contexts (specifically, scenarios that create a security context, like IFRAMES, are forbidden). You still should avoid using huge DataURIs in most cases, however, as performance of large DataURIs often lags other approaches.

To Top


To Top

Blog about InlineHtmlImages

[To Top]

[To Home Page]