Maccle

バラバラの画像をCSSスプライト用の1枚イメージに整形してマージしてくれるWebサービスが便利

November 1, 2012
約 4 分

最近は、Googleのパンダやらペンギンアップデートやらで、サイトの表示速度も評価の基準になるとかならないとか。。

ページの表示速度に時間がかかっている場合、ChromeかFireFoxの「PageSpeed」というGoogleが提供してるプラグインでその要因を見つけることができますよ。

Chrome版エクステンション PageSpeed Insights
FireFox版アドオン PageSpeed Insights

拡張機能を有効にしたら、こんな感じで使います↓。

ちょっと前置きが長くなってしまいましたが、そこにこんな指摘が。

CSS スプライトに画像をまとめる

CSS スプライトを使用して、画像をできる限り少数のファイルにまとめることで、ラウンドトリップの回数と他のリソースをダウンロードする際の遅延が削減されます。また、リクエストのオーバヘッドが削減され、ウェブページがダウンロードする総バイト数を削減することができます。

そう。CSSスプライト。

Googleもこんな感じで1枚の画像に色んな素材用のグラフィックを配置して、CSSのポジション指定で対象のイメージだけを表示してリクエストを減らしてます。

1枚の画像に30個分のパーツを配置したとしたら、今まで分かれていた30個分の画像ファイルの読み込みのリクエストを1/30に抑えられるので、レスポンス向上に繋がるよ!ってことですね。

うーん、言ってることは良く分かるんですが、既存のCSSで表示してるバラバラの画像素材をCSSスプライト用に数枚の画像にして作り直すって、結構大変。

ってちょっと調べてみたら、既存の画像ファイルを結合してCSSスプライト用のイメージとCSSをあっという間に生成してくれる以下のサービスを発見!

CSS Sprite Generator | Project Fondue

CSS Sprite Generator | Project Fondue

日本語含め、18カ国語の言語表示に対応しています。

このサービスがとても便利な点は、まとめる画像をZIP形式のアーカイブにしてアップロードできることです。

100枚以上のCSS用素材イメージがあっても、ZIPに圧縮してたった1回のアップロードでCSSスプライト用の画像を作成してくれます。

パラメータも結構豊富で、重複画像の除外、リサイズ(比率保持指定あり)、オフセット(イメージ間の余白)、画像フォーマット、透過指定、CSSの接頭辞などがあります。

連結させる画像が多いほど生成されるファイルサイズが大きくなるので、オフセットはデフォルトの50ピクセル以下(例えば10ピクセルくらい)に指定し直したほうがいいかもしれません。

あと、各画像ファイルのファイル名が自動的にCSSのクラス名としてCSSスプライト用のCSSが出来上がるので、ZIPに圧縮する前に、可能であれば素材用の画像のファイル名は生成後のCSSクラス名と同じにしたほうが、このサービスで出来上がったイメージとCSSを、楽に既存のCSSに入れ替えることができると思います。

CSS Sprite Generator


CSS Sprite Generator

名前がどっちも一緒なのでややこしいのですが、、こちらは1枚1枚元画像を指定する必要があるので、まとめるイメージが大量にある場合には結構面倒です。

「NEED MORE?」ボタンでファイル選択ボタンを1行ずつ追加できますが、20ファイル以上指定してもそれ以上は1枚にまとめて画像を生成してくれません。

また、こちらはイメージと共にCSS入りのHTMLも生成してくれます。

About The Author

某IT系なんちゃってエンジニアヨーダ
Apple好きだけど盲目マカーは気持ち悪いと思ってる中道だと思い込んでるしがないダメダメエンジニア。

今もってるApple製品↓
Macbook Pro 15 inch, iMac 27 inch (Late 2009), iPhone 6 Plus, iPad (初代! いらない!)
Follow :

Leave A Reply

*

Comment On Facebook