Embedding images in HTML
There’s a neat trick — you might have seen it in Lee Semel’s 5k Wolfenstein game for the 5k competition — where you can embed images directly in a page, rather than have the image data in separate files. Semel demonstrated with XBM images, which are black-and-white image files that (if you look at the image data in the file) actually look like C code defining the image. (See Semel’s notes above for more on this.)
So, thought I, that should work with non-XBM images too, right? I mean, if we can do src="javascript:makexbm()" and have our makexbm() function return C code for an array, there’s no reason why it can’t return binary data that makes up a GIF or PNG image, right? Right? Well, let’s see:
Is there an image here? ()
All I’ve done there is made the src attribute of an img tag be a javascript string containing binary data. If you’re using a Mozilla based browser, you should see a little red ball. If you’re using IE…broken image. Damn. I’m not the first guy to discover this, either. Roger Critchlow wrote an essay about inline images on web pages, offering a few other ways that it might work (data: URLs, document.write, others). And, guess what: they all only work in Mozilla. IE, not a chance. So, it’s not possible to embed images in a web page if that page is to be displayed in IE.
Ah! I hear you say. Can’t we use MHTs for this? MHTs are web archives — IE allows you to save a page as an MHT, and all the resources on that page (images, stylesheets, the works) get bundled up into one MHT file which IE can then open later. (It’s actually an HTML email in format, but it works.) So, maybe they’re a solution? Nope. Mozilla doesn’t support MHT’s. They’re working on it, but it’s not come up igh enough on the radar for it to get fixed, sadly, in the three years since the bug was filed. Some guys are actually prepared to offer money to get this bug fixed; they’ve got a couple of hundred dollars earmarked for the fix for this. But, until then, or until IE supports JavaScript embedded images (which will presumably happen never) there’s no way of distributing a complex page in one runnable file, as far as I know. If anyone knows a way to get around this, ideally to convince IE to work with JavaScript URLs containing binary data, then I’d love to hear about it.
None
I’ve had some chats with Paul offline and we’ve established that you can’t do this in IE at all, sadly.
8 hours later
Paul:
Example? (Maybe use PRE tags or point us to a site?)
Also which browser(s) are you saying it works on?
8 hours later
Not in any of my testing you can’t, Paul, and I’ve tried…
8 hours later
You can get inline images working in ie using javascript: urls
8 hours later
The HTML specification does not require support for this (nor does it preclude it). It is very usefulfor small images, agreed, and trivially easy for an implementor to add.
SVG requires it for conformance, so all SVG implementations (even on cell phones) support it, and the new wave of XHTML+SVG browsers (coming first on mbile, later on the slow-to-change desktop) will support it also.
35 weeks later
Oh - sorry, I hadn’t realised this was talking about indirecting through javascript. Thats totally unnecessary, this can work in script-free environments.
The syntax is given in RFC 2397 ‘The “data” URL scheme’, L. Masinter, August 1998.
http://www.ietf.org/rfc/rfc2397.txt
35 weeks later
You’re totally right. However, IE doesn’t support data: URLs, which kills the idea.
35 weeks later
I’ve got a cross-browser way of embedding images in self-contained html documents. Not perfect, but it works.
check out the URL
43 weeks later
I’ve done a little refinement work – image decoding is about 2X as fast as before. My home page has moved to http://www.bennherrera.com. The link above leads directly to the demonstration page.
51 weeks later
there was an issue where the unpacked images were not showing up in print preview. this has been resolved. additional work has been done on cleaning up the java code for the image converter – it has been completely revamped and commented up. additionally, a gui-driven tool is now available for doing the image conversion and previewing the results of tweaking the various options on-the-fly. same link as above applies.
53 weeks later
I am tring to send a html newsletter through email using the software rocketsales from Anconia. When i send the email, nobody can see the images – all they see is the borken image symbol – i also tried attaching the images with the email but they are still not visible. please can somebody help me – anconia are rubbish at supporting this application and never recevie a reply back from them.
55 weeks later
S0dEABkARwBuS2yZlgAAAAlwSFlzAAALEQAACxEBf2RfkQAAAAd0SU1FB9ALGBAqJHPZc2cA
AABVSURBVHicY2DAD/5DMU7ASEAzQbW4DMBlKz4LcRqE1wtMpJqIzwC8NqEBuFomdAFSDWEk
UzMcUBwGMIArtAmKw1xAcvwSq4f26YDipExxZiIECIYBADwfFwE4tgZpAAAAAElFTkSuQmCC
61 weeks later
the comment above means:
[img src=“data:image/png;base64,...“]
where … is a base64 encoded image data
61 weeks later
sergey,
data: urls don’t work in Internet Explorer.
61 weeks later
I am trying to embed an image ina signature in html format and I am getting a broken image on the other side when I send it via e-mail…can anyone help? habib@lawsocietymember.com
64 weeks later
please try Hope Mailer. Full compitable for embed image in email.
downloadable at http://www.nesox.com.
69 weeks later
lolololololololololololololololololololololololollololololololololloolololololollo
70 weeks later
asdasdasdasd
asdasda
sdas
dasdasdasd
84 weeks later
#include ddddddd
87 weeks later
Donna Shimmin smokes cigarettes and, I repeat, and has a credit card!
95 weeks later
Possible solution?
Written in php I would try:
Detect the browser
if I.e. send mht
if moz send javascript parsing the mht and plugging the img tags.
looking at the structure of a mht this looks easy to do.
Just a thought, but this is bad web-design considering older browsers.
117 weeks later
I Totally agree with the Original Article ” AS DAY PASS BY” However there are something need us to pay more attention for the topic of embedding an inline image.
For The example of the “RED BALL” above we can embedd two image to make it display in both IE and others.
- The First is a GIF or PNG or whatever format you want and usng the data/base64 or javascript/variable for it to work on browser other than IE The acticle said more than I should.
-The second approach is for the IE specific. The only approach is the XBM format. It is a monochrom black/White format Right?. Yes but No.
Yes: it is. ——-BUT——-
No: you can apply MS flfer:Mask you can make the foregriund become transparent and the background to a color of your choice. Do it again then you can reverse it. Then
After that one can apply other filter sy=uch as the Alpha or Gradient filter to have the special effect of the whole array of color.
I have tested and it works. -Of course on the IE- Even I not an IE fan I have to that for the sake if my boss.
Good luck and Have fun.
If you need my help drop me a note.
Happy New Year (late)
Phi
117 weeks later
I once saw someone manage to embed small to medium size images in HTML in a cross-browser method but it was a very hack-like method.
Basically he used a script to convert the image data into a table of 1×1 pixel cells with the correct colour. This is standard HTML but takes up a HUGE amount of space compared to the image data.
Might be OK for small logos though. I suppose you could extend the script to perform run-length encoding (using COLSPAN to span multiple cells when the colours remain the same) however it will still take up a lot of space in the HTML file.
125 weeks later
Good work. But not working in IE. Working only firefox.
126 weeks later
Sorry, if it doesn’t work in I.E. it is useless.
137 weeks later
Eamonn: I agree with you. Feel free to come up with something that works in both.
137 weeks later
Donna Shimmin, Michael Tousignant, and that tall dude that got fired for threatening somebody… NASNI
142 weeks later
Thats Ok… Bye Take care……………..
155 weeks later
There should be some live examples here that will give more clear picture of the example.
Thanks and Regards
Sunil Dutt
158 weeks later
Here’s what I do.. i use a little PHP file which contains the following, named img.php:
In my .js file, i get the base64 of my image file, rawurlencode it using php, and store this as a variable.
Then, to get my image, i use
This of course requires PHP, but it works in all browsers. you could take it one step further by embedding the PHP into the .js file (filename.js.php) and you could make it so that the php file has $_GET content, return the image, otherwise include the script.
Any questions/comments about this technique: gstcyr at gmail
163 weeks later
Seeing as how the code didn’t display, here’s an example:
http://www.tagtaw.com/sample.html
And the JS file:
http://www.tagtaw.com/sample.js.php.txt
Of course, this technique will only work on relatively small images, since a url has a maximum length of just over 2000 characters.
163 weeks later
FWIW - Zimbra did a demo at WebBuilder of ALE - Ajax linking and Embedding which supports multiple combined objects/images in a single file and decompression of those elements.
http://www.zimbra.com/blog/archives/2006/04/zimbra_ale-ajax_linking_and_embedding.html
This only works in “modern browsers” or IE 6.0+, Fireffox, Moz
Kevin
165 weeks later
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
176 weeks later
[...] as days pass by » Blog Archive » Embedding images in HTML (tags: images javascript) [...]
177 weeks later
Its got to work in IE. We are working on a different type of <p><a href=”http://www.triggit.com”>embed tool</a></p> and the IE vs firefox problem is really hard.
199 weeks later
[...] Cela permet de présenter un extrait ou une courte citation dans une publication par exemple. En plus, en cliquant dessus nous avons la possibilité de basculer dans Google et de voir l’ouvrage. Dans ICEberg nous avions fait cela avec ICEberg+, mais uniquement pour les textes. Si un système similaire existe dans le monde de l’open-source, je suis preneur ! j’imagine qu’il s’agit d’un géoref de zone soit de l’encodage image via du javascript ou de l’ajax. [...]
208 weeks later
whatever
252 weeks later