Hacker News Reader

Comment by huckfinnaafb | Hacker News Reader

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

View on HN

gzip -9 takes the CSS down to 6757 bytes. That's not why it's impractical.

You'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 :)

Gzipped SVG would be a fraction of that. That should be your new argument :)

gzip -9 takes the PNG down to 4714 bytes, still smaller than the CSS.

Also, 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.

Run that sprite sheet through optipng and gimp to remove extra white space and you can get it down to 4021 bytes.

And you'll also use up much more processing power to render CSS icons than to render a plain PNG ;).

Reply on news.ycombinator.com