4 ms·
I think it's an interesting experiment to explore CSS3 stuff. Some experiments end up impractical, but they're still good to know about. That said, for anyone
by huckfinnaafb 15y ago
I think it's an interesting experiment to explore CSS3 stuff. Some experiments end up impractical, but they're still good to know about.
That said, for anyone wondering why they're not practical...
Spritesheet image - 9kb [http://imgur.com/Mcr9N](png)
CSS needed to write the positions - ~1-3kb
Pure CSS - 60kb
- bbatsell 15y agogzip -9 takes the CSS down to 6757 bytes. That's not why it's impractical.
- huckfinnaafb 15y agoYou're right about gzip/deflate! And of course you don't have to use all the icons. So now my argument is probably that of browser compatibility and separation of jobs :)
- sambeau 15y agoGzipped SVG would be a fraction of that. That should be your new argument :)
- catch23 15y agogzip -9 takes the PNG down to 4714 bytes, still smaller than the CSS.
- jacobolus 15y agoAlso, the PNG image is 24 bits per channel, obviously unnecessary for this kind of project. Taken down to 8 colors it loses no effective detail, and the size is dropped to 2.6 kb, or perhaps smaller after gzip.
- simcop2387 15y agoRun that sprite sheet through optipng and gimp to remove extra white space and you can get it down to 4021 bytes.
- TeMPOraL 15y agoAnd you'll also use up much more processing power to render CSS icons than to render a plain PNG ;).