IE 7 以下で data スキーム URI を利用する方法と、data スキーム URI について
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 を利用するで公開しています。

トラックバックURI
http://www.yomotsu.net/wp/wp-trackback.php?p=503
この記事へのコメントはまだありません
コメントフォーム