★新URL：http://20kaido.com/
★新RSS:http://20kaido.com/index.rdf
いままでFC2ブログで5年間、お世話になりました。感謝です。
移転先でもよろしくお願いいたします！
二十歳街道まっしぐら（FC2ブログ時代）人気記事TOP50まとめ
CSS Splite を使うとどれだけサイトが軽くなるか分かるブックマークレット「Sprite Me」
CSS Sprite でサイトを軽くしたい
「Sprite Me」はCSS Spriteでサイトがどれだけ軽くなるか教えてくれるサイトです。
サイトというよりか、ブックマークレットを用意してくれています。
ブックマークバーにいれておくと、いろんなサイトでCSS Spriteを使うとどれだけ軽くなるかを教えてくれます。
CSS Spriteとは、複数の画像を１枚の画像にしておき、CSSで区切って表示させる手法です。
Googleもこれを利用していますね。
詳しくは、CSS Spriteを活用しようを参考にしてください。
以下に、Sprite Me のブックマークレットを使ってみた様子を載せておきます。
サイトというよりか、ブックマークレットを用意してくれています。
ブックマークバーにいれておくと、いろんなサイトでCSS Spriteを使うとどれだけ軽くなるかを教えてくれます。
CSS Spriteとは、複数の画像を１枚の画像にしておき、CSSで区切って表示させる手法です。
Googleもこれを利用していますね。
詳しくは、CSS Spriteを活用しようを参考にしてください。
以下に、Sprite Me のブックマークレットを使ってみた様子を載せておきます。
Splite Me ブックマークレットの登録
CSS Sprite してみる
次にCSS Spriteしたいサイトを表示させます。
先ほどブックマークしたブックマークレットをクリックしましょう。
するとこのようにCSS Spriteした方がいいよって画像とそうでない画像が一覧で表示されます。
右上の「make sprite」をクリックし見ましょう。
CSS Spriteされます。
CSS Spriteした結果です。
このように複数の画像が１枚の画像になりました。
どれだけ軽くなったかというと、
ありゃ！？10KB重たくなってますね…。
画像はかなり高圧縮してますからね。
しかし、いままで6回も画像サーバにアクセスしていたのがたった１回で済みます。
場合によってはこちらの方が表示が速くなるということもありますね。
Googleなどは大量にサーバにアクセスされるので、
アクセス回数を減らすだけでもかなりの効果があるんでしょうね。
「Sprite Me」で自分のサイトも試してみてください。
先ほどブックマークしたブックマークレットをクリックしましょう。
するとこのようにCSS Spriteした方がいいよって画像とそうでない画像が一覧で表示されます。
右上の「make sprite」をクリックし見ましょう。
CSS Spriteされます。
CSS Spriteした結果です。
このように複数の画像が１枚の画像になりました。
どれだけ軽くなったかというと、
ありゃ！？10KB重たくなってますね…。
画像はかなり高圧縮してますからね。
しかし、いままで6回も画像サーバにアクセスしていたのがたった１回で済みます。
場合によってはこちらの方が表示が速くなるということもありますね。
Googleなどは大量にサーバにアクセスされるので、
アクセス回数を減らすだけでもかなりの効果があるんでしょうね。
「Sprite Me」で自分のサイトも試してみてください。
- 関連記事
http://tokuna.blog40.fc2.com/tb.php/1865-7e56d79c
2009年09月15日 | 
メール：20kaido@gmail.com
twitter：
mixi：参加中
はてな：
YouTube：参加中
Flickr：
Last.fm：
Tumblr：
手書きブログ：
iKnow!：
Skype：kamekiti-
