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

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

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

人気記事

一覧

イチオシ記事

新着記事

KDDI、VoLTE対応の「かんたんケータイ」30日発売 - 32,400円
[21:32 7/28] スマホとデジタル家電
岡田准一、丸眼鏡かけ船上で凛とした表情! 『海賊とよばれた男』初映像公開
[21:30 7/28] エンタメ
楽天、世界のビジネスを要約するgetAbstractへ出資
[21:13 7/28] 企業IT
[松田翔太]オダギリジョーと蒼井優の“人見知り”にボヤキ 「全然しゃべってくれない…」
[20:56 7/28] エンタメ
日本HP、バッテリ駆動で最大500枚まで印刷できるA4インクジェット複合機
[20:54 7/28] パソコン

求人情報