Embedding Images in HTML using C#

In HTML pages, images are typically linked rather than embedded using the

<img src="[protocol]://[url]" />

tag. If you want to embed the image data, for example to handle just a single file containing text and images, you need to replace the src attribute with the Base64-encoded binary content of the image using the data: protocol:

<img src="data:image/jpeg;base64,[data]">

To encode an image file in Base64, use the following function (originally found here):

string MakeImageSrcData(string filename)
  FileStream fs = new FileStream(filename, FileMode.Open, FileAccess.Read);
  byte[] filebytes = new byte[fs.Length];
  fs.Read(filebytes, 0, Convert.ToInt32(fs.Length));
  return "data:image/png;base64," +
    Convert.ToBase64String(filebytes, Base64FormattingOptions.None);

This function can now be used to render an image in either aspx/ascx:

<img src="<%=MakeImageSrcData("c:\path\to\my.png") %>" />

or C#

Response.Output.WriteLine("<img src=\"" + 
    MakeImageSrcData("c:\path\to\my.png") + "\"/>");

The rendering result depends on the browser, though, as Wikipedia describes:

  • Firefox and Chrome render the embedded images correctly
  • Internet Explorer (7 (Vista)/8 (Win7)) only renders some because of a 32kB limit
  • Word 2007 only renders image placeholders

This is too bad, since I originally intended to generate WordHtml and include pictures directly in HTML.

6 Responses to Embedding Images in HTML using C#

  1. marcos alves says:

    Hi, great post. I’m having with the “Internet Explorer (7 (Vista)/8 (Win7)) only renders some because of a 32kB limit”.
    Do you know if exists a workaround for that?

  2. marcos alves says:

    i’m testing wiht IE9 but the application force the ie7 compability…maybe is that..


  3. Hi Everyone. I am getting problem with word document . Image is not showing when i generate word document using html and c#. It shows but if i will remove image from its path. Then image in word document not showing. Plz help me if you can. Its urgent.

    Thanks in Advance

    Avneesh Pandey

  4. ric says:

    I’ve been looking for a way to do this for a couple of days now (on top of other things!), the problem I initially had was not being able to get to the photo’s on my c: , but using this worked immediately.

    Thanks so much, very impressive šŸ™‚

  5. Broly Zuniga says:

    I have been looking for information about this for a while and this article is the most accurate, thank you and keep it up!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: