【入門編】CSSスプライト画像によるHTTPリクエスト数削減の最適化 – HTTPプロトコル・通信規格実践ガイド

Webサイトを見ているとき、ふと疑問に思ったことはありませんか？「なんで画像はバラバラのファイルなのに、パッと一気に表示されるんだろう」って。

実は、Webブラウザとサーバーの間では、私たちの知らないところでとてつもない数の「お願い（リクエスト）」が飛び交っています。今回は、HTTP/1.1という少し懐かしくも現役な通信ルールの世界で、エンジニアたちが頭を悩ませてきた「画像読み込みの効率化」について、郵便配達を例にお話ししましょう。

—

Webブラウザが画像を表示する仕組みは、「手紙のやり取り」にそっくりです。

1. ブラウザ（あなた）：「この画像のデータ、送って！」とサーバーに手紙（リクエスト）を出す。
2. サーバー（郵便局）：「はいよ」と画像という荷物を梱包して送り返す。

これが画像1枚ならいいのですが、Webサイトにはアイコンやボタンなど、何十枚もの画像が散らばっていますよね。すると、ブラウザは律儀に「これも送って！」「次も送って！」「あ、これも！」と、何十回も往復の手紙を出すことになります。

これ、実はかなり効率が悪いんです。毎回「封筒の宛先を書く」「郵便局の窓口に並ぶ」「中身を確認する」という手間（オーバーヘッド）が発生するからです。

HTTP/1.1の世界では、この「何度も手紙を出す」ことが大きな足かせになっていました。そこで先人たちが編み出したのが「CSSスプライト」という手法です。

簡単に言うと、「バラバラの荷物を1つの大きなダンボールにまとめて届けてもらう」という作戦です。

これだけで、ネットワーク上の通信効率は劇的に改善されます。

—

理屈はわかっても、1枚になった画像をどうやって切り分けて表示するのか不思議ですよね。ここで登場するのがCSSの `background-position` です。

「大きな窓枠から、必要な部分だけを覗き込む」ようなイメージです。

例えば、100px四方のアイコンが横に3つ並んだ「sprite.png」という画像があるとします。

.icon {
/ 1枚の大きな画像を背景に設定します /
background-image: url(‘sprite.png’);
/ アイコンを表示する枠の大きさを指定 /
width: 100px;
height: 100px;
}

.icon-home {
/ 0px地点からスタート（一番左のアイコン） /
background-position: 0px 0px;
}

.icon-mail {
/ 左に100pxずらして、2番目のアイコンを表示 /
background-position: -100px 0px;
}

.icon-setting {
/ さらに100pxずらして、3番目のアイコンを表示 /
background-position: -200px 0px;
}

このように、マイナスの値を指定して「背景画像を左にずらす」ことで、見せたい一部分だけを窓から覗かせる仕組みです。

—

ここまで読んで「HTTP/2やHTTP/3がある今はもう不要なのでは？」と思った方、素晴らしい視点です！

確かに、最新のHTTP通信規格では、一度の接続で複数のデータを並行して送れるようになったため、昔ほど「リクエスト数を減らす」ことへの執着は薄れました。しかし、「リクエスト回数を減らす」という最適化の思想は、インフラエンジニアの基礎体力として非常に重要です。

今でも、低速なモバイル回線や、極限までパフォーマンスを追求する環境では、この「まとめて送る」という考え方が最大の武器になることがあります。

—

CSSスプライトは単なる「画像圧縮のテクニック」ではありません。「ネットワークの往復回数を減らすことで、全体のレスポンスを速くする」という、インフラ設計の基本理念が詰まったものなのです。

最初は難しく感じるかもしれませんが、まずは「リクエストは手紙のやり取りなんだな」とイメージしてみてください。それだけで、ブラウザが裏で何をしているのか、少しずつ見えてくるはずです。

次回の記事では、ブラウザが賢く「一度届いた手紙（画像）を覚えておく」仕組み、キャッシュについて深掘りしていきましょう。エンジニアとしての視点が、また一つ鋭くなるはずですよ！