CSSスプライト活用でリクエスト数を削減してスマホでも高速通信（Retina Displayにも対応）

CSSスプライトの利用について

スマートフォンの普及に伴って、ネットへのアクセスは自宅のPCでのアクセスから出先の無線通信環境下でのアクセスへと移行している傾向が少なからずあるかと思います。

ウェブサイト等を快適に閲覧するための条件の一つに、より少ないサーバーへのリクエスト数が挙げられます。

複数の画像を集約した1枚の画像にまとめるCSSスプライトを活用することでリクエスト数を減らすことができます。 キャッシュに格納されたスプライト画像はページ遷移の際の高速通信につながりますので、 各ページで汎用的に使用されるアイコンなどをCSSスプライト化するとよいでしょう。

それらをRetina Displayのような高解像度ディスプレイに対応する方法を合わせて取り上げたいと思います。

方法

1.画像を用意する

非Retina Display用とRetina Display用の画像を2枚用意します。

• Retina Display用の2倍のサイズの画像を用意します。
• Retina Display用の画像において配置された各オブジェクト（アイコン等）のx、y座標も非Retina Display用の2倍である必要があります。
• 初めにRetina Display用の画像を作成してから1/2のサイズに複製する方法がやり易いかと思います。

2.CSSの記述

• 各クラスの背景画像として非Retina Display用の画像を指定し、それぞれの座標も指定します。
• Media Queriesを使ってRetina Display用画像を割り当てます。（17行目～）
• Retina Display用画像はソース上でサイズを非Retina Display用画像サイズに戻します。（26行目）

.music {
	background: url(sprite.png) no-repeat 0 0;
}

.check {
	background: url(sprite.png) no-repeat -100px 0;
} 

.mail {
	background: url(sprite.png) no-repeat 0 -100px;
} 

.star {
	background: url(sprite.png) no-repeat -100px -100px;
} 

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
	.music,
	.check,
	.maile,
	.star {
		/* Retina Display用画像を読み込む */
		background-image: url(sprite_2x.png);
		/* 非Retina Display用の画像サイズに変換 */
		background-size: 200px 200px; 
	}
}

このように、計画性や方針を決めたうえでCSSスプライトを利用すると、 パフォーマンスが上がるだけではなく、メンテナンス性を向上させることができます。