Data URIスキームとは

Data URIスキームとは、ファイルの中身そのものをURIで表現する仕組みのことです。通常のURIでは外部のリソースを参照しますが、Data URIはファイルのデータそのものをURIにエンコードしています。

例えば、以下はSVG画像をData URIで表した例です。

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9ImdyZWVuIiAvPjwvc3ZnPg==

このようにURIにファイルの種類、エンコーディング方式、データが含まれています。

メリット

• 外部ファイルが不要で単一リソースにまとめられる
• HTTPリクエストが減り通信量を削減できる
• キャッシュの設定が不要
• ベース64エンコードでテキストベースなのでHTMLやCSS、JSに直接埋め込める

データURIの注意点

• URIの長さには制限があり、IEならばIE8まで32KBまで、それ以降の環境では2MB程度まで
• URIの長さ自体があまり長くなるとパフォーマンスに影響する
• CSSのData URIはIE8以前ではサポートされていない
• ファイルサイズが大きくなるとオーバーヘッドが大きくなる

そのため、主に小さなリソースをHTMLやCSSに埋め込むケースでData URIを利用します。大きなリソースについてはウェブサーバから直接配信するほうが適切です。

実際の利用例

Data URIを利用すると、SVGアイコンをCSSにベタ書きしたり、小さなアプリでページリソースを削減するのによく使われています。

.icon {
  background-image: url('data:image/svg+xml;base64,...');
}

JavaScriptでもData URIは利用できます。Canvasのイメージソースや、Ajax通信に使えます。

const img = new Image();
img.src = "data:image/png;base64,...";

// Ajax
const res = await fetch("data:text/plain;base64,...");

以上のようにData URIはウェブ制作において少しずつ利用されているスキームです。うまく活用することで、ウェブサイトのパフォーマンスを改善できる可能性があります。