Clearly not aiming for smallest representation though. ;-)
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.
- You could also calculate which color is the most used color in the image, and make that the background color of the table. If 10% of the image have that color (for example white, in a logo) you could leave the class or id out of the table for these pixels.
- if two or more columns have the same color in a row, one could add a colspan. Since the word is rather long, it makes only sense from 2 columns onward, I guess, but if, say, the first 100 pixels of the image portrait a white line, instead of having 100 x '<td id='ff'></td>' you'd have <td id='ff' colspan=100></td'.
- The same could be done with column for colspan, albeit a bit more difficult.
- If there're certain pixel color patterns that appear throughout the image (say a white pixel next to a black pixel) one could create a css .before and .after rule for these, that defines the pattern for one td, making the 2. unnecessary.
There's probably more.
Yeah, this was more of a proof-of-concept. I haven't really looked into optimizing yet.