data URIとはdata:で始まるURIで、データを文字列として埋め込むことができる形式です。
data URIの書式
data:[MIME][;charset=文字セット][;base64],[データ]
Linuxではcoreutilsにbase64エンコーダが付属しているので、下記コマンドでファイルのbase64エンコードが可能です。
$ base64 img.jpg > img_base64.txt
<img src="data:image/jpeg;base64, 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 gg==" alt="base64で埋め込んだ画像">
実際に表示してみます。
data URIはCSSにも使用可能です。
background: url("data:image/jpeg;base64,iVBORw0KGgoAAAAN.....") left top no-repeat;
data URIのメリットとしては、HTTPリクエスト数を減らすこととデータをテキスト化することでjsなどで容易に扱うことが可能になります。
反対にデメリットとして挙げられるのは、管理コストが増す、キャッシュができない、古いブラウザは対応していない、データ量が制限されているなどです。
- 関連記事
-
-
Webの基礎知識 - HTML5 Professional Level1 2014/10/02
-
HTML5 from関連 2014/10/01
-
data URI 2014/09/29
-
HTML5 カスタムデータ属性 2014/09/29
-
HTML5 Microdata,RDFによるセマンティックWeb 2014/09/28
-