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自体を否定しているわけではなく、大きさの異なる画像までまとめてしまうことについて問題があると考えているようです。ですので、アイコンなど大きさが似通ったものをまとめることについては、充分に利のあるテクニックであるとコメントしています。