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.
- Create a standard HTML file and save with .htm extension.
- Base64 encode your image (or other resource).
- Open an online base64 encoder, such as this one from Motobit.
- Create one yourself if you prefer not to transfer your resource online.
- Enter the IMG HTML tag in the body tag of your page.
- <img src=”” alt=”My Encoded Image” />
- Set the SRC attribute of the IMG HTML tag to the data URI.
- <img src=”data:image/png;base64,” alt”My Encoded Image” />
- Replace “image/png” with the MIME type of your resource (e.g. image/jpeg, image/gif, image/png, etc.).
- 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.
- <img src=”data:image/png;base64,APf/APL2+5iszMvU3Ozx+cqqNvaVTMzV4Zy” alt”My Encoded Image” />
- 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.
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!