WordPress（Page Speed対応） - CSS スプライトに画像をまとめる

難易度

★★★大変

概要

複数の画像を一つの画像にまとめて、ブラウザの読み込みの処理を少なくする手法です。

外部ファイルを読み込む際には、「TCP接続設定」「HTTP要求」「DNS名前解決」の3つのレスポンスが発生します。複数の画像をまとめることで、このレスポンスを1回に抑えることができ、サイト表示の高速化につながります。ブラウザは一度読み込んだ画像をキャッシュしてくれますが、キャッシュされる画像が一つにまとまることもメリットの一つです。キャッシュの描画にも少なからずブラウザの処理が行われるため、ファイルを減らすことで、処理の軽減につながります。

CSSスプライトに適している画像は下記になります。

更新頻度が少ない
ファイルサイズが小さい（※1）
様々なページで共通要素として使用されている画像（ヘッダー、サイドバー、フッターなどに使用される画像やアイコン等）
GIF/PNG画像（※2）

※1 画像は読み込みが完了してから画面に描写される為、サイズが大きい画像をCSSスプライトにまとめてしまうと、画像の読み込みと描写に時間がかかり、一緒にまとめた小さい画像の表示にも時間がかかってしまうため ※2 GIF/PNGはロスレス圧縮画像（圧縮・展開の処理を行っても、画質が劣化しない）なので、スプライト化による画質の劣化がないため

逆に、CSSスプライトに適さない画像もあります。

動的に生成されるような画像や頻繁に更新される画像
ファイルサイズの大きい画像

ここでは、最近よく読んでいるエンジニアtypeさんのサイトを例に上げたいと思います。

http://engineer.typemag.jp/category/trend

f:id:t-namikata:20160130133631p:plain サイドバーのタイトルなどをCSSスプライトで作成されてます。

作成時に考慮したい点

スプライト画像の空白を最小限にする
似たようなカラーパレットの画像をスプライトする（※3）

※3 256色以上のスプライト画像はトゥルーカラー PNG（最大 280 兆色）となります。インデクスカラー PNG (最大 256 色)で画像を作成したほうが、大きく画像の容量を抑えることができるので、最適化を図るなら256色内の画像をまとめるべきです。もし、カラーにばらつきがあるのなら、256色に減色してからスプライトするのが良いでしょう。