CSS Spritesのすべて - 技術解説、採用事例、ツールリンク | エンタープライズ

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

エンタープライズ

急上昇ワード

[

]

CSS Spritesのすべて - 技術解説、採用事例、ツールリンク

後藤大地　 [2009/05/01]

印刷

Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY.

Webページ高速化テクニックのひとつにCSS Spritesがある。これはWebページで使われる画像を1枚のマスター画像にまとめて使おうというもの。画像の表示にはCSSの機能が使われる。すでに多くのサイトで採用されており、先日、Yahoo!ニュースでも同テクニックが採用された旨がブログで報告された。簡単で効果的な方法だ。

アイコンから写真データまでWebページには複数の画像が使われていることが多い。画像ごとにHTTPリクエストが発生するため、画像が増えればそれだけHTTPリクエストが発生することになる。同時読み込みには制限があるため、画像が増えるごとに表示が遅くなるという状況になる。この問題を解決するテクニックのひとつがCSS Spriteだ。

CSS Spritesに興味があるWebデベロッパは、Smashing Editoria氏がSmashing Magazineに掲載したThe Mystery Of CSS Sprites: Techniques, Tools And Tutorialsに注目しておきたい。CSS Spritesが登場することになった背景や、CSS Sprites関連の解説サイトへのリンク、ツールサイトへのリンクなどがまとまっている。また実際にCSS Spritesを採用しているサイトとそのマスター画像も紹介されている。紹介されているサイトは次のとおり。

1枚にまとめられたマスター画像の例: The Mystery Of CSS Sprites: Techniques, Tools And Tutorialsより抜粋

CSS Spritesを実現するために複数の画像を単一の画像にまとめるツールや、単一の画像からCSSで特定の画像を切り出すための指定方法を簡単に提供するWebアプリケーションなども登場している。画像の最適化処理と組み合わせることでさらに効果的なオプティマイズが可能だ。The Mystery Of CSS Sprites: Techniques, Tools And Tutorialsにそういったサイトへのリンクがまとまっているほか、Yahoo!ニュース高速化の方法にも関連サイトへのリンクがまとまっている。