前の記事 ≪:Ext2.0のアルファ版がリリース
次の記事 ≫:CSSでスクロールバーのデザインをする際に非常に便利なWEBツール

複数の画像を1枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」

2007年10月03日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

Website Performance | CSS Sprite Generator

複数の画像を1枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」。
GoogleはHTTPコネクションを減らすため、画像は一枚で出力しています(参照)。
同じことをやろうとすると結構面倒ですが、複数の画像をZIP圧縮してアップロードするだけで、画像の結合&CSS出力を行ってくれるサービスが登場しました。

使い方は簡単。画像ファイルをZIPでまとめて圧縮後、アップロードします。



positionに関するCSSが出力されています。



ページ下部には画像を表示したい位置に「background: url〜」の記述も忘れないように、とも明記されています。
「Download Sprite Image」で、結合された画像のダウンロードが可能です。

コネクションが多すぎてパフォーマンスが悪い、コネクションを減らしてもっと多くのユーザを捌きたい、といった場合に活用できそうですね。
知っておくとイザというときに役立ちそうです。

関連の記事検索:CSS, image, 画像, Web制作
スポンサード リンク

By.KJ : 2007年10月03日 07:08 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)