Data URIスキームとは

points and lines.jp owner

6年前

1 Data URIスキームの具体的な記述方法

Data URIスキームとは

HTMLやCSSにデータをリンクではなく直接埋め込むための方法である。
Data URIスキームはデータをBase64でエンコードする。

画像ファイルを例にする
　

画像リンクを指定する場合: webサーバへのHTTPリクエストをリンク指定した画像ファイルの数だけ行う。
Data URIスキームを使って画像をファイルへ埋め込んだ場合: リクエストの回数を減らすことができリンク指定よりも
ページ表示の高速化を期待することが出来る。

ただし、
リクエストの回数を減らすことが出来ても、データを埋め込んだ分だけファイルの容量が増えるので
必ずしも表示速度を上げられるとは限らない。

最適化出来るかはその時のページの作りや状況によって異なる。

Data URIスキームの具体的な記述方法

Data URIスキームの書式

data:を接頭辞にする。

data:[メディアタイプ];base64,データ

CSSの擬似要素内で使用する例

– HTML –

<div>
<ul>
  <li class="pointOne">左のアイコン画像はリンク</li>
  <li class="pointTwo">左のアイコン画像はdata URIスキームで埋め込み</li>
</ul>
</div>

– CSS –

/*リンクを指定*/
.pointOne::before{
  content: url(image/icon.png);
  padding-right: 10px;
}

/*data URI スキームで埋め込み*/
.pointTwo::before{
  padding-right: 10px;
  content:url(data:image/png;base64,iVBORw0KGgo(※長いので略)=);
}

HTML内、imgタグで使用する場合

– HTML –

<div>
<img src="data:image/png;base64,iVBORw0KGgo(略)=">
</div>

Follow me!