[試] サイト表示速度を高速化する方法 | CSS Sprite(CSSスプライト)による表示速度改善

[試] サイト表示速度を高速化する方法 | CSS Sprite(CSSスプライト)による表示速度改善

こんにちは、marubon(@marubon_jp)です。

サイト表示速度を高速化する手法の一つとして、CSS Sprite(CSSスプライト)があります。

CSS Sprite(CSSスプライト)は敷居が高いと思われがちですが、Webサービスを使用して簡単に実装する方法を紹介します。

SPONSORED LINK

アウトライン

本エントリのアウトラインです。

  1. CSS Sprite(CSSスプライト)とは
  2. CSS Sprite(CSSスプライト)を実装する方法
  3. まとめ

CSS Sprite(CSSスプライト)とは

Webサイトの表示高速化には、基本的に「データ容量の削減」、「HTTPリクエスト数の削減」、「各処理プロセスの速度向上(HTTPリクエスト~Webブラウザ上の描画)」の3つを柱として、これらをブレイクダウンした施策を実施します。

CSS Sprite(CSSスプライト)とは、「HTTPリクエスト数の削減」のためのテクニックです。

複数の画像を使用している場合、通常使用画像の数だけHTTPリクエストが発生します。画像ダウンロードにサーバとクライアント間を何度も往復するため、その分リードタイムが発生してしまいます。

CSS Sprite(CSSスプライト)は、複数の画像を一つにまとめる(結合する)ことにより、HTTPリクエスト数(サーバとクライアント間の往復)を削減します。画像データのダウンロード時間を短縮できるため、サイト表示時間の短縮がはかれます。

画像をまとめると個々の画像の参照をどうするのか不思議に思う方がいるかもしれませんが、CSSによる領域指定により切り出して使用します。

CSS Sprite(CSSスプライト)を実装する方法

CSS Spriteを実装するには、主に以下の3つのステップを対応する必要があります。

  1. 必要な画像を準備し、一つの画像にまとめる(結合する)
  2. 結合した画像から個々の画像を切り出すためのCSSを作成する
  3. 画像読み込み部分をCSS Spriteを使用したコードに置き換える

この作業は、結構面倒なのですがWebサービスを使用することで画像の結合とCSSの作成は自動化できます。これには、CSS Sprite Generatorを使用します。

様々なCSS Sprite Generatorが存在しますが、私は以下のInstant Spriteをおすすめします。理由は、必要な機能がシンプルにまとめられていて使いやすいからです。

Instant Sprite – Generate CSS Sprites Instantly

それでは、Instant Spriteを使用したCSS Spriteの実装方法を見ていきます。最初にInstant Spriteの画面の概要を説明しておきます。

画像アップロード領域
画像をアップロードするための領域です。ここに画像ファイルをドラッグ&ドロップすることでInstant Spriteに結合対象の画像をアップロードできます。
Thumbnails
アップロードした画像の確認と結合順序の調整を行います。
Options
画像結合時のオフセットと方向、出力画像のフォーマットを設定します。
Sprite
結合された画像の確認とダウンロードを行います。
Usage
結合された画像と含まれている個々の画像を参照するためのCSSセレクタに関する設定を行います。
Preview
画像出力コードの出力例の確認を行います。

これを以下の作業プロセスに沿って解説していきます。

  1. 利用する画像の準備
  2. Instant Spriteへの画像アップロード
  3. 画像結合のための設定
  4. 結合された画像の確認とダウンロード
  5. 画像参照用のCSSセレクタ設定
  6. サーバへの結合された画像のアップロード
  7. CSS Sprite用CSS設定の追記
  8. HTMLへの参照コード追記

利用する画像の準備

CSS Sprite化してHTTPリクエスト数を削減したい画像を準備します。一般的にどのページでも利用する画像(アイコン等)をCSS Sprite化すると表示速度の改善効果が高くなります。

