Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。
なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコンテンツ実装プロセスにまつわるお悩みでも結構ですので、お気軽に電子メールでstandards@mitsue.co.jp宛にお送りください。
2009年06月23日
CSS Spritesでメモリ消費量が増える！？
フロントエンド・エンジニア 矢倉
WebサイトやWebアプリケーションの高速化のため、CSS Spritesを採用するサイトが増えてきています。
CSS Spritesは、ページで使うアイコンやロゴ、背景など、画像ファイルを大きな画像の塊にまとめ、CSS側でレイアウトを制御するテクニックです。複数の画像をまとめるため、HTTPリクエスト数を減らしことができ、高速化や負荷軽減につながるという利点があります。また、:hoverや:activeなどと組み合わせることにより、動的表現をJavaScriptなしで実現できることも、CSS Spritesが好まれている理由のひとつです。
一方で、CSSの画像置換に関連する問題や、画像の作成や配置にかかる手間など、懸念事項もあります。そんな中、Mozillaの開発者であるVladimir Vukićevićが、「メモリ消費量が増えてしまう」という問題について語っています。
CSS Sprites用にページ内の画像を全て統合した画像は、余白や色数が多くなることから、ファイルサイズ、面積ともに大きくなります。このような画像がページのあらゆるところで利用されると、レンダリングにおいてメモリを大量に消費してしまう問題があるようです。
例として挙げているのは、WHIT TVというサイトの背景画像として使われる、1299×15000の大きなPNG画像です。これはCSS Spritesと呼べるものではありませんが、CSS Spritesであれば画像の位置指定もありますし、色数も増えます。場合によっては、メモリ消費量がさらに増えてしまうのかもしれません。
ただし、CSS Sprites自体を否定しているわけではなく、大きさの異なる画像までまとめてしまうことについて問題があると考えているようです。ですので、アイコンなど大きさが似通ったものをまとめることについては、充分に利のあるテクニックであるとコメントしています。
コメント
コメントする
この記事のトラックバックURL:
http://standards.mitsue.co.jp/cgi-bin/mt/mt-tb.cgi/413
