CSS Spriteのメリット
CSS Spriteのメリットは、なんと言ってもHTTPリクエスト数の削減です。実際にCSS Sprite化したものとしていないものを用意し、計測してみました。
CSS Spriteを使った場合、同時接続数の制限に引っかからないのでファイルサイズが大きかったとしてもWaitingがなくなり、個別に読み込んだときよりLoadイベントが早く起きています。
CSS Spriteのデメリット
パフォーマンスの向上が大いに期待できるCSS Spriteですが、手間がかかる以外にもデメリットがあります。
1. 背景画像のリピートには向かない
Sprite画像はさまざまなサイズの画像が並ぶため、基本的にはリピートに向きません。
CSS Spriteで無理に背景画像をリピートさせる必要はないので、こういった場合はインラインイメージと併用したり素直に1つの画像を利用しましょう。
2. Sprite画像の作成には手間がかかる
CSS Spriteの記述方法で説明した通り、Sprite画像を手作業で作る（作り直す）には手間がかかります。
ジェネレーターやSass/Compass（CSSをコンパイルできるメタ言語とフレームワーク）を使って自動化してしまいましょう。
3. メモリ消費に注意
これはCSS Spriteが悪い訳ではなく、10000px×10000pxのような大きすぎるSprite画像を作ってしまうと、余白や使っている色が増えファイルサイズも大きくなります。このようなSprite画像をWebサイトの至る所で使っていると、レンダリングにおいて大量のメモリを消費してしまうそうです。リクエスト数を削減できたとしてもファイルサイズが大きくなりすぎると、画像のロードに時間がかかってしまい数秒間何も表示されないということが起こります。これでは本末転倒です。Sprite画像のファイルサイズにも気を遣い、ファイルサイズが大きくなりすぎないように適度に分割しましょう。
4. CSS Spriteと画像置換のアクセシビリティについて
CSS Spriteを利用する上で画像置換は便利なテクニックですが、このようなデメリットもあります。
- 印刷時に背景画像が印刷されない
- 正しく使わなければスパムと判定される可能性がある
ブラウザ側で背景画像の印刷について設定できるのですが、ほとんどのブラウザがこの機能をオフ（デフォルト）にしています。オフの状態でサイトを印刷すると、CSS Spriteと画像置換を併用した部分が真っ白になり何も表示されません。これについては、印刷用のCSSを用意してCSS Spriteを解除し、テキストを表示させましょう。
また、画像置換はスパムに判定されるのではないかという心配もあります。スパムに判定されるかどうかの基準は、画像置換先のテキストに対し画像が正しい意味を持っているかです。論理的な文書構造を考え、文章として意味を持つ物と単なる装飾かを区別しましょう。
5. Sprite画像をインラインイメージ化して良いのか
よりパフォーマンスを上げられる方法はないかと模索している時に「Sprite画像をBase64エンコードしてインラインイメージにすれば完璧なんじゃないか！？」と思ってしまうかもしれません。ですが、HTML,CSSのファイルサイズが大きくなりすぎてしまうと、DOMContentLoadedイベントの遅延の原因になります。基本的には併用しない方が良いでしょう。
手間を省く便利ツール
けっこう面倒なCSS Spriteですが、Sass/Compassを使えばそれほど手間ではなくなります。
ここでは解説を省かせていただきますが、その他にもRuby系のパッケージにいくつかCSS Spriteを自動化できるものがあります。最終的にGruntを使って管理するのが良いでしょう。
1.Sass/Compassを使ったCSS Spriteの指定方法
Sass/Compassの使い方やCSS Spriteの指定方法は、所属している会社のブログに書いているので、こちらを参考にしてください。
- 【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編
- 【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編
- コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編
文量の関係で、Sass Compassの解説は別の機会にしたいと思います。
まとめ
CSS Spriteは、インラインイメージと比べるとデメリットも少なく効果も高いため積極的に使えるテクニックと言えます。
キャッシュも効きますしHTMLのロードにも大きな影響も与えないので、自動化して手間を省きアクセシビリティに配慮できれば、リクエスト数を大幅に削減できますね。
次回は、便利なWebアイコンフォントについて紹介いたします。
