Data URIスキームとは

Data URIスキームとは、テキストや画像などのリソースをURIで表すことができる仕組みです。

まずはソースコードの記述がどのように変わるのか、そしてブラウザの表示結果がどのようになるかみてみましょう。

たとえば、HTMLで以下のようなimg要素があったとします。

 <img src="sample.gif" alt="logo">

Data URIスキームを使用すると以下のように記述することができます。

 <img src="data:image/gif;base64,R0lGODlhfQFUAKIGAP///8zMzJmZmWZmZjMzMwAAAP///wAAACH5BAEAAAYALAAAAAB9AVQAAAP/CLrc/jDKSau9OOvNu/（略）">

ソースコードがかなり長くなりました。これは画像データ（sample.gif）を64種類の英数字で表されたテキストデータ（base64）に変換して記述しているからです。

ソースコードは変わりますが、デモをみて分かるようにブラウザではどちらも同じ画像を表示することができます。

リソースをテキスト形式など復元可能な別のデータ形式に変換することを「エンコード」といい、それを元のリソースに復元することを「デコード」といいます。Data URIスキームでは、Data URIスキームに対応したブラウザがエンコードされたデータをデコードします。

Data URIスキームは、URIにエンコードされたデータを指定できるのです。

Data URIスキームはHTMLだけでなく、CSS、JavaScriptでも使うことができます。

 background : url(data:image/gif;base64,R0lGODlhfQFUAKIGAP///8zMzJmZmWZmZjMzMwAAAP///wAAACH5BAEAAAYALAAAAAB9AVQAAAP/CLrc/jDKSau9OOvNu/（略）);

Data URIスキームの使用例

既存のウェブサイトでも、Data URIスキームを利用したリソースの埋め込みは使われています。たとえばGoogle検索ではサイトのサムネールが表示される仕組みになっています。このサムネール画像はすべてData URIスキームを利用して埋め込まれています。

Data URIスキームと通常の画像ファイル名指定の違い

2つのソースコードの書き方は、どんな違いを生み出すでしょう。

ファイル名を指定する方法src="/path/to/hoge.gif"は、httpプロトコルでサーバーにリクエストをして、画像リソースを取得します。

一方、Data URIスキームの場合は、URIに直接埋め込まれたソースコードを、httpプロトコルを経由せずに、ブラウザが直接解釈します。

誤解を恐れずにあえてシンプルにいってしまうと、リソースを「リンク」するか、「埋め込む」かの違いがあります*。

Data URIスキームのメリット

Data URIスキームにはどんなメリットがあるか、考えてみましょう。

さきほどData URIスキームは、リソースを「埋め込む」といいました。これはブラウザがテキストや画像を取得するのに、いちいちサーバーにリクエストを送って返事が返ってくるのを待つ必要がないということです。Data URIスキームをうまく使えば、ページの表示速度が速くなる可能性があります。

デスクトップ環境ではそこまでシビアに考える必要のなかったページ表示速度も、スマートフォン環境では回線がデスクトップ環境に比べて貧弱ですから、かなりシビアに考えねばなりません。

加えて、スマートフォンユーザーはアプリのようなさくさくした動きになれていることが多いです。もっさりとだんだん画像が読み込まれて見えてくるようなページはストレスになり、いいユーザー体験を与えるとはいえないでしょう。

Data URIスキームがページ表示を速くできるワケ

なぜData URIスキームを使うとページ表示が速くなるのか解説します。

まずは初回アクセス時にページが読み込まれて表示されるまで、ブラウザとサーバー間でどんなことが起こっているのか、おさらいしてみましょう。通常、以下のようなプロセスをたどります。

1. DNSに問い合わせをする
2. Webサーバーに接続する
3. データのリクエストをする
4. サーバーからの返事を待つ
5. 返事が返ってきたらダウンロードする

HTMLファイル、CSSファイル、JavaScriptファイル、さらにそこに指定されている画像などのデータひとつひとつについて、ブラウザとサーバー間で上記のようなやり取りが発生します。

サーバーが正常に稼動していて、ある程度の処理速度があるとすると、ページ表示速度を左右するのは主に3～5のプロセスにかかる時間です*。

Data URIスキームが節約してくれるのはサーバーへのリクエストの数です。データはソースコードに埋め込まれていますから、サーバーにファイルを取ってくるリクエストを出す必要がありません。リクエストの数が減ると、サーバーからの返答待ち時間が減ります。これがページの表示速度が速くなる理由です。

Data URIスキームの間違った使い方

通常、画像ファイルなどをテキストデータにエンコードして埋め込むと、ソースコードが長くなることからも分かるようにファイル容量自体は大きくなります。たとえば先ほどのデモファイル（Pixel Gridのロゴ）は以下のようにHTMLファイルのバイト数が増えます。

ですからなんでもかんでもリソースを変換して埋め込んでしまうと、当然ですが、ファイルそのものが重くなります。リクエスト／待機の時間は短縮できますが、一方で画像を埋め込んだファイルのダウンロード時間が増えてしまいます。これではDate URIスキームを使用するメリットを生かせません。

もう1つは、頻繁に差し替えをするリソースをData URIスキームで埋め込んでしまうことです。

リソースをエンコードして埋め込まなければなりませんので、通常のリンクと比較すると、ファイルの差し替えに手間がかかります。

URLでリソースの場所が書かれている場合には、リソースファイルそのものをアップロードし直すか、あるいは、そのパスやファイル名を書き換えるだけでOKです。ところがData URIスキームの場合は、画像のエンコードからやり直す必要があります。

メンテナンスのコストにも十分配慮しましょう。

Data URIスキームの使いどころ

使いどころとしてはアイコン画像、ボタン画像やスクロールバー画像のような比較的容量が小さく、かつ、多用されるようなファイルをエンコードするといいでしょう。

これらのファイルはリンクすると容量は小さくとも、サーバーへのリクエストの数を増やします。ファイルの容量に関わらずサーバーへリクエストして、その返答を待つという時間は変わりませんから、ファイル容量が小さいわりにページ表示完了までが遅くなってしまいます。

そこでこれらの小さな画像をData URIスキームを使って埋め込んでいくと、ページ表示が速くなる可能性が高いのです。

Data URIスキームの実装例

以下の例は、小さなアイコンをページにたくさん配置した例です。ひとつひとつは48px四方のアイコンなので、画像そのものはそれほど大きくありません。

以下は2つのデモHTMLファイルに初回アクセスしたときのネットワークの状態を見ています。

ネットワーク状況を見るためには、Chromeの表示メニューから管理/開発→デベロッパーツールを選びます。表示されたデベロッパーツールの「Network」を選んだ状態でページにアクセスすると、ファイルが表示されるまでのWebサーバーとのやり取りや、その所要時間がわかります。

画像をリンクした場合、HTMLファイルは986ミリ秒と短時間で済みますが、HTMLファイルをダウンロードしてから、個々のリンク画像のリクエストとダウンロードが始まります。ページ全体の表示が完了するまでに2.83秒かかりました。

一方、画像を埋め込んだ場合はHTMLファイル読み込みに1.75秒かかります。HTMLファイルの読み込みだけを考えれば画像をリンクしたときよりも時間がかかっていますが、HTMLファイルを読み込みが完了するまでに画像もすべて表示が終わっています。つまりページ全体の表示完了まで1.75秒しかかかりません。

両者を比べると画像を埋め込んだ方が1秒以上表示が速いことがわかります。

次回はどのように実装するのか、その方法を紹介します。