CSSスプライトの基本：スプライトシートの仕組み

CSSスプライトとは？

CSSスプライトは、複数の小さな画像をスプライトシートと呼ばれる1枚の大きな画像に結合するWebパフォーマンス技術です。各画像を個別のHTTPリクエストで読み込む代わりに、ブラウザは1枚の画像をダウンロードし、CSSのbackground-positionを使用して各要素に関連する部分のみを表示します。

スプライトの仕組み

コアメカニズムは3つのCSSプロパティに依存しています：

.icon {
  background-image: url('sprite-sheet.png');
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
}

.icon-home {
  background-position: 0px 0px;
}

.icon-search {
  background-position: -32px 0px;
}

.icon-settings {
  background-position: -64px 0px;
}

各要素はビューポートウィンドウとして機能する固定のwidthとheightを持ちます。background-positionはスプライトシートをシフトし、そのウィンドウを通して目的のアイコンのみが見えるようにします。負の値は画像を左と上に移動させます。

スプライトがパフォーマンスを改善する理由

すべてのHTTPリクエストにはオーバーヘッドがあります — DNSルックアップ、TCPハンドシェイク、TLSネゴシエーション、サーバー処理時間。Keep-alive接続でも、ブラウザにはドメインあたりの同時接続数の制限があります（HTTP/1.1では通常6）。50個の小さなアイコンがあると、ブラウザはリクエストをキューに入れて待つ必要があります。

スプライトシートを使用すると：

• 50の代わりに1リクエスト
• 総データ量が少ない — 単一のPNGは50の個別ファイルよりも効率的に圧縮される（共有カラーパレット、改善されたdeflate圧縮）
• リクエストキューイングなし — 1回のダウンロード後すぐに画像が利用可能
• 予測可能なキャッシング — 50の代わりに1つのキャッシュエントリ

スプライトシートの構造

典型的なスプライトシートは画像をグリッドに配置します：

┌──────┬──────┬──────┬──────┐
│ icon │ icon │ icon │ icon │
│  1   │  2   │  3   │  4   │
├──────┼──────┼──────┼──────┤
│ icon │ icon │ icon │ icon │
│  5   │  6   │  7   │  8   │
└──────┴──────┴──────┴──────┘

各セルは均一なサイズです。セル間のオプションのパディングは、分数ズームレベルやサブピクセルレンダリングでのピクセルブリードを防ぎます。

スプライトを使用すべき場合

CSSスプライトが最も効果的な場合：

• 多数の小さな画像がある（アイコン、UI要素、ボタン）
• 画像が複数のページで使用される
• 画像が頻繁に変更されない
• 接続がHTTP/1.1（リクエストの多重化が制限される）
• メールHTMLクライアントをサポートする必要がある