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.

I'm currently available for hire, to help you plan, architect, and build new systems, and for technical writing and articles. You can take a look at some projects I've worked on and some of my writing. If you'd like to talk about your upcoming project, do get in touch.

More in the discussion (powered by webmentions)

  • (no mentions, yet.)