綺麗な画像がたくさん使われているWebサイトは見ているだけでも楽しく、イメージも湧きやすくて良いですよね。ただ、画像をたくさん使用すると気になってくるのがページの表示速度です。

画像が増えた分だけHTTPリクエストも増えてしまうので、結果的に表示速度が遅くなってしまいます。どんなに素晴らしい内容のページでも表示速度が遅くてユーザーを取り逃がしてしまったら元も子もありませんよね。表示速度は早ければ早い方が良く、遅いと悪いことしかありません。

表示速度を改善する方法はたくさんありますが、まずこのHTTPリクエストをできるだけ少なくすることが必須条件のようです。

HTTPリクエストを減らすために有効な方法がCSSスプライト化です。ツールを使えばそれほど労力を掛けずに導入できますのでご紹介したいと思います。

CSSスプライトとは？

CSSスプライトとはまとめられる画像を可能な限りまとめて、CSSのbackground-positionで座標を指定して表示させる方法です。

background-image: url(spritesheet.png); //スプライト画像を背景に指定
background-position: -10px -5px; //座標の指定
height: 145px;
width: 237px;

ただし、画像ならなんでもまとめられるという訳ではなく、アイコンや背景画像など、ページの複数箇所で同じ画像が使われているものでないとあまり意味がありません。また、リピートさせて使用したい画像はスプライト化することができません。

※スプライト化の話からはそれてしまいますが、background-positionを指定する際に以下のように指定してしまうと古いFirefoxで崩れてしまう可能性があります。以前ちょっとつまずいたので記載しておきます。最新版のFirefoxでは問題ありませんが避けた方が無難です。

//このように座標を指定すると崩れる場合がある。
background-position-x: -10px;
background-position-y: -5px;

//このように記載するとベター
background-position: -10px -5px;

CSSスプライト自動作成ツール

CSSスプライト自動作成ツールは色々調べて見ましたが、Stitchesが手軽で使いやすかったのでご紹介します。使い方はとても簡単です。

①Stitchesのページへアクセス。

②メニューの「Open」からスプライト化したい画像をアップロードすると、自動的に良い感じにスプライト画像を生成してくれます。

③あとはメニューの「Downloads」からPNGの画像ファイルとCSSがダウンロードできますので、適宜クラス名などを修正して使用してください。

CSSスプライトのデメリット

ツールを使えば比較的容易に導入できるCSSスプライトですが、いくつかデメリットがありますので、最後に記載したいと思います。

CSSスプライトのデメリット

• 保守が大変！後からスプライトに追加したい画像が出て来たときに、CSSの座標が変わってしまうので書き換える必要がある。
• altタグが使えない。背景画像として指定しますので、Webアクセシビリティに重要なaltタグを指定することができません。

SEOもそうですが、表示速度の改善も何かを改善すると他の何かが犠牲になることが多々あり…全てをいっぺんに改善できるという方法はなかなかありませんね。これからも表示速度との戦いの日々が続きそうです。