このサイトのページ内イメージにData URI schemeの使用を開始しました。
もう少し簡単に言うとHTMLで書かれたページ内のイメージをリンクして読み込む良くある方法からData URI scheme(RFC 2397)を使用してイメージをページの一部として読み込む方法です。
なぜこの様な方法を使用するか？ですが、一番はサーバー負荷低減に効果があります。
負荷の低い状態ではほぼ効果はありませんが、サーバーへのアクセスが増えてくると同時接続数が増えてきます。少しでも同時接続数が減らせればより多くの接続処理が可能です。
また、ブラウザにも依りますがページのHTMLを読み取った時点でイメージが読み取れているので表示が早くなる場合も出てきます。
Data URI schemeの書式は以下の通りです。
data:[<MIME-type>][;charset=][;base64],<data>
実際のHTML内のイメージには
<img src=”data:image/png;base64,[data]>
の様に記述します。([data]はbase64でエンコードしたpngファイルの中身が入ります)
base64のエンコード方法は、unix系OSには「base64」コマンドで、PHPでは「base64_encode」関数でエンコード出来ます。
注意点としては、この方法はIE7以下は未対応です。IE8は対応しますが32KBまでのサイズです。
Windows7は標準でIE8以降、WindowsXPは標準でIE6でアップデートでIE8です。WindowsXPは現在存在しないことになっていますがXPの存在を重視するか無視するかでこのテクニックが使用できるかどうかが決まりそうです。