Comment by genieyclo | Hacker News Reader

Comment by genieyclo | Hacker News Reader

How much money would HN save in bandwidth from changing the voting arrow images grayarrow.gif and graydown.gif (both 111b) to two small triangles in CSS as shown in this story? Or would it cost them more to even change to the css-style arrows? Also -- correct me if I'm wrong here -- why doesn't HN use one sprite image instead of serving up the images everytime separately for each story and comment? Probably because it's cached the two small arrows from the beginning so there's very little resources used anyways?

▲ or just use characters. Most of the shapes created by the CSS examples are already available as characters. ♡ ∞ ◆

HN markup is pretty inefficient anyway.

They will lose money:

  #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

is 143 bytes.

It would cut out two web requests too.

"data:" URLs are pretty good for this too, no web request needed. See RFC2397.

I've been using these a bit lately for little icons and such, I think its a cleaner approach than spriting in a lot of cases. I put a little script to generate data URLs up at http://nick.zoic.org/art/etc/make-data-url.html

How good is cross-platform Unicode support these days? I do like the idea of just using characters which look like icons, even if it does feel a bit like writing MS-DOS TUIs with box-drawing characters :-).

Reply on news.ycombinator.com