ゼロから学ぶ「CSS Sprite」

Yahoo! JAPANの制作チームによる、さまざまなWebサイト最適化手法 第1回

画像を横並びにした場合の注意点

　ちなみに今回のサンプルで縦並びのSprite画像ではなく、横並びのSprite画像を用いた場合、次のような表示になってしまいます。

　このようにカメラアイコンがテキストの後ろ側に見えてしまいます。

　なぜこのようなことが起きてしまうかというと、今回のサンプルの場合、上記画像のように目に見える部分は白背景部分で、灰色の部分は見えない状態となっているのです。横並びのSprite画像を用いたらカメラアイコンが表示されてしまう理由が分かるかと思います。

※注意

　ちなみにこの現象を回避するには余分なHTMLタグを追加する必要があるため、今回は触れません。

Sprite画像作成補助ツール

　ちなみに、複数の画像をひとまとめのSprite画像に構成してくれるウェブツールなども存在します。また、CSSも一緒に書き出してくれるので非常に便利です。ただ融通が利かない場合があるので、それは微調整を行うと良いです。

• CSS Sprite Generator | Project Fondue

　こちらはZipの中に画像を入れておけば大量の画像もSprite画像にしてくれます。設定も細かくでき、オープンソースなので開発環境に持ってきて使用することもできます。

• CSS Sprites generator

　少なめの画像を手軽にまとめるのに便利です。ただ画像を外部にアップするのでセキュリティを重視する場合は上記のサイトをお勧めします。

• CSSスプライト作成に便利な拡張機能「CSS Sprite Extension」 | デベロッパーセンター

　上記2つと異なり、Adobe Fireworks CS5の拡張機能となっています。Sprite画像とCSSの書き出しを同時に行ってくれるため、製品を持っている方にはおすすめです。

まとめ

　今年に入ってGoogleは、検索結果の順位付けに表示速度がかかわると公式のWebmaster Central Blogに発表がありました。表示速度の向上はSEOにもかかわる内容にもなってきている、ということになります。

　SmartPhoneも広まっていく中、限られた回線の環境下でコンテンツを速く表示するという事はとても重要な要素として扱われてきています。

　皆様も、同じコンテンツであったとしても表示速度が速ければそちらの方が見たいと思うのではないでしょうか（少なくとも筆者はそう思います）。

　Yahoo! JAPANトップページは新しい背景画像・アイコンが追加されるたびにSprite画像を最適化しています。2～3個の画像をひとまとめにしただけでは効果は小さいかもしれませんが、確実に効果があります。ひとまとめにする画像が多いほどその効果もより向上します。できるところから少しずつでも実装していければよいと思うので、これを機会にぜひ取り入れてみてください。