2011年4月27日(水) 17時53分05秒 [仕事]

ウェブサイトの画像表示を高速化する「CSS Sprite」の解説記事

CSS（スタイルシート）を使ってウェブサイト上の画像表示を高速化させる「CSS Sprite」（CSSスプライト）という手法があります。
小さい画像をたくさん使っているウェブサイトなどでは特に有効です。

例えば、Googleのサービス一覧ページを見てから、同ページで使われているこの画像（i10.png）を見るとよく分かります。百聞は一見にしかず。

上記の「Googleのサービス一覧ページ」には、たくさんのアイコンが表示されています。実はこれらのアイコン画像は、『1枚の大きな画像』（i10.png）の上にまとめて描かれています。アイコン1つ1つは、独立した画像ファイルにはなっていません。

こうすると、

1. 複数の画像を結合した方が全体のデータサイズは減らせる
2. サーバへの画像リクエスト回数が1回で済む

というメリットがあって、画像の高速表示が期待できます。

たとえ1つ1つのファイルサイズが小さかったとしても、画像ファイルが20個も30個もあると、サーバへ送るリクエストだけで結構な時間を食ってしまうのですよね。ブラウザが並列にダウンロードできるファイル数にも制限がありますし。
なので、画像はことごとく結合して、「1枚の大きな画像」にした方が表示は速くなるのです。（写真みたいな色数の多い画像だと効果はないでしょうが、アイコンのような色数の少ない画像には有効です。）

……という話と、その実現方法の例をAll Aboutで書きました。
1ヶ月ぶりの新規記事。

■「CSS Sprite」で画像の表示速度を高速化する（＠All About ホームページ作成）

具体的な例として、このエントリの冒頭に書いた「Googleのページ」と「実体画像」へ直接リンクして読者に見せられれば分かりやすくて良かったんですけどね。さずがに（ソースを読まないと分からない）内部画像へ直接リンクを貼るのは（企業サイトに掲載する記事としては）マズいということで、画像への直接リンクは記事には書きませんでした。
まあ、その代わりにこのエントリの冒頭に書いたわけですが。(^_^;;;