This is not an image. It's an HTML table.

<i>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.</i><p>To me this sounds dodgy. The whole point about these ads is that they are supposed to be unintrusive and <i>not have images</i>.<p>Abusing HTML to re-inject what is in effect just that, images, sounds like blatant violation of TOS. This can cause bad rep for the ad-provider who has promised site-owners image-free ads, and bad rep for site-owners who has promised end-users (or maybe VIP members) an ad-free or ad-limited experience.<p>While this may technically be a "cool" (yet obvious) hack, the reasons stated for doing them are wrong on every single level. I wouldn't want to encourage this.

I did this, too: <a href="http://www.imgtocss.com" rel="nofollow">http://www.imgtocss.com</a>. It was one of my first webapps.<p>I think that my implementation is about as compact as possible while still working in all email clients. Outlook has an odd limit on the number of columns.<p>Here's the HN thread where I debuted the thing: <a href="http://news.ycombinator.com/item?id=2491438" rel="nofollow">http://news.ycombinator.com/item?id=2491438</a><p>It hasn't been a huge money-maker for me. I've got one subscriber at $30 a month and every now and then someone gives me $5 for a few conversions. It costs me $3 a week to run on Google App Engine.

I remember reading that Google did this for their checkout shopping cart image since it meant faster loading times. At a scale like Google's where they can measure the impact on the bottom line, something as ridiculous as this can make sense.

I played with something like this a while ago. Interestingly, I found that my gzip'd table html had a smaller file size than the source png, even after png crush. Though I suspect I was doing something wrong to get a result like that.<p><a href="http://disruption.ca/code/png2html/" rel="nofollow">http://disruption.ca/code/png2html/</a>

See also this news posting:<p><a href="http://news.ycombinator.com/item?id=4438373" rel="nofollow">http://news.ycombinator.com/item?id=4438373</a><p>Walter Zorn made a drawing library that churns out pixel sized DIVs.

HTML table is one of the Gimp's built-in output formats.

I did this in 1997 (!): <a href="http://home.wtal.de/ss/html/pnmtohtml/pnmtohtml.html" rel="nofollow">http://home.wtal.de/ss/html/pnmtohtml/pnmtohtml.html</a> (Sample images and C source included).

I played with the same kind of hack back in the nineties and then in JavaScript+HTML table in 2001. <a href="http://plea.se/me/galen_man.htm" rel="nofollow">http://plea.se/me/galen_man.htm</a> (it was hideously slow to scroll down back then)<p><a href="http://plea.se/me/mandelnikala.html" rel="nofollow">http://plea.se/me/mandelnikala.html</a>

Very interesting idea -- The idea that one can bypass image filters (say at a network DPI level) would be useful, until this technique is discovered and detectable.<p>What about some client-side js that read png/jpeg and converted to a colored tabular pixel array, makes it more difficult for a naive user to 'copy-paste' image.

Cool idea. :-)<p>Clearly not aiming for smallest representation though. ;-) <a href="https://github.com/discountgenius/pixeltable/blob/master/pixeltable.py" rel="nofollow">https://github.com/discountgenius/pixeltable/blob/master/pix...</a><p>First off, the p class should just go on the table instead of every pixel. Then use a descendant combinator "table.p td".<p>Next, I would probably index the image (like a gif) down to a few hundred colors, create a style for each, and then use a base62 (0-9A-Za-z) representation of the index as a class name.<p>You can further reduce the content size if you can use ids instead of classes, but even with classes, you don't need the quotes around the class names.<p>There are probably more ways as well, like using a fixed-width div container and filling it with floating &#60;b&#62; tags instead of using a table.

This is not an HTML table. It's an error establishing a database connection.

This may be horribly off-topic, but your link to your old tripod site made me nostalgic for my own preteen tripod/angelfire/geocities days. They don't seem to be live anymore, nor can I find them on the Internet Archive WayBack machine. I suppose they are gone for good, but do you have any other suggestions for trying to find them? I heard there was a huge dump of GeoCities available as a torrent, but I don't recall that I ever used my GeoCites page as much as the others.

I am curious, why not just use a data-uri and inline the image?

Try hitting "CTRL +" to zoom and it will bring your system to a halt.<p>Interesting effect though. It's what some crafty devs are doing to get around image blocking in modern email clients, like here: <a href="http://www.campaignmonitor.com/blog/post/3642/email-with-pixel-art-fallback-when-images-are-blocked" rel="nofollow">http://www.campaignmonitor.com/blog/post/3642/email-with-pix...</a>

The output can be made much smaller if you just encode (and possibly compress) the bitmap data as a (base64?) string in JavaScript, then use a little JavaScript to actually render it at runtime. You can then have all sorts of optimizations - render using CSS data URIs or canvas where available, for example, to make it look better on iPads and other high-DPI devices.

I did something similar a while back: <a href="http://zephyrfalcon.org/weblog/arch_d7_2003_11_29.html#e420" rel="nofollow">http://zephyrfalcon.org/weblog/arch_d7_2003_11_29.html#e420</a><p>It was more of an experiment than anything else. Certainly not too practical. :) One nice thing is that you can easily "scale" the image by changing the size of the table cells.

Both this and similar attempts in CSS (<a href="http://www.imgtocss.com/" rel="nofollow">http://www.imgtocss.com/</a>) look really bad on my iPad as I zoom in and out, there are little grey anti-alias lines all over the "image". Totally unusable.

Three things:<p>1. Google used to do this to reduce request overhead when displaying Google Checkout icon in search results.<p>2. Data URIs essentially render this pointless for newer browsers<p>3. I've tried using a lot of divs and animating them to simulate a canvas. Very slow. Do not try.

I used html tables as a poor man's pixel grid canvas for doing some very simple javascript software 3d object rendering animations many many years ago. Unfortunately, it seems I've lost the source.

idea for improvement: Use colspan to cut down on the number of cells

I did something like this for a government project 6 years ago. We had to email a status update (HTML) and we couldn't have any images so we found a site that turned images into tables.<p>Worked great!

My custom CSS makes it disappear (while normal images stay). Web developers should keep accessibility features of browsers in mind when coming up with ideas like these.

This brings back great memories, it is how I used to do tiny round corners back in the day, then I remember gmail came with a smarter way using divs and margins.

Same thing done prior 2006 there: <a href="http://www.cssplay.co.uk/menu/cssart.html" rel="nofollow">http://www.cssplay.co.uk/menu/cssart.html</a>

I get emails from a company which have as a fallback to table based images (but not pixel cells, they're block renderings), PizzaExpress IIRC.

I think I remember someone doing this in the late 90ies. It's a cute idea and a fun hack, but doesn't have a lot of practical applications.

Theoretically, SVGs should have exactly the same benefits (e.g. load times) without any of the "hackiness".

For anyone too lazy to use web inspector: It's 100x40, so effectively a 100-row 4000-cell table.

A hack trying to leverage current system without real merits

I think HN moderators could have a pause button for top threads like these. If there is a problem for the baby tech thing, just put the thread on pause for sometime [vanish] and bring the thread back online [reappear] the moment DB error/any error is sorted out.<p>Quite often we see connection errors or other problems for these new cool things, and the guys behind it lose a lot of crucial steam.

this is interesting, <a href="http://www.h3manth.com/content/convert-any-image-html5-canvas" rel="nofollow">http://www.h3manth.com/content/convert-any-image-html5-canva...</a> An example: <a href="http://www.osctools.net/jsbin/milbthqo/1/edit#javascript,html,live" rel="nofollow">http://www.osctools.net/jsbin/milbthqo/1/edit#javascript,htm...</a>