re: Creating Pixel Art with CSS VIEW POST

FULL DISCUSSION
 

I've been quietly obsessing over this topic ever since I read your article and I have written a Perl module to turn images into data structures.

This video shows an image being uploaded and rendered by two different methods, one with elements 1×1 pixels in size, the other using your shadow method. They load very differently, as you can see.

The shadow method is quite a bit smaller in file size, though of course both are laughably huge compared to the original GIF itself.

I optimised a bit by using the most common colour as the background, so no "pixels" need to be rendered for that colour, and by creating classes for each colour with names as short as possible.

I'm going to do RLE (run-length encoding) soon but it's making my head hurt trying to figure out how to do it.

I used a GIF because the maximum colours is 256 as opposed to 16 million for JPG. The image in question is 128×128.

 

This is really cool! Until I posted and had some discussion in the comments, I'd never considered creating a tool to generate those different pixels programmatically. Optimizing by coloring the background is quite clever too!

code of conduct - report abuse