2008/4/25現在の YouTube.com で呼び出されているCSSは下記URLになる。
で、これを見ると、
http://s.ytimg.com/yt/img/master-vfl38353.gif
という画像が所々で呼ばれているのに気が付くだろう。
ちなみにその画像はこんな画像だ。で、CSSでは背景を透明にし、画像を一回だけ読み、width,height,scroll属性で別々の画像のように表示しているようである。
画像ファイルを読み込む数が減ると、それだけ高速に表示できるということなのだ。
#masthead .logo img {Googleのその他のサービスも同じよーな手法を取っているものがあるっぽい。
width: 132px;
height: 63px;
background: white url(http://s.ytimg.com/yt/img/master-vfl38353.gif) no-repeat scroll 0px 0px;
}
#masthead .nav-item.selected .leftcap {
background: transparent url(http://s.ytimg.com/yt/img/master-vfl38353.gif) no-repeat scroll -142px 0px;
}
.subButton b {
background: #F90 url(http://s.ytimg.com/yt/img/master-vfl38353.gif) repeat-x 0px -249px;
text-decoration: none;
}
.editButton b {
background: #F90 url(http://s.ytimg.com/yt/img/master-vfl38353.gif) repeat-x 0px -249px;
text-decoration: none;
}
すごいんだねぇ。
5/29追記
「Yahoo!ニュース」の表示速度が3〜5倍に、そのからくりは……:記事の芽
CSS Spriteという技のようです。








