4 ms·
Not his example, but here's a file I ran it on. Starting image size: 604521 bytes Output CSS: 7077663 bytes Gzipped: 1572759 bytes Ratio of original to gzip
by AnkhMorporkian 11y ago
Not his example, but here's a file I ran it on.
Starting image size: 604521 bytes
Output CSS: 7077663 bytes
Gzipped: 1572759 bytes
Ratio of original to gzipped output: 2.60x
---
So really, not that bad. Not great, obviously, but not bad.
- mistercow 11y agoWhat was the input type? PNG? If so, that means that a lot of the size gain is due to the fact that PNG can compress based on similarities between rows, while GZIP on the CSS is only compressing in the horizontal direction.
- lucideer 11y agoHe's also outputting his shadow colours in decimal rgb - hex would be a good deal smaller. I don't think small size was a goal.
- userbinator 11y agoI wouldn't say "not bad" because compression does nothing but turn bandwidth and storage costs into energy costs on the client. The client still has to decompress, parse, and render all that CSS using a much more elaborated path than the one it uses for images. It's still a fun hack though - reminds me of a similar technique I've seen before using many rectangular divs of a certain size, colour, and position.