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



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

渡辺麻友、AKB演技バトル1位に喜び爆発「心臓止まった!うそ!?うれしい!!」
[02:00 9/29] エンタメ
声優・山崎エリイ、ソロデビュー曲「全部キミのせいだ」のMVを公開
[01:06 9/29] ホビー
『バンドやろうぜ!』、10/11配信開始予定! ゲーム紹介PVを公開
[00:27 9/29] ホビー
[ロロッロ]「みつどもえ」作者の新作 チャンピオンで連載開始
[00:00 9/29] ホビー
[あつまれ!ふしぎ研究部]「侵略!イカ娘」作者の新作 チャンピオンで連載開始
[00:00 9/29] ホビー

求人情報