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.
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.
Featured on Digg, 25 June 2007.