Embedded HTML Help File with Images

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:

http://www.f2ko.de/English/b64/index.php

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:

2VDDoOw/Kuk8N2zqVncbUHTPU1zXh+y+0TZIG1ecGu1jbyolTOSOpFTgadTHVVia/TY48ZKnhIOh
S6l9pqheb3qo83vUTTV9CeKeiNNULze9VGm96haagC281cL8RrL+0LeLzEV4cFWBGea6l5veqlwE
mjZJBlGGCKAPCD4UtoZCYowvsK4L4zWyafa6DEgw8pnZvw2AV9IX3h5JCTBNt9mH9a+df2hoJLXX
dItZCG8uNyCOhBI/wqJbo3pWcZ37fqjy+2UmQ4qWMsrOKm06ImbHrVt7M+Y5AqzAyRK/lsM9DVhL
uRI4zk8VLFZkhxipGsW+y9OlAHf/AA68u6sVmkbJW5miK+zpEc/+Q67LSUuGlZJ9oAbAKg1wvwrt

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.