collamo

前々回のエントリー[ 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でこんな記述をして、まず画像を使っている箇所に一括で画像をセットします。


/* --- sprite --- */ #header, #navi h1, #navi #global-navi li.blog a, #navi #global-navi li.docs a, #navi #global-navi li.portfolio a, #navi #global-navi li.docs-off a, #navi #global-navi li.portfolio-off a, .asset-header, .widget-header, .widget-content li a:hover, .trackbacks-info, .trackback, .comment, .comments-header, #footer{ background:url("http://collamo.jp/images/sprite.png") no-repeat; } /* --- /sprite --- */ 


記述をしたら、あとは要素毎でbackground-positionを使い画像の位置を調整していきます。
このときphotoshopのmapツールと情報タブで確認をしながらやるとスムーズに出来ます。

自分の紹介したいやり方は大体こんな感じでございます。
他にも手法は色々あると思うので、他のやり方あれば是非聞いてみたいです。




効果測定

最後に実際自分のサイトで試してみて、yslowで実装の前後の速度を比較してみたのでご紹介します。


・実装前

・実装後

今回8枚の画像をスプライトをすることで2枚にしたので、6リクエストの削減が出きました。
表を見るとわかるようにRESPONCE TIMEもある程度早くなってることがわかります。

正直これくらいの変化だと、体感的に感じるほどの効果が得られないところが実情ですが、
これが、画像が増えれば増えるほど、びっくりするほど大きい変化が見て取れるようになってくるので、「画像が多いせいかなんか表示遅いな」と感じるときには是非試して見てほしいところです。

巷で話題のcssスプライトでございますが、このページでも実装してみたのでドキュメント風にエントり。


CSSスプライトって？


cssスプライトというのは、
css上のbackgroundで読み込んでいる画像達を、数枚のバラけた画像を1枚の画像にまとめちゃいましょう。というテクのことをいいます。画像の配置は↓の画像のようにその1枚のスプライト画像をbackground-positionを使って配置します。


・スプライト画像

これによって、cssからのサーバーに対するリクエストが数回から1回に減るためパフォーマンスアップに繋がるというわけです。


CSSスプライトのメリット・デメリット


ただ、
パフォーマンスが良くなるからと、ほいそれ実装しろっていうことになりそうなのですが、
これにもメリット・デメリットというものがあるので、状況によりけりで使いわけて欲しいところです。


メリット


・パフォーマンス改善になる。
画像の数が多ければ多いほど、そこから改善した時の効果は大きい。
逆に言うと、画像数がもともと1桁台くらい少ないと、そこまで大きな改善効果は無い。


・画像がいっぺんに表示される
読み込み中、パラパラと画像が表示されて、なんだか作りが甘い? 感が消せる。
これもクオリティですね


・整理した感が気持ちいい
自己満の世界


デメリット


・工数がかかる
画像の数にも寄りけりだけど、普段のコーディング工数の3割増しくらいになる。
きちんと工数は計算に入れて時間を確保すべき


・運用が大変になる
ページの運用が始まった段階で、画像の修正などが入った場合修正が普段より面倒になる。
運用する側とあらかじめ相談する必要はあるかも。


・カオスになる
チームで開発を行っている場合、人の作った画像スプライトを見てもよくわからなくて困る。
特に背景画像のスプライトなんかだとまと、似たり寄ったりでどれがどれだかよくわかんないよ！みたいなんになる。
そう考えるとやっぱり運用時のためのドキュメント準備は必須、何がどこの画像だとか。
そこも工数がかかりますね


ということで総合的にみて、

はたして期待したパフォーマンスアップ効果が出るかどうか（画像の数次第で）、
それに見合った工数かどうか（CSSスプライト自体の工数＋ドキュメント制作の工数＋運用の工数）、

っていうをあらかじめ考えて、やるかやらないかを決めた方がよさそうです。特に大規模なサイトでは。


サイトの質にも関わってくるところだと思うので、もちろん出来るならやった方がいいですね。。




次はスプライトのやり方とか、このサイトに試してみた効果について書きます。