XBM graphics format? What the bloomin’ heck?




[UPDATE: it seems that in a horrible turn of events, the browser-makers have killed XBM!. Oh the humanity!] Okay, a quick warning here - this is a horribly nerdy post. You most certainly have no interest in the content below.

That said, I'll do all I can to make the subject matter come alive! Not that it'd be hard really - obsolete file formats is a pretty hot topic these days.

GIF files can contain 256 colours. JPGs can contain um, 16 gajillion colours. Luckily, it this modern age, we no longer discriminate on the basis of colours (though I wish Microsoft would discriminate on the basis of alpha channels) so I'd like to introduce to you the XBM file format - 2 colours. Black, and see-through.

'89 pornXBM stands for X-windows Bitmap, or something-or-rather. It was a standard format on X-windows, which is the main graphics system for Linux, and it has been supported by nearly all web browsers since the beginning-o-the-web. That's one of only 2 things this format has on it's "plus" side. But the other thing is pretttty interesting...

So, what's good about it? Nearly nothing. I like this quote from some edu site; "What it lacks in color, though, it also lacks in storage format." Ha ha! Funny, and uses too many commas, like me (The commas bit, that is).

The lack of image compression means that it's a really straightforward format. So straightforward that you can make your own images in javascript. Yep. Whack this in a html page:


<html>
<script type="text/javascript">
    xbmData = "#define img_width 8\n";
    xbmData += "#define img_height 8\n";
    xbmData += "static unsigned char img_bits[] = { ";
    xbmData += "0x7E,0x81,0xA5,0x81,0xA5,0x99,0x81,0x7E";
    xbmData += "}";
</script>
<body>
<img src="javascript:xbmData;" />
</body>
</html>

xbm smiley face. "Wow. that's great", you may be saying "but I can draw a fully rendered 3D smiley logo that can sing Technotronic." Fair enough, but being able to script an image using that strange javascript trick means you have access to THE basic building block of graphics programming that has for so long thought to be unavailable to the web - the ability to draw a pixel.

What can ya do with a pixel? Well, I used it above as a mask: XBM mask example that I defined dynamically and tiled as a background. Which is totally useless - a gif, or png could do that. But I had to slap that together, 'cause I just remembered a cool Hong Kong Fooey ruler I had in primary school that used the same technology.

What couldn't be done without XBMs (plus an equal measure of mad-man genius) is this 5 kilobyte version of Wolfenstein 3d (absolutely crazily amazing because this page you are looking at, including graphics is about 107 kilobytes, and does absolutely nothing useful)

XBM images probably aren't going to take over the web anytime soon, but keep an eye on them. They are so obscure that I'm sure a windows buffer overflow vulnerability will spring up from them shortly.

Heres a good XBM format reference if you were wondering what those hex numbers were. I had to bust out my scientific calculator to make my smiley character above. How cool is that!