画像のHTTPリクエストをCSSを使って軽減する"CSS Sprite Generator"

 

Ed Eliot氏およびStuart Colville氏は9月28日(ドイツ時間)、Webページにおける画像の読み込みオーバーロードを軽減するためのおもしろい取り組みをWebサービス「CSS Sprite Generator」として公開した。ページを読み込む場合、画像を要求するHTTPリクエストが発行されるわけだが、「CSS Sprite Generator」はその要求数を低減させようとするものだ。

ページが画像を多く含んでいる場合、画像を取得するためのHTTPリクエストが大量にWebブラウザから発行されやすくなる。このHTTPリクエストを軽減するために、ページで使われている画像をひとつの大きな画像にマージしてしまい、かわりにCSSの機能を使ってマージされた画像から必要な部分だけを表示しようというのがCSS Sprite Generatorでの発想だ。

CSS Sprite Generatorでは画像をマージするための機能が提供されるほか、マージした画像から対象とする画像を表示するためのCSSデータを生成する。画像はZIPファイルにまとめてアップロードすればいい。現在のところサポートされている画像形式はGIF、PNG、JPEGで合計サイズが1MB以下とされている。CSS Sprite Generatorを使うことで画像を取得するためのHTTPリクエストの数を軽減させることができるほか、重複している画像データをひとつのデータにマージすることで通信量も削減できる。

Ed Eliot氏およびStuart Colville氏の両氏は現在、2008年の早い時期に出版が予定されている書籍「Webサイトパフォーマンス」を執筆中で、今回公開されたCSS Sprite Generatorは同書籍の執筆に関連して公開されたもの。書籍をサポートするために公開されたもので、今後も同種のWebアプリケーションが公開されていくとみられる。Webアプリケーションデベロッパは書籍と同じく同サポートサイトにも注目しておきたい。

Website Performance - CSS Sprite Generator



転職ノウハウ

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

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

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

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

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

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

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

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

人気記事

一覧

イチオシ記事

新着記事

平成以降最悪の被害、障害者殺傷事件の深層に迫る『NHKスペシャル』
[09:00 7/31] エンタメ
さんま、中居へのSMAP騒動直撃は「本当にファンの気持ちで…」
[09:00 7/31] エンタメ
パンケーキや豚カツをプラス!? "進化系冷やし中華"を自宅で再現してみた!
[09:00 7/31] 趣味
「ゲームエンジン」とは - いまさら聞けないスマートフォン用語
[09:00 7/31] スマホとデジタル家電
『イッテQ!』世界初!?の映像の撮影に成功!オーシャンズ金子が奇跡の海へ
[08:00 7/31] エンタメ

求人情報