2008年04月25日

YouTubeのアクセスが速いのは読み込む画像ファイルが少ないから? このエントリーをはてなブックマークに追加

YouTubeはGoogleが運営しているっぽいが、デザイン手法についてもGoogleっぽさが出ている気がする。
2008/4/25現在の YouTube.com で呼び出されているCSSは下記URLになる。

で、これを見ると、
http://s.ytimg.com/yt/img/master-vfl38353.gif
という画像が所々で呼ばれているのに気が付くだろう。

ちなみにその画像はこんな画像だ。
youtube 地球の日
で、CSSでは背景を透明にし、画像を一回だけ読み、width,height,scroll属性で別々の画像のように表示しているようである。
画像ファイルを読み込む数が減ると、それだけ高速に表示できるということなのだ。
#masthead .logo img {
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;
}
Googleのその他のサービスも同じよーな手法を取っているものがあるっぽい。
すごいんだねぇ。
5/29追記

「Yahoo!ニュース」の表示速度が3〜5倍に、そのからくりは……:記事の芽

CSS Spriteという技のようです。
posted by りょーち | Comment(0) | TrackBack(0) | 自分メモ
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: