Data URIスキームとは

Data URIスキームとは

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

画像ファイルを例にする
 

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

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

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

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

Data URIスキームの書式

data:を接頭辞にする。

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

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

– HTML –

– CSS –

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

– HTML –

Follow me!

Data URIスキームとは” に対して1件のコメントがあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください