Most web pages are made up of HTML files linked to separate image files. Here's a way to embed an image directly into an HTML file.
Enter the URL of any JPEG, PNG or GIF on the web:
How does it work?
A table is created which is filled with large numbers of 1x1 cells. Each cell has a background colour of the corresponding pixel in the image. That's all it is; just a massive grid of coloured table cells. View the source to see the details or browse the Python script or the Perl script which generates the table.
Why does it take so long to load?
Tables are an inefficient way of encoding detailed graphics. A normal image file takes about two bytes to encode each pixel. By contrast the HTML version takes nearly fifty bytes to do the same. This means the size of the file is very large.
To combat this, the HTML table uses basic RLE compression. Runs of multiple cells on the same row with the same colour are merged into one cell using the COLSPAN attribute. One could achieve higher compression ratios by also merging cells that had very similar colours; thus making the format 'lossy'.
Why does it take so long to display?
Web browsers are designed to display image files; they aren't optimised for 10,000 cell tables. To help the browser out, the table is chopped up into smaller tables, each containing about 15 horizontal lines. This allows browsers like MSIE to render the chunks independently without having to wait for the entire image to load. Other browsers such as Mozilla don't care, since they are capable of rendering tables as they load.
So it's big, bloated and slow. What use is this?
In its pure form, none. At least none that I can think of.
However, it is the seed for a powerful tool. Combining table-based images with JavaScript opens the door to the creation and manipulation of dynamic content. Take a look at this simple example of a column of navigation buttons. Each of the arrows is a clever mix of graphics (for the tip), text (for the label) and simple table-based imagery (for the borders, and background). JavaScript is used to bring the whole thing together and to animate it on mouse roll-overs. Using pure graphics would have involved loading ten different images (instead of two) and would have made it more difficult to create or edit the text on the buttons.
The lesson here is to think outside the box. Images and HTML are more interchangeable than they look. With a little imagination one can make small, dynamic and visually appealing content without resorting to Flash or Shockwave.
What's next?
URI-encoded images have made table-encoded images obsolete (except for Internet Explorer). I've written a library which creates images with JavaScript.
Featured on Digg, 25 June 2007.