CSSの背景画像を解析しまくるブックマークレット SpriteMe

ウェブ制作者必携！相当便利です。
CSSレイアウトで、飾りになる画像はbackground-imageとして指定することが多いです。個別に画像を切り出す場合もありますが、属に言う「CSS Sprite」と呼ばれる手法もこれです。

CSS Spriteとは？

画像を個別にスライスして個別に読み込むより、1枚の画像にして表示位置を調整して出す手法です。
個別に読み込むよりも、スライスの手間を省略・読み込み時のリクエストを1度だけで済むので、使い方によってはCSS Spriteを活用した方が速い場合があります。

Firefox3.5だとソースから画像までのリンクをたどれますが、それよりも便利なブックマークレットがあります。

ブックマークレット配布サイト：SpriteMe

他人のサイトの解析時、画像をまとめて見られるので重宝します。

導入方法

配布サイトへ行き、“SpriteMe”のリンクをブックマークバーにドラッグします。普通にブックマークしても可。

使い方

導入したブックマークレットを、解析したいサイトで実行します。

すると、背景画像で指定されている画像が一覧で出てきます。
x軸にリピートなど、属性ごとに分けられて表示されるほか、リンクして画像のみ表示・個別画像を1つの画像にまとめる機能も備えています。