実践
表示速度改善 Data URIスキーム
第1回 仕組みとメリット

ページの表示速度を改善するData URIスキームとはなんでしょう。今回はその仕組みと、メリットやデメリット、使いどころを紹介します。

2012年06月14日発行
2012年の記事ですが、この技術は2016年現在でも使えます。

目次

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/(略)">
画像をData URIスキームで埋め込む
画像をData URIで埋め込んだもの。画像をリンクした場合と表示は変わらない。

ソースコードがかなり長くなりました。これは画像データ(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/(略));
CSSの背景画像

Data URIスキームの使用例

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

Google検索におけるサイトサムネール
Google検索結果のサイトサムネール画像は、Data URIスキームを使って埋め込まれている。デベロッパーツールなどで該当のサムネールのリソースを表示させると、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のプロセスにかかる時間です*。

*注:2回目からのアクセス

一度訪問したサイトではほとんどの場合、表示時間を短縮するためにHTMLファイル以外はキャッシュ(一度ダウンロードしたファイルをローカルに保存しておく)されます。

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

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

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

画像リンクData URI
バイト数(空白・改行を除く)1303071

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

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

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

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

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

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

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

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

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

Data URIスキームの実装例

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

48px四方のアイコン画像をリンク
48px四方のアイコン画像を埋め込み

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

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

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

画像をリンクした場合

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

画像を埋め込んだ場合

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

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

外村 奈津子
外村 奈津子
エディター

情報出版社に在籍中、Mac雑誌、中高年向けフリーペーパー、コラムサイト運営、健康食雑誌、グラフィック・Web技術書籍編集、IT系ニュースサイトの編集記者を経験。その後フリーランスのエディター/ライターとして独立。2011年4月より株式会社ピクセルグリッドへ入社。ピクセルグリッドが提供するフロントエンド技術情報を提供するサービス「CodeGrid」の編集を担当している。