Yahoo!のアイコン画像

昨日の記事書いてるときに、気づいたのだけれど、www.yahoo.comのページのアイコン画像は、アイコン1個で1画像でなくて、巨大な画像に複数個配置して、その一部分を表示するようになっている。
おもしろいのでメモ。

• 左カラムのショートカットのアイコン
  • http://us.i1.yimg.com/us.yimg.com/i/ww/thm/1/trough_1.7.gif
• メディアタイプやNEW表示、プルダウンボタンなどのアイコン
  • http://us.js2.yimg.com/us.js.yimg.com/i/ww/sp/icons_1.3.gif
  • http://us.i1.yimg.com/us.yimg.com/i/ww/sp/icons_1.4.gif
  • 現時点では、バージョン違いが両方読み込まれていて、さらに、updatedやnewは単体画像としても読み込んでいて、なんか統制が取れてないっぽい
• 右上のPIM系の大型アイコン
  • http://us.i1.yimg.com/us.yimg.com/i/ww/t7/pa-icons2.gif
• 右下の人気検索ワードの数字アイコン
  • http://us.i1.yimg.com/us.yimg.com/i/pulse/06q3/p_numb2.gif

左のショートカットの場合は、こんな感じで、background-positionをずらすことでアイコンを表示している。

<li class="adaptive">
<a href="r/2a" style="background-position: 0pt -1519px;">Y! Japan</a>
</li>
<li>
<a href="r/2h" style="background-position: -400px -439px;">Autos</a>
</li>

数十バイト〜数キロバイトの小さなアイコンを大量に読ませるよりも、パターンテーブルみたいな1つの画像(数十キロバイト)として読ませると、たしかにネットワーク的なパフォーマンスはよくなりそう。クライアント側のレンダリングの負荷はどうなのか分かんないけど。

作る側としては、新しくアイコンを追加するには、アイコンを登録して、画像のリビジョンを上げてアップロード、電卓片手にポジション計算して、ってプロセスか。
おもしろいなぁ。

(昨日の記事の画像そのまま貼り付け)