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

Apr 16 2012

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

こんにちは、@poyosiです。皆さんdata URI Scheme使ってますか?
私は全然使ってません。

data URI Scheme(データ ユーアールアイ スキーム)自体はかなり昔からありますが、知っておいて損はないと思いますので、おさらいの意味も込めて書きたいと思います。

そもそもURI Scheme(ユーアールアイ スキーム)とは?

data URI Schemeのお話をする前に、そもそもURI Schemeって一体なんなの?というところを簡単にご説明したいと思います。

一般的にURI Schemeはあまり聞きなれないワードかと思いますが、実は身近なところで広く使われています。
例えば、Webサイトにアクセスするときに「http://exsample.com」というURLをブラウザに入力して表示させますよね?
このURI(URL)先頭部分に記述される「http」のような「どのような方法でデータにアクセスするのか」という手段を表したものをURI Schemeと言います。

よく見かけるURI Scheme

  • http:
  • https:
  • ftp:
  • tel:
  • mailto:
  • feed:
  • data:
  • file:
  • clsid:

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

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

IANA | URI Schemes

本題のdata URI Scheme(データ ユーアールアイ スキーム)とは?

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

data:[“MIMEタイプ”][;base64],[“エンコードデータ”]

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

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

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

HTMLタグでの使い方

<img src=”「ここにdata URI Schemeを埋め込む」” width=”” height=”” alt=”” title=”” />

通常のIMGタグを使うように配置することができます。srcの部分に画像へのパスではなくdata URI Schemeを指定することで簡単に使うことができます。

CSSでの使い方

background-image: url(「ここにdata URI Schemeを埋め込む」) ;

CSSで使用する場合も非常に簡単です。使用したい背景などのurl()に画像へのパスではなくdata URI Schemeを指定することで簡単に使うことができます。

対応ブラウザ

  • Internet Explorer 8+
  • Firefox2+
  • Safari
  • Google Chrome
  • Opera 7.2+

data URI Schemeの大まかな特徴

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

data URI Schemeのメリット

  • HTMLやCSSにインラインで埋め込めるため、リクエスト数を減らすことができる。

data URI Schemeのデメリット

  • ファイルサイズが約1.3倍大きくなる。
  • ブラウザによって使用できるファイルサイズに制限がある。
  • HTMLやCSSのソース上に直接埋め込むため、Base64の記述が長くなり視認性が悪くなる。
  • ファイルサイズが大きいものを多く埋め込むと体感的にWebページの表示が遅くなる。

こんなWebサイトに向いている

  • HTTPリクエストレスポンスが異常に遅いサーバを使用している。
  • ファイルサイズが小さい画像がたくさんある。
  • Webサイトのターゲットブラウザを指定できる。

こんなWebサイトには向いていない

  • ファイルサイズの大きい画像がたくさんある。
  • HTMLやCSSソースの編集作業が頻繁にある。
  • ある程度シェアの広いブラウザで表示させたい。

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

上記でメリット・デメリットを記載しましたが、パッと見た感じ「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サイトサムネイル表示とかに使われてるよ。

Hot Entries

  • Free Texture Download