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

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!ニュース高速化の方法にも関連サイトへのリンクがまとまっている。



人気記事

一覧

イチオシ記事

新着記事