Note: click here to see the “image.” (148.6 kB)
The above image is a snippet of a picture I took while snorkeling in Hawaii last week. If you right click on it, you will notice a conspicuous lack of image-related commands. No “Save image as” or “Copy image.” This is because it is not an image. It is an HTML table with cells 1 pixel wide and 1 pixel high and all the background colors of the rainbow. The size of the HTML is much larger than the original image and it grows proportional to the total number of pixels in the image with no compression whatsoever. So, why would anyone ever want to do this?
The long story
When I was a very young web developer of about 12 years of age, the only web development software available to me was Notepad and MS Paint. The internet was rapidly advancing towards multimedia-based presentations that slowly strained through my parents’ dial-up modem. I felt the need to keep up and I attempted to make up for my lack of image creation software with a little creativity and an abundance of time. I recently discovered a couple examples of my childhood image creation skills that are still (!) being hosted for free by the good folks at tripod at http://jagdragon.tripod.com. Most of the links are now long broken, but it’s still a neat little window into my 7th grade mind.
The first example above doesn’t really relate to the topic at hand, but it illustrates the thought processes (and spare time?) of 12-year-old me. The slight shadow effect on the text in the image was created by tracing a one-pixel wide border around every letter by hand. It took a couple of afternoons.
The next example is a little more interesting and relevant to this post.
The above image is just a screenshot, but the checkerboard pattern of the original was created in pure HTML with a table and a handful of font tags. I loved it because it looked something like an image, but it loaded so much faster. Even as a kid, I arrived at the logical conclusion that if I made the cells small enough and got rid of the text, I could create any image I wanted with pure HTML. I didn’t know much about how computers store information, so I mistakenly also believed that it would load faster than a regular image. At the time I didn’t have the programming abilities necessary to automate the task, so this idea rested dormant at the bottom of my brain.
Fast forward 15 years
I finally discovered a somewhat useful reason to resurrect my childhood idea. My web store, BTC Gear has bought up some ad space on the Bitcoin Talk forums which allow small, image-free HTML ads with CSS styling. If we could somehow fit our logo or a product image into these constraints, we could convey more information to our potential customers and perhaps grab a bit more attention. I got to work on a python script that turns images into pure HTML and it ended up working quite well. You can check out the source code at GitHub. The resulting HTML is MUCH larger than I thought it would be, but we get reasonable load times if the images are small enough.
While working on the code, I thought of another potential application for this concept. You could slip your company logo past the image filters of e-mail clients to make your company communications pop a bit without the annoying “images have been blocked” message. What other applications might there be?
If you have the inclination and the processing power to handle it, try zooming in (ctrl+=, or ctrl+scroll wheel). In my browser (Chrome), the scaling of the cells is not uniform and I get some weird effects. Obviously, Chrome’s zoom feature is not optimized for my very-tip-of-the-corner case.
Edit: I shrunk the image to try to keep everything afloat.
Discuss at Hacker News.