data URI

/ HTML5/CSS3/jQuery / Comment[0]

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で埋め込んだ画像">

実際に表示してみます。
base64で埋め込んだ画像

data URIはCSSにも使用可能です。

background: url("data:image/jpeg;base64,iVBORw0KGgoAAAAN.....") left top no-repeat;

data URIのメリットとしては、HTTPリクエスト数を減らすこととデータをテキスト化することでjsなどで容易に扱うことが可能になります。

反対にデメリットとして挙げられるのは、管理コストが増す、キャッシュができない、古いブラウザは対応していない、データ量が制限されているなどです。

関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可