画像スプライト
読み: がぞうすぷらいと
複数の小さな画像を 1 枚の画像にまとめ、CSS の background-position で表示領域を切り替える技術。HTTP リクエスト数を削減する。
画像スプライト (Image Sprite) は、アイコンやボタンなど複数の小さな画像を 1 枚の大きな画像にまとめ、CSS の background-position プロパティで表示する領域を指定する技術である。HTTP/1.1 時代にはリクエスト数の削減がパフォーマンスに大きく寄与したため広く使われた。
例えば 20 個のアイコンを個別にリクエストすると 20 回の HTTP 通信が発生するが、スプライトにまとめれば 1 回で済む。各アイコンの表示は background-position: -32px -64px; のように座標で指定する。ピクセル単位の正確な座標管理が必要であり、スプライトシート生成ツールが座標マップを自動出力する。
HTTP/2 以降はマルチプレキシングにより同時リクエストのオーバーヘッドが大幅に減少したため、スプライトの必要性は低下している。現在ではアイコンには SVG やアイコンフォントが主流だが、ゲーム開発のアニメーションスプライトシートなど特定用途では依然として活用されている。