
This is not an image. It's an HTML table. - discountgenius
http://discountgeni.us/2012/08/27/pixeltable/
======
josteink
_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._

To me this sounds dodgy. The whole point about these ads is that they are
supposed to be unintrusive and _not have images_.

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.

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.

~~~
discountgenius
The forum moderator uploads each ad manually and explicitly states that ads
can be rejected for being "too annoying." Although I could see how this would
be a backdoor in some situations, the site owner will not upload our ad unless
he's OK with it.

------
dwwoelfel
I did this, too: <http://www.imgtocss.com>. It was one of my first webapps.

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.

Here's the HN thread where I debuted the thing:
<http://news.ycombinator.com/item?id=2491438>

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.

~~~
johnx123-up
[http://www.imgtocss.com/convert?url=http://www.imgtocss.com/...](http://www.imgtocss.com/convert?url=http://www.imgtocss.com/assets/images/firefox.png)
produces style attribute that will be stripped down by most web email clients.

~~~
dwwoelfel
There's an option to specify a background color that will be mixed in with the
image to replace the opacity.

------
ernestipark
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.

------
erik
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.

<http://disruption.ca/code/png2html/>

~~~
chii
perhaps your resolution when converted is slightly smaller than the original,
and thus, after compression, the size is smaller than the source?

~~~
erik
I'm confident that resolutions are identical. I am using colspan and rowspan
to do two dimensional run-length encoding, which may account for the
difference. Even so, it's a surprising result.

------
Maci
See also this news posting:

<http://news.ycombinator.com/item?id=4438373>

Walter Zorn made a drawing library that churns out pixel sized DIVs.

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

------
ssdsa
I did this in 1997 (!): <http://home.wtal.de/ss/html/pnmtohtml/pnmtohtml.html>
(Sample images and C source included).

------
Kafka
I played with the same kind of hack back in the nineties and then in
JavaScript+HTML table in 2001. <http://plea.se/me/galen_man.htm> (it was
hideously slow to scroll down back then)

<http://plea.se/me/mandelnikala.html>

------
MiWDesktopHack
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.

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.

------
GICodeWarrior
Cool idea. :-)

