今更だけどdata URI Schemeって何？

よく見かけるURI Scheme

Webサーバとデータの送受信のために使用する通信プロトコル「http」、 FTPサーバとデータの送受信のために使用する通信プロトコル「FTP」やブラウザ上からクライアントマシンのメールクライアントソフトを起動させる時に使用される「mailto」など、なんとなく「あ〜これ見たことある」とものがありましたね。

IANAで登録されている公式のURI Schemeは以下に掲載されてますので、時間があるときにパッと目を通しておくと良いと思います。

IANA | URI Schemes

本題のdata URI Scheme（データ ユーアールアイ スキーム）とは？

data URI SchemeとはHTMLやCSSなどに直接埋め込まれたデータにアクセスするためのURI Schemeで、以下の様なフォーマットで記述されます。

画像などを「Base64」に変換し、HTMLやCSSに直接埋め込むため、画像取得などのHTTPリクエストを減らして高速にWebページを表示することができます。

このdata URI Schemeですが、対応ブラウザが少なかったり、読み込めるサイズにばらつきがあるなどの理由からあまり注目されておりませんでした。
現在では、ブロードバンド環境やサーバ自体が高速化されていますので、あまり意識せずともWebページを高速に表示することが可能となっておりますが、スマートフォンが多く普及してきておりますので、モバイルの通信環境でも高速に表示できるようにスマートフォン向けサイトにdata URI Schemeを使用してみるのも良いかもしれません。

またHTTPリクエスト数を減らすテクニックとして画像をまとめて1枚で保存し、CSSのpositionを利用して画像を表示させるCSS Sprite（シーエスエス スプライト）というものがあります。 このCSS Spriteだと「背景画像のリピートで使用できない」「画像の幅を変更した際にCSSも変更しなければならない」などのデメリットがありますが、data URI Schemeでは変換ツールを使って簡単に配置することが可能です。

data URI Schemeの大まかな特徴

data URI Schemeの特徴として使用した場合のメリット・デメリット、こんな場合に便利というものを書いていきます。

で、実際に使うのってどうなの？

上記でメリット・デメリットを記載しましたが、パッと見た感じ「data URI Schemeってあんまりいい所なくね？」と思った方もいるでしょう。
特に実用的な企業サイトなどを作る場合には、ブラウザの制限だったり色々ありますので、あまり実用的ではないかなと思います。

以前、Webサイトのすべての画像をdata URI Schemeで作ったらどうなるか？というのを試したことがありますが、HTTPレスポンス数は激減したのに、肝心のWebサイト表示がメチャクチャ遅くなりました。
data URI SchemeでHTMLに埋め込むということは単純にHTMLのファイルサイズが大きくなるので、すべてのHTML（埋め込んだ画像を含む）がダウンロードされるまでは一瞬画面が真っ白になるんですよね。これは体感的に使えないレベルでした…（ベンチマークとったのですが、無くしちゃった／(^o^)＼）

ぶっちゃけるとHTTPレスポンスを減らすのであればCSS Spriteをうまく使ってあげた方が色々な面で楽だなと感じました。
全部をdata URI Schemeで置き換えるよりも適材適所でうまーく使ってあげることでWebサイトのパフォーマンスをアップすることが可能なので、メリット・デメリットを考慮した上で使用するのが良いのではないでしょうか。

おまけ

GoogleのWebサイトサムネイル表示とかに使われてるよ。