disruption.ca

When I finally decided to learn some basic html, the fist thing that struck me as interesting is that you can specify table cell sizes in pixels. It is possible to specify coloured, single pixel table cells in a rectangle, which is everything you need to do arbitrary graphics using the html table syntax.

So I hacked together a perl script that reads a png image, and outputs a web page containing the image as an html table. I even managed to do some simple compression by finding rectangular runs of pixels of the same colour. This serves no practical purpose, but I thought it was fun. Some day, if I get ambitious, I might try doing the same thing using a css layout.

Check out an example table image. (Warning: this link will load quite slowly, due to the file size, and the amount of work your browser has to do to render the table.)

The linked image comes from this png advocacy site. I hope they don’t mind.

A couple of interesting notes about the example page.

• It’s completly valid html. Check it out.
• It seems to render perfectly in IE and Safari, but if you look closely in Opera and Firefox, it’s not quite correct I’m not sure if this is a bug in my code, or a bug in the browsers’.
• It compresses very well. Take a look at these file size stats:
  

  burnallgifs.html	286.0K
  burnallgifs.png	19.3K
  burnallgifs.html.gz	16.9K
  burnallgifs.html.bz2	9.0K

  The html file is quite large, but the gziped version is actually smaller than the original png. Even after it has been passed through pngcrush.
  A server with mod_gzip installed could save bandwidth by converting their png and gif files to html tables. Completely impractical of course, but it’s an interesting thought.

If you want to play with this stuff, here is my png2html perl script. It takes a png file name as a parameter, and outputs to stdout. It requires the GD module. I warn you, it’s not a great piece of code, it’s just something I threw together as a quick hack.

A google search for png2html revealed another page where images are rendered in html. This approach reminds me of aalib, and is very different from mine.