Image to HTML

We demonstrate two ways to transform a image into HTML based on: This isn't new at all. Kai pointed me at which dates to 2000 and the comments for imagecolorat() refer to 2005.
BTW, the inspiration to writing this was

the original image

... and now pure HTML

we rendered 120 * 67 (8040) pixels into 1562 cells


longest line

Instead of drawing each pixel as a cell (either a DIV or a TD tag) we try to group pixels with the same colour into one cell. In the first run we try to get the longest row with same colour and then try to expand it the next rows building a rectangle. (show the cells) [scaled 4 times]


A second version tries to build squares as a square should have the best size-to-area ratio. (show the cells) [scaled 4 times]


In the div-mode we can drop all the DIVs which have a transparent colour.


A nice side-effect of using HTML to draw images: On the black hat side: