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.
I’m a web developer & data visualizer working at a think tank in D.C. I'm a self-taught dev trying to better my skills. I spend most of my time on the front end of the stack.
Location
Washington, D.C.
Work
Lead Developer at Center for Strategic and International Studies
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!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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!