小さな画像を多く含むHTMLを高速化する方法(Data URLスキーム)

小さい画像を多く含むHTMLの場合、1つのHTMLに30個の画像を含む場合、1つのHTMLを表示するにつき、31リクエストを送信することになる。
１つ１つの画像サイズが小さければ、一瞬で応答を返すことになるが、30回、コネクションを確立し、リクエストレスポンスを実施し、アクセスログを書いたりするのは、1回であれば、大した負荷ではないが、大量のリクエストを受けるサーバにとっては、無視できない負荷になってくる。

「DataURLスキーム」は画像のデータをHTMLに埋め込み一体化させることによって、1リクエストでHTMLと画像の情報をクライアントに受け渡すことができます。

通常であれば、以下のようにHTMLファイルとは別に用意した画像ファイルを指定します。
html:sample.html
<img src="icon.gif">

div {
background: white url('icon.gif') ;
}

「DataURLスキーム」は以下のように画像のバイナリデータをBASE64エンコーディングし、テキストデータに変換し、HTMLに埋め込みます。
<img src="data:image/png;base64,kVheJ3kiS....">
div {
background: white url('data:image/png;base64,kVheJ3kiS....') ;
}

ただし、いくつか注意点があります。
・画像データをBASE64エンコーディングするため、データ約1.333倍となります。
　よって、利用するのは、数KB以下程度の軽微な画像でなければ、却って遅くなります。
・古いIEはサポートしていない。(IE7以下はサポートしていない。IE8は32KBまで。IE9からは4GBまで。)
・HTMLに画像データを含むため、管理が煩雑化する。