Clearly not aiming for smallest representation though. ;-)
[https://github.com/discountgenius/pixeltable/blob/master/pix...](https://github.com/discountgenius/pixeltable/blob/master/pixeltable.py)

First off, the p class should just go on the table instead of every pixel.
Then use a descendant combinator "table.p td".

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.

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.

There are probably more ways as well, like using a fixed-width div container
and filling it with floating <b> tags instead of using a table.

~~~
discountgenius
Thanks!

Yeah, this was more of a proof-of-concept. I haven't really looked into
optimizing yet.

~~~
joelbm24
i did something like that a while back if you want to take a look.
<https://github.com/joelbm24/tablify>

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

~~~
discountgenius
workin' on it...

~~~
catch23
Do you have a mirror anywhere? in the past people would just put a github gist
or something.

------
OkGoDoIt
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.

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

~~~
lmm
I'm guessing the forum simply blocks all img tags

~~~
mqzaidi
If you have javascript and don't worry about supporting IE 7, you can possibly
defeat any kind of blocking logic that looks for the '<img' tag.

------
taitems
Try hitting "CTRL +" to zoom and it will bring your system to a halt.

Interesting effect though. It's what some crafty devs are doing to get around
image blocking in modern email clients, like here:
[http://www.campaignmonitor.com/blog/post/3642/email-with-
pix...](http://www.campaignmonitor.com/blog/post/3642/email-with-pixel-art-
fallback-when-images-are-blocked)

~~~
wtracy
What browser/system? On Linux with Firefox 14.0.1 I had no problem zooming in.

~~~
taitems
Chrome latest on a fairly high end Windows machine.

------
ndabas
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.

------
zephyrfalcon
I did something similar a while back:
<http://zephyrfalcon.org/weblog/arch_d7_2003_11_29.html#e420>

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.

------
jahewson
Both this and similar attempts in CSS (<http://www.imgtocss.com/>) 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.

~~~
radio4fan
I don't know about that, you know.

Just because there's a minor zooming bug in iOS, I wouldn't say your iPad is
totally unusable.

~~~
jahewson
The graphic is unusable - i.e. don't use it. And it's not a bug - HTML leaves
such anti-aliasing rules undefined, which is why it's a bad idea to try this
sort of practice, and why CSS "graphics" nearly always look crappy.

------
TazeTSchnitzel
Three things:

1\. Google used to do this to reduce request overhead when displaying Google
Checkout icon in search results.

2\. Data URIs essentially render this pointless for newer browsers

3\. I've tried using a lot of divs and animating them to simulate a canvas.
Very slow. Do not try.

~~~
dwwoelfel
_Data URIs essentially render this pointless for newer browsers_

He mentions bypassing image filters in emails as one of the use cases. Data
URIs still require an img tag, so they'll be blocked by the email client.

~~~
TazeTSchnitzel
Newer email clients should allow them, though.

~~~
dwwoelfel
When I checked last year, gmail was indiscriminately blocking anything with an
img tag.

------
0x0
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.

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

~~~
duskwuff
More improvement: Use that with "background: linear-gradient(...)" and you've
got the makings of a truly baroque image format.

~~~
darkstalker
With several backgrounds like that maybe you can build up a Fourier
representation of a small image

[http://upload.wikimedia.org/wikipedia/commons/2/23/Dctjpeg.p...](http://upload.wikimedia.org/wikipedia/commons/2/23/Dctjpeg.png)

~~~
duskwuff
Right, that's what I kind of had in mind. It'd be tough to combine them to get
a "checkerboard" result, though, since you can only specify them along a
single axis. You might be able to do something fancy with multiple overlapping
backgrounds, though.

------
joeblau
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.

Worked great!

------
alok-g
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.

------
emp_
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.

------
gbog
Same thing done prior 2006 there: <http://www.cssplay.co.uk/menu/cssart.html>

------
pbhjpbhj
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.

~~~
jgroome
Reminded me of this too. You're right, it was indeed Pizza Express:
[http://www.ohmz.net/2012/03/19/clever-email-marketing-
from-p...](http://www.ohmz.net/2012/03/19/clever-email-marketing-from-pizza-
express-using-html/)

------
davidw
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.

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

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

~~~
discountgenius
I just replaced it with 50x20... should help speed things along.

~~~
whichdan
It does render a lot faster now.

Are you using any plugins like W3TotalCache for WordPress? I'd recommend it,
if only until this story falls off the frontpage.

------
guilloche
A hack trying to leverage current system without real merits

------
monsterix
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.

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.

~~~
derefr
A more complex, but perhaps better solution, UI-wise: HN could just poke
Coral/Google/whoever to cache any site that hits the front page, so there'll
be a guaranteed fallback--and then switch the link out for the fallback when
you press your hypothetical pause button. (The only problem being that this
works for web _pages_ , but won't do much to help web _apps_.)

~~~
pbhjpbhj
> _switch the link out for the fallback when you press your hypothetical pause
> button_ //

I think this interferes too much. An icon indicating that the site is having
problems and a second link to a cache would, IMO, be preferable. Such caches
in my country are almost certainly copyright infringing if used to redirect
users away from the original source - with this modified solution the user
chooses. TBH it's probably still strictly a copyright infringement but the
situation looks more ethical.

Of course we know that HN won't implement something like this.

------
zodiac1111
this is interesting, [http://www.h3manth.com/content/convert-any-image-
html5-canva...](http://www.h3manth.com/content/convert-any-image-html5-canvas)
An example:
[http://www.osctools.net/jsbin/milbthqo/1/edit#javascript,htm...](http://www.osctools.net/jsbin/milbthqo/1/edit#javascript,html,live)

