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

37 Responses to “Embedding images in HTML”

  1. I’ve had some chats with Paul offline and we’ve established that you can’t do this in IE at all, sadly.

    sil
  2. Paul:

    Example? (Maybe use PRE tags or point us to a site?)

    Also which browser(s) are you saying it works on?

    Joe Grossberg
  3. Not in any of my testing you can’t, Paul, and I’ve tried…

    sil
  4. You can get inline images working in ie using javascript: urls

    Paul Hammond
  5. 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.

    Chris Lilley
  6. 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

    Chris Lilley
  7. You’re totally right. However, IE doesn’t support data: URLs, which kills the idea.

    sil
  8. I’ve got a cross-browser way of embedding images in self-contained html documents. Not perfect, but it works.
    check out the URL

    benn
  9. 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.

    benn
  10. 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.

    benn
  11. 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.

    Donna Shimmin donna.shimmin@fsc.gov.im
  12. iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAAAZi
    S0dEABkARwBuS2yZlgAAAAlwSFlzAAALEQAACxEBf2RfkQAAAAd0SU1FB9ALGBAqJHPZc2cA
    AABVSURBVHicY2DAD/5DMU7ASEAzQbW4DMBlKz4LcRqE1wtMpJqIzwC8NqEBuFomdAFSDWEk
    UzMcUBwGMIArtAmKw1xAcvwSq4f26YDipExxZiIECIYBADwfFwE4tgZpAAAAAElFTkSuQmCC

    sergey
  13. the comment above means:

    [img src=“data:image/png;base64,...“]

    where … is a base64 encoded image data

    sergey
  14. sergey,
    data: urls don’t work in Internet Explorer.

    sil
  15. 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

    Habib
  16. please try Hope Mailer. Full compitable for embed image in email.

    downloadable at http://www.nesox.com.

    Nesox Solutions
  17. lolololololololololololololololololololololololollololololololololloolololololollo

    lol
  18. asdasdasdasd
    asdasda
    sdas
    dasdasdasd

    asdasda
  19. #include ddddddd

    aaaaa
  20. Donna Shimmin smokes cigarettes and, I repeat, and has a credit card!

    Joe
  21. 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.

    Tyler Ellis
  22. 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

    Phi Tran
  23. 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.

    Evil Overlord
  24. Good work. But not working in IE. Working only firefox.

    özcan
  25. Sorry, if it doesn’t work in I.E. it is useless.

    Eamonn
  26. Eamonn: I agree with you. Feel free to come up with something that works in both.

    sil
  27. Donna Shimmin, Michael Tousignant, and that tall dude that got fired for threatening somebody… NASNI

    Gary
  28. Thats Ok… Bye Take care……………..

    unwindy
  29. There should be some live examples here that will give more clear picture of the example.

    Thanks and Regards
    Sunil Dutt

    Sunil Dutt
  30. 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

    Billes
  31. 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.

    Billes
  32. 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

    KevinP
  33. aaaaaaaaaaaaaaaaaaaaaaaaaaaa

    subhen
  34. [...] as days pass by » Blog Archive » Embedding images in HTML (tags: images javascript) [...]

    JEDI » Blog Archive » links for 2007-03-14
  35. 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.

    Embed
  36. [...] 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. [...]

    Le blog de Stéphane POUYLLAU » Archive du blog » Extraits de textes avec Google recherche de livres
  37. whatever

    Garry Ansdell

Leave a Reply

OpenID is a decentralised authentication system. If you use LiveJournal or Vox you already have an OpenID; just use the URL of your homepage there. See also how to get yourself an OpenID.