今回は、当サイトでも利用しているdate.png、folder.png、stopwatch.png、tag.pngの4つのアイコン画像のCSS Sprite化する例として取り上げます。

play-of-web-site-with-css-sprite-02

Instant Spriteへの画像アップロード

対象画像をInstance CSS Spriteにアップロードします。以下赤枠の領域に画像をまとめてドラッグ&ドロップします。

play-of-web-site-with-css-sprite-03

画像結合のための設定

アップロードが終わると以下の様な画面が表示されます。Thumnailsの領域にアップロードした画像が表示されます。ここで画像の結合時の順序を調整します。アイテムを選択しドラッグすることで、順番の変更が可能です。

play-of-web-site-with-css-sprite-04

次にOptionsの領域で下記3項目の設定を行います。

  • Offset(画像結合時のオフセット、つまり画像間のマージン)
  • Direction(画像を結合する方向)
  • File Type(画像フォーマットの種類)
play-of-web-site-with-css-sprite-05

いずれも好みですが、私は以下の様に設定しています。Offsetを2pxにしているのは、結合された画像の見た目と画像サイズのバランスを取るためです。間隔を大きくすると画像サイズと共にデータ容量が増えてしまうため、Offsetは最小限にします。

  • Offset: 2px
  • Direction: horizontal
  • File Type: png

結合された画像の確認とダウンロード

次の領域Spriteでは、これまでの設定で結合された画像のプレビュー確認とダウンロードができます。「Open image in a new window」のリンクから画像をダウンロードしておいて下さい。

play-of-web-site-with-css-sprite-06

「Open image in a new window」のリンクをクリックすると、以下の様に画像が表示されるので[右クリック]→[名前を付けて保存]で保存します。

play-of-web-site-with-css-sprite-07

画像参照用のCSSセレクタ設定

次の領域Usageでは、結合された画像を読み込み個々の画像を参照するためのCSSセレクタの設定とCSSコードの取得を行います。

play-of-web-site-with-css-sprite-08

例えば、画像名を「test-sprite」としたい場合は、以下の様に設定します。これに伴いCSSセレクタと参照している画像名が自動で変更されます。

play-of-web-site-with-css-sprite-09

サーバへの結合された画像のアップロード

先般ダウンロードした画像をFTPソフト等を用いてサーバにアップロードします。その際、画像ファイル名は、CSSセレクタの設定に合わせて修正します。上記の例では、url(‘test-sprite.png’)で参照されるので、test-sprite.pngに修正します。

CSS Sprite用CSS設定の追記

赤枠部分をコピーして、CSS設定ファイルに追記します。WordPressの場合は、style.cssになります。尚、url(‘test-sprite.png’)の部分は、画像配置場所に合わせて適宜パスを修正して下さい。

play-of-web-site-with-css-sprite-10

HTMLへの参照コード追記

赤枠の参照コードを画像を表示したい部分に追記します。ちなみに、このコードはdiv要素を使用していますが、CSSセレクタがあっていればspan等を用いても問題ありません。

play-of-web-site-with-css-sprite-11_

表示サンプル

今回解説した例で生成した結合画像(test-sprite.png)とコードを使用して、個々の画像を表示するサンプルです。

結合した画像text-sprite.png

これまでのプロセスで結合した画像です。

test-sprite

CSSコード

結合された画像の個々の画像を個別に参照するためのCSSコードです。Usageの領域からコピーした内容です。画像のパスは、アップロード先に合わせて修正しています。

画像を参照するコード

個々の画像を参照するためのコードです。Usageの領域からコピーした内容です。上記CSSセレクタを参照することで、各々の画像を表示します。

上記コードによる出力例

上記コードによる画像の出力例です。結合された画像から個々の画像を参照できています。

まとめ

サイト表示速度を高速化する方法として、画像にCSS Sprite(CSSスプライト)を適用する方法を紹介しました。

画像を一つにまとめることで、HTTPリクエスト数を削減し、画像のダウンロード時間を短縮するテクニックでした。