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年後は? あなたの年収をデータに基づき予報します。

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

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

人気記事

一覧

イチオシ記事

新着記事

ASRock、「SLI HBブリッジ」を単品販売 - 価格は税別2,750円前後
[20:53 8/26] パソコン
ジョニー・デップ、アンバー・ハードの寄付を尊敬
[20:37 8/26] エンタメ
ダイヤモンドより硬い「グラフェン」を使ったイヤホン、そのサウンドは?
[20:26 8/26] スマホとデジタル家電
コーヒーマシンに見守り機能? 意外な組み合わせで攻めるネスレ日本
[20:25 8/26] 経営・ビジネス
ドスパラ、「パーツ館増床記念セール」の詳細を公開 - 28日まで開催
[20:24 8/26] パソコン

求人情報