CSS Spritesを用いた表示高速化と軽量化の実施方法

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは!今回のtipは【CSS Spritesを用いた表示高速化と軽量化の実施方法】です。ページの高速化に関しましては色々な方法ありますが、もっとも手軽に始められる方法の一つだと思います。

CSS Spritesについて

CSS Spritesとは簡単に言うと複数の画像一枚にまとめ、読み込みの回数(HTTPリクエストの回数)を減らし、さらには画像自身の容量も削るという方法になります。通常の場合、画像は以下のように一枚ずつ表示しているかと思います。CSS Spritesではこれら複数の画像を一枚にまとめ、背景画像に指定した上でbackground-position(背景画像の表示位置)を使って表示を切り替えていきます。この方法はボタン等でよく見られます。では実際に上の画像を使ってCSS Spritesを実装してみましょう。


CSS Spritesによるボタンの作成

1.ますはボタンを配置しましょう。HTMLは共通です。

<a id="sprites" href=""></a>

2.次に、上で書いたHTML(aタグ)に対して背景画像を位置左上で指定します。

a#sprites{
height:100px;
width:100px;
display:block;
background-image: url(ex.png);
background-position: 0 0;
background-repeat: no-repeat;
}

3.最後にホバーした際、背景画像の位置が-100px上(X方向)に移動するよう指定します。


a#sprites:hover{
background-position: 0 -100px;
}

この例は、ホバーで背景画像の位置を入れ替えていますが。大きな一枚背景画像の位置を変更する事で複数画像を設置する事が可能です。

 
また通常27枚の画像と27のイメージタグ、そして27回のリクエストを送るような場面でも、以下のように画像をまとめて背景位置を調整し軽量化を計る事も可能です。

 
このように画像の数が多くなり、いちいち一つ一つ背景位置を指定したり計算するのが面倒な方には便利なジェネレーターもあります。
以下を使えば、複数枚画像を一つにまとめてくれる上に背景位置も計算し自動でCSSを生成してくれます。

CSS Sprites用ジェネレーター

CSS Sprite Generator
CSS Sprites Generator
spritebox

以上になります。