Click here to Skip to main content
13,828,588 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


3 bookmarked
Posted 20 May 2010
Licenced CPOL

Embedded HTML Help File with Images

, 20 May 2010
Rate this:
Please Sign up or sign in to vote.
How to inline base64 encoded images into a single html - ideal for embedded help files
The web is full of questions like:

How do I embed and view a single HTML file which contains images?

First - what does this mean ? An embedded html file is one which is built into your program and is not an external file. It is normal for program help 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 some kind of 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, I discovered how to embed html help files and have images in my html. The embedded images are my contribution. So the answer to the original question is answered in two parts (for C#):

    • The .NET webbrowser component supports a data stream which can be an internal embedded resource.
      // Attach the embedded html resource
      Assembly a = Assembly.GetExecutingAssembly();
      Stream htmlStream = a.GetManifestResourceStream("ColorMatrix_ns.colormatrix.html");
      this.webBrowser.DocumentStream = htmlStream;

    • HTML supports inline base64 encoded images.

      <img src="data:image/jpg;base64,......." alt="image.jpg" />

To produce embedded HTML file in projects, I downloaded a base64 encoder and convert all of my images. There are tons of base64 utilities on the web. I used the following one:

I then searched and replaced all of the original image tags which looked something like:

<img src="image.jpg" alt="image.jpg" />

With the following, where the ...... is the base64 image text.

<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 your original image is.

<img src="data:image/jpg;base64,......." alt="image.jpg" />

The reason I says this is I often used the wrong type for my encoded images and the image still displayed.

The base64 image is a text file which you can open with your favorite text editor and paste into your HTML file. Here is a sample of a few lines of a base64 encoded image:


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.

For more examples, look at my colormatrix.html file which is part of the Color Matrix project.

WARNING - 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. I could not find the webbrowser base64 maximum length, so you will have to experiment.

Being a Tip the above is very light on details. If you want to see a working example please download my
Color Matrix Image Drawing Effects
project and look at the colormatrix.html file.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Dennis Lang
Software Developer (Senior) WSI
United States United States
30 years experience writing software.
I love C/C++ for its speed and power and C#/Visual Studio for quick application development.

Unix/Linux is my favorite OS

You may also be interested in...


Comments and Discussions

Questiontnx Pin
Member 103310005-Apr-14 21:07
memberMember 103310005-Apr-14 21:07 
QuestionOnline tool Pin
Isim Elek27-Feb-14 10:30
memberIsim Elek27-Feb-14 10:30 
GeneralMaximum size of embedded image Pin
M. Faisal Imam10-Jun-11 21:22
memberM. Faisal Imam10-Jun-11 21:22 
GeneralRe: Maximum size of embedded image Pin
Dennis Lang24-Jun-11 15:18
memberDennis Lang24-Jun-11 15:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190114.1 | Last Updated 20 May 2010
Article Copyright 2010 by Dennis Lang
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid