Data URIスキームとは

Data URIスキームとは

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

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

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

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

Data URIスキームの書式

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!