前々回のエントリー[ CSS ] CSSスプライト で書いたスプライトについてですが、
やり方的なところを今回紹介します。
CSSスプライトのやり方
スプライトですが、
自分はphotoshopを使って、画像をくっつける作業を手作業でやっています。
http://spritegen.website-performance.org/
↑のサイトのツールなんかでは、自動が画像をスプライトして、かつcssを吐き出してくれるという便利なことやってくれたりするのですが、
あくまで自動なので、元のページcssを考慮した画像を吐き出してくれないことが多く、
結局のところ修正をしないといけなくなったりするので、逆に時間がかかってしまうことが多いためです。
また、PSDなどのスプライトのデータを残すことが出来ないため、後々運用する人が泣いてしまうこともあります。
ということで、結局自分でちまちま画像を配置するのですが、
イメージ的には↓のようにガイドを引きながら画像を配置していきます。
スプライトする上での注意
上記のようにスプライトをしていくわけですが、配置する上で気をつけるべきところがいくつかあります。
・配置する順番
作る人にもよりけりですが、自分の場合はなるべく後で運用がしやすいように、
ページの上から順に使う画像を配置していきます。
画像の種類（アイコン、背景）で分ける方法も一つありますが、背景画像なんかを寄せ集められた日にはどれがどれだか本気でわからなくなるので、あまり綺麗なスプライト画像にはならないですが、この方法がいいんじゃないかと自分は思っています。
・表示の時に他の画像が見えないようにする
width,height指定で、ガチっとコーディングする場合はいいですが、
そうでない場合は文字を拡大したときなどに他の画像が出てこないように注意してください。
怪しい場合は画像と画像の間に十分な余白を入れて画像を配置する必要があります。
・特殊な配置をする画像の場所を確保する
特殊な配置というのは、例えばrepeatをする背景画像や、positionをbottom指定で置くような画像のことです。
例えばrepeat-xで使っている画像などは、端から端までその画像で埋める必要がありますし、
bottom指定で使っている画像は、スプライトの一番下に設置しないといけません。
xにもyにもリピートするような画像は、もうスプライトとは別で考える必要もあります。
・特殊な配置の画像が多い場合の対処法
規模の大きいサイトであれば、repeat指定や、bottom指定の画像はたくさん出てくると思います。
その場合はもう無理に1枚にスプライトする必要はないので、
repeat-x用のスプライト
positionがbottom用のスプライト
という風に指定の仕方ごとでスプライト画像を分けたりするといいかもしれません。
そうすると無駄に画像が大きくなることもさけられますし、結果的に1枚のスプライトよりもパフォーマンスがあがることがあります。
ようはページによって臨機応変にスプライトを使い分けていく必要があるということですね。
画像をCSSにセットする
次に画像をCSSにセットしていくわけですが、
スプライト画像を書き出したらまずCSSでこんな記述をして、まず画像を使っている箇所に一括で画像をセットします。
記述をしたら、あとは要素毎でbackground-positionを使い画像の位置を調整していきます。
このときphotoshopのmapツールと情報タブで確認をしながらやるとスムーズに出来ます。
自分の紹介したいやり方は大体こんな感じでございます。
他にも手法は色々あると思うので、他のやり方あれば是非聞いてみたいです。
効果測定
最後に実際自分のサイトで試してみて、yslowで実装の前後の速度を比較してみたのでご紹介します。
・実装前
・実装後
今回8枚の画像をスプライトをすることで2枚にしたので、6リクエストの削減が出きました。
表を見るとわかるようにRESPONCE TIMEもある程度早くなってることがわかります。
正直これくらいの変化だと、体感的に感じるほどの効果が得られないところが実情ですが、
これが、画像が増えれば増えるほど、びっくりするほど大きい変化が見て取れるようになってくるので、「画像が多いせいかなんか表示遅いな」と感じるときには是非試して見てほしいところです。
やり方的なところを今回紹介します。
CSSスプライトのやり方
スプライトですが、
自分はphotoshopを使って、画像をくっつける作業を手作業でやっています。
http://spritegen.website-performance.org/
↑のサイトのツールなんかでは、自動が画像をスプライトして、かつcssを吐き出してくれるという便利なことやってくれたりするのですが、
あくまで自動なので、元のページcssを考慮した画像を吐き出してくれないことが多く、
結局のところ修正をしないといけなくなったりするので、逆に時間がかかってしまうことが多いためです。
また、PSDなどのスプライトのデータを残すことが出来ないため、後々運用する人が泣いてしまうこともあります。
ということで、結局自分でちまちま画像を配置するのですが、
イメージ的には↓のようにガイドを引きながら画像を配置していきます。
スプライトする上での注意
上記のようにスプライトをしていくわけですが、配置する上で気をつけるべきところがいくつかあります。
・配置する順番
作る人にもよりけりですが、自分の場合はなるべく後で運用がしやすいように、
ページの上から順に使う画像を配置していきます。
画像の種類（アイコン、背景）で分ける方法も一つありますが、背景画像なんかを寄せ集められた日にはどれがどれだか本気でわからなくなるので、あまり綺麗なスプライト画像にはならないですが、この方法がいいんじゃないかと自分は思っています。
・表示の時に他の画像が見えないようにする
width,height指定で、ガチっとコーディングする場合はいいですが、
そうでない場合は文字を拡大したときなどに他の画像が出てこないように注意してください。
怪しい場合は画像と画像の間に十分な余白を入れて画像を配置する必要があります。
・特殊な配置をする画像の場所を確保する
特殊な配置というのは、例えばrepeatをする背景画像や、positionをbottom指定で置くような画像のことです。
例えばrepeat-xで使っている画像などは、端から端までその画像で埋める必要がありますし、
bottom指定で使っている画像は、スプライトの一番下に設置しないといけません。
xにもyにもリピートするような画像は、もうスプライトとは別で考える必要もあります。
・特殊な配置の画像が多い場合の対処法
規模の大きいサイトであれば、repeat指定や、bottom指定の画像はたくさん出てくると思います。
その場合はもう無理に1枚にスプライトする必要はないので、
repeat-x用のスプライト
positionがbottom用のスプライト
という風に指定の仕方ごとでスプライト画像を分けたりするといいかもしれません。
そうすると無駄に画像が大きくなることもさけられますし、結果的に1枚のスプライトよりもパフォーマンスがあがることがあります。
ようはページによって臨機応変にスプライトを使い分けていく必要があるということですね。
画像をCSSにセットする
次に画像をCSSにセットしていくわけですが、
スプライト画像を書き出したらまずCSSでこんな記述をして、まず画像を使っている箇所に一括で画像をセットします。
記述をしたら、あとは要素毎でbackground-positionを使い画像の位置を調整していきます。
このときphotoshopのmapツールと情報タブで確認をしながらやるとスムーズに出来ます。
自分の紹介したいやり方は大体こんな感じでございます。
他にも手法は色々あると思うので、他のやり方あれば是非聞いてみたいです。
効果測定
最後に実際自分のサイトで試してみて、yslowで実装の前後の速度を比較してみたのでご紹介します。
・実装前
・実装後
今回8枚の画像をスプライトをすることで2枚にしたので、6リクエストの削減が出きました。
表を見るとわかるようにRESPONCE TIMEもある程度早くなってることがわかります。
正直これくらいの変化だと、体感的に感じるほどの効果が得られないところが実情ですが、
これが、画像が増えれば増えるほど、びっくりするほど大きい変化が見て取れるようになってくるので、「画像が多いせいかなんか表示遅いな」と感じるときには是非試して見てほしいところです。
