IE 7 以下で data スキーム URI を利用する方法と、data スキーム URI について

2009年2月18日 水曜日

IE 7 以下で data スキーム URI を使うための仕組みを Development Reference の中の人と一緒に考えてみました。使用方法などは IE 7 以下で data スキーム URI を利用するにまとめました。(IE 8 では data スキーム URI をある程度サポートしています)

data スキーム URI とは

deta スキーム URI とは IETF により RFC2397 (RFC2397 日本語訳) で定義されている仕様で、画像などのデータを data:image/gif;base64,R0lGO...(略)...KAAA7 のように URI で表すことができる仕組みです。URI は data:[<mediatype>][;base64],<data> の形式です。

例えば、GIF ファイルを次のように URI で表すことができます。

data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7

data スキーム URI に対応している UA ならこの URI で画像を表示できます。この例ではメディアタイプが image/gif で、base64 にエンコードを採用、データは R0lGODdhMA...(略)...4dbgYKAAA7 です。

実際に Web ページで使用する場合には

• img 要素で埋め込む画像 : <img src="data:image/png;base64,iVBORw0...(略)" alt="" />
• CSS で背景にする画像 : background : url(data:image/png;base64,iVBORw0...(略));

などのように書きます。script 要素で読み込む js ファイルや link 要素で読み込む CSS ファイルなどにも使えます。

data スキーム URI を使うメリットは

• ファイルの実態がないのでゴミファイルが出ない
• HTTP リクエストの回数を減らすことができる。

data スキーム URI を使うデメリットは

• HTML のソースコードが長くなってしまう (HTML ファイルが大きくなる)
• 画像の差し替えをする時大変

あたりでしょうか。

Firefox や Safari, Opera ではサポートしています。また、IE 7 以下ではサポートしていませんが IE 8 RC ではサポートしています。ただし、IE 7 以下でも似たような仕組みはありました。

IE の mht 形式

IE では mht 形式で Web ページを保存することができます。mht 形式は画像など含めて 1 つのファイルにすることができる形式で、mht ファイルのソースコードを覗いてみると画像ファイルは base64 に変換されたデータで格納されています。

e.g.

mht ファイル内の画像保存箇所抜粋

------=_NextPart_000_0000_01C98DDA.C7D3E730
Content-Type: image/png
Content-Transfer-Encoding: base64
Content-Location: http://yomotsu.net/common/img/tmp_id.png

iVBORw0KGgoAAAANSUhEUgAAALQAAAA3CAMAAACSN5B2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
(略)
+efx70D/h/4fXf8QYACYjeHFEmbCpQAAAABJRU5ErkJggg==

IE 5 以降で既に data スキーム URI に似ている仕組みはありそうな感じです。

ただ、いろいろ試してみたのですが、mht ファイルでの base64 にエンコードされた画像参照の仕組みを HTML ファイルでつかうことはできませんでした。こんな理由もあり、別の方法で実現することにしました。IE 7 以下で data スキーム URI を利用するで公開しています。