Embedding Images in HTML with Data URI & Base64 Encoding


Overview

I recently had a situation where I needed to create an offline page for our .NET application. In the long term I was going to create functionality to allow the app to be taken offline at will with a setting, but in the short term I just needed a quick way to take the application offline. The quickest and cleanest way of doing this was to create an app_offline.htm page. This is a special file recognized by the .NET engine that causes the AppDomain to reset and be modify so that all requests return the offline file.

There was one problem though. The client wanted an image on the offline page. Since all requests would return the offline page that wasn’t going to be possible via conventional means. I needed to either access the image from outside of our site or somehow embed the image inside of the HTML page.

Embedding Images in HTML

I went about researching how to embed the image inside of the HTML page. I stumbled across RFC 2397 which provides a means of doing this called Data URI Scheme. The short explanation is that you base64 encode the image (or other resource) and then use a data URI to provide access to the encoded data. Here’s how you do it.

  1. Create a standard HTML file and save with .htm extension.
  2. Base64 encode your image (or other resource).
    1. Open an online base64 encoder, such as this one from Motobit.
    2. Create one yourself if you prefer not to transfer your resource online.
  3. Enter the IMG HTML tag in the body tag of your page.
    1. <img src=”” alt=”My Encoded Image” />
  4. Set the SRC attribute of the IMG HTML tag to the data URI.
    1. <img src=”data:image/png;base64,” alt”My Encoded Image” />
    2. Replace “image/png” with the MIME type of your resource (e.g. image/jpeg, image/gif, image/png, etc.).
  5. Copy the string result of the base64 encoded resource (step 2) and paste it after the coma in the src attribute of the image tag.
    1. <img src=”data:image/png;base64,APf/APL2+5iszMvU3Ozx+cqqNvaVTMzV4Zy” alt”My Encoded Image” />
  6. Save and view your file.

You should now have an HTML file with an embedded image or other resource in it.

Things to Know / Troubleshooting

Below are a few things that I ran into when doing this, and ultimately why I didn’t go with this solution. You might want to read through them and keep them in mind. They might just save you a bunch of time.

  • Embedded resources using base64 encoding are not supported in IE7 and below.
    • There is an MHTML/CSS method you can use to get around this (see here), but it requires an external CSS reference. This wouldn’t work for my offline page since everything had to be inside the app_offline page, but it might work for you.
  • IE8 supports embedded resources that are 32kb or less.
  • IE9 fully supports embedded resources without limitation.
  • If your image has bad spots you might try encoding it again. I ran into this and a re-encode fixed the problem.
  • Base64 encoded images are about 1/3 larger than their binary counterparts. However, enabling gzip compression can elleviate some of this.

Summary

I hope this helps make embedding resources using base64 encoding and Data URI Scheme easier to understand. This is one of those things that probably doesn’t fit 90% of the time, but there are some cases when it’s the right answer. Let me know if this helped you, if you have questions or comments and as always thanks for reading!

Advertisements

11 thoughts on “Embedding Images in HTML with Data URI & Base64 Encoding

  1. Hi,

    Very Nice artical !!!i

    Concern : Can you please tell me how to run html BG image(86 kb) using base64 with IE8, I am unable to upload it fully. I have converted it with base64 but when i am browseing it mozilla its working properly but in case of IE8 half image is coming.

    Please help me out from the same as client is not giving image size<86 kb.

    Thanks,
    Ruchi Jain

    1. Ruchi Jain, I’m sorry but I think I mentioned in the article there are compatability issues with IE 7 and 8. If I remember right you can’t have images over 64kb in size. However you’ll need to check to be sure. This is not something you can overcome. However I think it’s okay if you run IE 9. Just run a Google search for base64 encoding and IE image size. That should give you the ansers. I hope that helps and sorry for the late reply.

  2. Awesome. It will be great to have a kind of online tool to convert base64 images (with the data:image preffix) into the image representation. Just as any other online generator or online tool.

    Also, in Chrome, and if the image has a small size, you can just place the string into the address bar and it will display the image.

    I used to to display an image that someone submitted as feedback for the site slideonline.com showing a presentation.

  3. Howdy! This is kind of off topic but I need some
    help from an established blog. Is it very hard to set up
    your own blog? I’m not very techincal but I can figure things
    out pretty quick. I’m thinking about setting up my own but I’m not sure where
    to begin. Do you have any ideas or suggestions?
    Many thanks

    1. No, it isn’t something one would do as normal practice. However as described in this article, this was a special circumstance. I was trying to get a graphic to display on an app offline page. The problem was that in .NET the app offline page disables all references outside of the page itself. You can’t use CSS, refs, links, anything. So getting the image embedded into the page was my only option. As a general rule this is a bad idea since, as I mentioned, compatability is a problem as is performance. However for those situations where you have no other option it’s available.

  4. I tend not to drop many comments, however i did a few searching and wound up here Embedding Images in HTML with Data URI & Base64 Encoding |
    Nathon Dalton’s Blog. And I actually do have a few questions
    for you if it’s allright. Could it be just me or does it look like
    a few of the comments look as if they are left by brain dead folks?
    😛 And, if you are writing on other places, I would like
    to keep up with everything fresh you have to post. Would you list of
    every one of your social sites like your linkedin profile,
    Facebook page or twitter feed?

  5. I am saving the base-64 images in database using the MVC Razor code. Now i want to get all the images written in pdf file. Suggest me the best approach to get the pdf file.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s