2010年11月22日月曜日

Googleインスタントプレビューで使われているdata URLスキームを使った画像の表示

先日からGoogleインスタントプレビューに関連する記事を書いていましたが、今日は表示されている画像についてです。ブラウザでプレビュー画像が表示された後で画像のURLを取得してみます。



普通は表示されている画像ファイルのURLが取得できるのですが、プレビュー画像の場合は次のような値が取得できました。



非常に長い値が設定されています。先頭の部分だけ取り出すと次のような感じです。

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCg...

これはつまりimgタグに対してこんな感じで記述されているということです。

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA..." />

あまり見かけない形式なのですがGoogleが特殊な方法を使っているわけではありません。これはdata URLスキームと呼ばれているものです。data URLスキームに関して日本語で翻訳されたRFCが下記にありますので参照してみて下さい。

http://www.akanko.net/marimo/data/rfc/rfc2397-jp.txt

先ほどの長々とした値は簡単に書くと画像ファイルをのバイナリデータをBase64でテキストデータに変換したものです。そして画像ファイルのURLを記述するかわりに変換されたテキストデータを記述しています。

この形式のメリットは2つあります。1つ目は画像を別ファイルとして設置し読み込んでいるのではなくテキストのデータとしてHTMLページ内に直接記述されているため、画像ファイルを別途リクエストする必要がないという点が1つ。そして一時的にしか利用しない画像に対して画像ファイルを作る必要がないという点がもう1つです。逆にデメリットとしてはバイナリからテキストにすることでサイズそのものは大きくなってしまうというところです。

Googleインスタントプレビューでこの形式を使っているのは、リクエスト回数を減らして高速に表示させるためと、無限ともいえるページ毎のプレビュー画像ファイルを作成するのが嫌だったからかと思います。

では実際に試してみます。画像ファイルを変換するには色々なサイトやソフトがあるようなので検索してみて下さい。今回は下記のサイトを使いました。

http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

画像ファイルを変換したテキストデータをdata URLスキームの形式でimgタグのsrc属性に記述してみます。

data URLスキームサンプル

このようにBloggerでも無事画像として表示されました。

多くのブラウザで対応している形式なので、なにか同じようなメリットがある場合にはdata URLスキームを使ってみてはいかがでしょうか。