DEV Community

Discussion on: Creating Pixel Art with CSS

johnhorner profile image
John Horner • Edited on

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.

jnschrag profile image
Jacque Schrag Author

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!