Base64 Encoded Images for Internet Explorer
Some interesting development with Base64 Encoded Images for Internet Explorer.
The basic idea is to embed images into the HTML code so as to avoid external dependencies on image files stored elsewhere.
MHTML (Mime/HTML) is essentially how HTML email does it. Microsoft supports the mTHM or mHTML format, but Mozilla is still working on it,
Data URL is probably the most elegent way. Apparently Netscape/Firefox and other browsers already support them. Except for IE, of course.
<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt="Base64 encoded image" width="150" height="150"/>
That ghastly mess will produce the following image in most decent browsers:
For IE, there is a server-based solution:
Internet Explorer does not support Base64 encoding of images so we will take advantage of PHP’s built-in base64_decode function. We will simply pass the Base64 data back to a PHP module which will then decode the data and return the appropriate image.
I disagree with the following comment:
For me, a direct application for this technique is web info archiving, where you don’t want pages and images to be stored in different places.Got me fooled there for a while, though you had managed to hack ie to allow data uri:s for images. Unfortunately the usefulness of ‘inline images’ is greatly reduced if implemented on the server side. As that would be pretty much the same as requesting a static image. Really impressed with the rest of IE7 through.
- Comment by: Emil
- Posted: 2005/06/06 2:18 pm
What this solution means is that one could serve embedded HTML directly to non-IE browsers, and use the server-side option for non-supportive ones, including IE. That’s a winner to me.
June 16th, 2005 at 9:34 pm e
Got it to work on Wordpress/firefox. Need to disable WYSIWYG editor, because it automatically adds the site URL to before “data:”
January 22nd, 2006 at 11:35 pm e
I have posted a workaround to translate the base64 to XBM using mask and other MS filter to make the XBM become a color bitmap - The implementation is of your horizon. I have seen some very exortic color pictures only create and displayed using- XBM. This will not require a communication with the server.
Please look I have discuss it (at several localtionof the net)
Thanks.
September 22nd, 2006 at 12:44 pm e
I’ve written this into an ASP class using an ADO stream object and an MSXML2.DOMDocument object using bin.base64 datatype and it works very nicely in Firefox but fails entirely in IE. Am I missing something here? Is IE’s implementation as bad as … everything else it tries to do?
September 22nd, 2006 at 4:17 pm e
Don’t know why IE wouldn’t work. This was written more than a year ago. Haven’t check with IE7. But I am very happy with Firefox and there is little motivation to even download IE7.
February 11th, 2007 at 1:17 am e
yes, IE doesn’t work on that. i tried it myself.
March 10th, 2008 at 11:52 am e
Good post. You make some great points that most people do not fully understand.
“MHTML (Mime/HTML) is essentially how HTML email does it. Microsoft supports the mTHM or mHTML format, but Mozilla is still working on it,
Data URL is probably the most elegent way. Apparently Netscape/Firefox and other browsers already support them. Except for IE, of course.”
I like how you explained that. Very helpful. Thanks.
May 7th, 2008 at 1:50 pm e
Yeh ….I tried it and i had no luck