Converting PNG Images into HTML
A while back I wrote a short python script to take any PNG image file and convert it into pure HTML. Yes, pure HTML.
This actually started as an office joke with the query of how do we put the company logo into emails for people who don’t have images enabled. It was a natural downward progression of jokes that eventually lead to converting the image into HTML. Aaaaaand as any dynamic language programmer in a Microsoft shop I knew I could probably whip up something in an hour or so.
My first few attempts didn’t work too well because I actually generated too much HTML. It seems that after about 2.75MB of HTML, browsers tend to choke and die when rendering it. So after the first initial hour of getting it to work, the remaining time was spent on compressing the HTML into a manageable portion for the browser.
The script uses <b> tags to represent rows and <a> tags to represent individual pixels (chosen because they’re short).
The script is smart enough to figure out that if two “pixels” next to each other are the same color, instead of adding a new <a> tag, it can simply increase the width of the <a> tag to the left.
Here’s a rendered sample of the output (using my wedding photo of all things) and you can see the reproduction is very faithful to the original. The script itself is included below.
