5 ms·
3.7 KB image → 466 KB of text
by SimeVidas 11y ago
3.7 KB image → 466 KB of text
- vegardx 11y agoHow much if you gzip the text?
- AnkhMorporkian 11y agoNot 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.
- Theodores 11y ago...and 296% CPU for one Chrome tab whilst it is doing it, with negligible 'wait'. Right now I am seeing how that works out for a sizeable image, I don't think I have seen such a deliberately CPU intensive thing run before in a browser. I have no idea if it is doing it or not, so a 'progress bar' could be helpful here.