SOFTELメモ

</> 技術者募集

インラインで画像をHTMLに埋め込むData URLスキーム

まずはこの画像見えますか? → 

見えなかったら、IE6かIE7あたりをご利用でしょうか。

HTMLには次のように書いています。(見づらくてすみません。)

<img src="data:image/png;base64,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" />

何ですかそれ?

dataというURLスキームです。

dataというURLスキームはRFC2397日本語訳)にちゃんと仕様が定義されています。

URLスキームですから、data:~はhttp:~の親戚みたいなものですね。

<img src=”http://~~~~” /> と書くように <img src=”data:~~~~” /> と書ける と。

何かいいことあるの?

<img src=”http://~~~~” /> と書くと、httpで通信してWebサーバーにコンテンツを取得しに行くことになります。

<img src=”data:~~~~” /> と書くと、通信の必要はありません。src属性に書いてあるデータをそこに展開すればよいです。

Webサーバーとネットワークにやさしく(使い方によっては)、また、クライアントサイドでできることが広がるおもしろい技術です。

もうちょっと詳しく!

形式はこういう風です。

data:[<mediatype>][;base64],<data>

img要素に渡すならmediatypeは画像(image/jpeg、image/gif、image/png など)に限られるが、用途によってはtext/plainやtext/htmlも使える。

base64はデータがbase64でエンコードされていることをあらわす。画像の場合はbase64を使えばよいが、省略することでASCIIと%xx形式の16進数エンコーディングを使うこともできる。

data部分には、phpでいうbase64_encode("データ"); したものを書く。

なかなかステキなテクニックなのですが、IEが6、7でも対応しなかったからなのか、単にbase64デコードなどが面倒だったのか、あまり利用されていません。

主要なブラウザはIEを除いて以前から対応していました。

ようやくIE8で対応したので、これからどんどん普及していくといいですね。

JavascriptやCSSでも画像が描けてしまうおもしろい技術です。

補足

・ IE7以下は対応していない。
・ IE8には容量制限があり、32KBまでしか扱えない。IE9は4GBまでいける。(参考

・Base64エンコードツール https://www.softel.co.jp/labs/tools/base64/file.html

関連するメモ

コメント(2)

geckotang 2011年6月8日 11:48

data:image/png; base64,
に半角スペースが入ると表示できないブラウザ(chrome12-9,safari5.0)があるようです。

http://jsdo.it/GeckoTang/x06z

yoshimura 2011年6月8日 12:16

ご指摘ありがとうございます。
確かに仕様書どおりでなく、「;(半角スペース)base64」と書いていました。
記事の方は半角スペースなしに修正しました。
Chromeでも画像が見えました!