Images embedded directly in HTML [2000]

There should be an image (32x32):

If it is not visible, open the note directly in a browser .

In 2000, I came up with a way to embed image data directly into HTML code (and without any CCS). This is done using tables. There is a "global" table consisting of tiny single cell subtables (as placeholders). Choosing different background colors for the cells of the "global" table allows to render an image.

In the simplest version, each cell (td) is a single pixel (height=1 and width=1). In a more complex version, a cell (td) can be a horizontal group of pixels (height=1 and width>=1) by using "colspan". Anyway, this HTML code is quite large.

And in 2000 I even wrote a program for OS/2 in C to generate HTML code from ICO (OS/2 version) files. I called it pic2html, but never released it. I lost the program, but you can easily rewrite it yourself.

The image above has HTML code ("colspan" version generated in 2000, and I just pasted it into the note HTML code):

===

<table bgcolor=#0080ff border=0 cellspacing=0 cellpadding=0>

<tr>

<td height=1 width=32 colspan=32>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

</tr>

<tr>

<td height=1 width=15 colspan=15>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

<td height=1 width=2 colspan=2 bgcolor=#000000>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

<td height=1 width=15 colspan=15>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

</tr>

<tr>

<td height=1 width=13 colspan=13>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

<td height=1 width=2 colspan=2 bgcolor=#000000>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

<td height=1 width=2 colspan=2 bgcolor=#cccccc>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

<td height=1 width=2 colspan=2 bgcolor=#000000>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

<td height=1 width=13 colspan=13>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

</tr>

...

<tr>

<td height=1 width=15 colspan=15>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

<td height=1 width=4 colspan=4 bgcolor=#000000>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

<td height=1 width=13 colspan=13>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

</tr>

<tr>

<td height=1 width=5 colspan=5>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

<td height=1 width=27 colspan=27>

<table border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table></td>

</tr>

</table>

===

This HTML code may seem too verbose. But as far as I remember, this is the result of compatibility testing in various browsers at the time. So it worked in 2000, and it still works (surprise!). But of course this "hack" makes no sense today. And it made no sense in 2000, so I never used it in a real website.