« 話題のBumpTopを入れてみた | メイン | クリエイターからの辞表 »

CSS Spriteを簡単に作る

サイトを高速化する方法は色々ありますが、本気でチューニングしたいのなら初期コーディング段階で心がけておきたいのは、CSS Sprite。
転送総量が同じならば、細かい画像を幾つも取得するよりも、大きな画像を一度に取得した方がコネクションなどの手順が減る分だけ確実に速くなります。
(実際にはブラウザ毎に異なる同一ホストとのセッション数上限や、画像の更新頻度次第でのキャッシュ利用など色々な要素が絡んできますが、総じて却って遅くなるようなことは無いはず)

そんなCSS Spriteの欠点は、なにしろページのコーディングがメンドクサクなること。
その手間を少しでも軽減してくれるのが、CSS Sprite Creatorです。
spritecreator.PNG

使い方は簡単。

1. ひとまとめにした画像をアップロード
2. 使いたい部分を画像で選択
3. 右側に表示されるCSSをコピペ

これだけです。
手軽な反面、例えば「正確に40x50pxで分割された」ような画像では計算してしまった方が早いようにも思いますが。

Social Flares:

add to はてなブックマーク add to ECナビ add to livedoorクリップ add to Newsing add to Nifty Clip add to del.icio.us add to digg! add to FC2 add to Pookmark add to Furl add to technorati add to Ma.gnolia add to Google Bookmark add to Yahoo! my web add to reddit add to PingKing add to ROOTACE add to simpy add to spurl add to BuddyMarks

トラックバック

このエントリーのトラックバックURL:
http://dendrocacalia.com/mt/mt-tb.cgi/161

コメント

About

2009年04月09日 10:23に投稿されたエントリーのページです。

ひとつ前の投稿は「話題のBumpTopを入れてみた」です。

次の投稿は「クリエイターからの辞表」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

他のサイト

アーカイブ

あわせて読みたい

あわせて読みたい

なかのひと