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

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

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

人気記事

一覧

イチオシ記事

新着記事

管理職の半数以上が「同年代で活躍している人は3割以下」と回答
[06:30 9/1] シゴト
シュラスコ! サッカー! リオ五輪! ブラジルを丸ごと楽しむフェスタ開催
[06:30 9/1] 趣味
Motorola、「Moto Z Play」発表、Moto Modsに対応する普及帯モデル
[06:02 9/1] スマホとデジタル家電
コロチキのナダル、アメトーーク!で想像を絶する“ひんしゅく”エピソード
[06:00 9/1] エンタメ
秦の始皇帝、裏切り、迫害…過酷な少年時代が今明らかに
[06:00 9/1] エンタメ

求人情報