HTML Images Without Images - by Steven Goodwin 2008

This is a method of introducing images into HTML files, without using images. e.g.

I call the project HIWI and it's short for 'HTML Images - Without Images'. It's for things (like TiddlyWiki) where everything needs to be held in a single, and/or text-only, format. The ideas present also support in-browser image editing.

Download HIWI which includes this demo page, the javascript code for the TGA parser, and the encompassing image routine itself. The Mona Lisa example image is also included.

You could also just hit 'view source' :)

How does it work?

Very well, thank you!
(Hint: it uses a table of differently coloured background cells!)

Usage:

<SCRIPT language="JavaScript" SRC="hiwi_image_tga.js"></SCRIPT>
<SCRIPT language="JavaScript" SRC="hiwi_image_parser.js"></SCRIPT>

<SCRIPT language="JavaScript" SRC="mona_lisa.js"></SCRIPT>

document.write(decodeImage(imgTGA, 1));
imgTGA is an array containing a byte-for-byte version of a file. '1' is the scale factory. '1' for normal, '2' for double, etc.

This version is a rough example using many hacks and shortcuts. In short:

Hacks in this version:

Issues with this version/idea:

  • Slow (~5 seconds to decode a 163x218 image)
  • Limit ctor size on arrays
  • Future thoughts:

  • Optimal cell rendering
  • Alternate image parsers, including those with RLE/compression
  • Scale images to 64x64 (e.g.)