ホームページやブログで外部ファイルなしで画像を埋め込むテクニックとして、データURIスキームというものがあります。
使い方
使い方は次のようにします。
HTMLへの埋め込み
<img src="data:{mediatype};base64,{画像データ}">普通の<img>タグを作成して、src属性にファイルへのURLではなく、直接画像データを指定します。
CSSへの埋め込み
background-image: url("data:{mediatype};base64,{画像データ}");urlにファイルへのURLではなく、画像データを指定します。
{mediatype}
{mediatype}の部分は画像ファイルのフォーマットに合わせたメディアタイプに書き変えます。例えば、jpegファイルの場合は「image/jpg」、pngファイルの場合は「image/png」になります。
{画像データ}
画像データはBase64でエンコードして、英数字で指定します。Base64へのエンコードはいろいろなツールでできますので、それらを使ってエンコードしてください。（参考: Base64エンコーダー）
サンプル
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAkCAYAAAB/up84AAAAqklEQVRo3u3ayw6AIAxEUTH+/y/jWmJiRCyPnLtzoSVOOhMKKeecNwzD7hcQBASZh6PFR1JKl+c/Y6ms9UTLtUTU1iEsCwRZPUPeemnPfPryfo/aOoRlgSCrZ0jphX9mSs9RW4/aOoRlgSCrZ8jIjDRXM8tiWSCIDJEZtRlhlsWyQBAZYp8RmU86hGWBIDNZcs3d3si7Ua3PWiLXYpbFskAQGQIdQhAQBLecXDxIQPxN4GgAAAAASUVORK5CYII=">
<style>
#background {
width: 400px;
height: 400px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAA0ElEQVRYw2Ps3H7zPwMSyDN4yDDpgjzR9PN5FQySSR1wmlT96IAJXYAUw/IMHqI45vm8CpL1E3TQaAihAcbO7Tf/41NACFTmTWdon5QJp0kF6A5k/P58139Crqano5gGk2NGQ2g0hEZDaDSERkMIVwjBKsXn8yrgFhBLo4uRqh/D/oLQwP+d22/+R6a/P99FEo2OSdWPbD/DYHJMQWjg/0EXQqPtodFyaDSERkNoNIRGQ2hYhBBMEFkBsXRl3nQGyaQOOE2qfnSx0fGhITc+BAAjh1kMBI0/hgAAAABJRU5ErkJggg==");
}
</style>
<div id="background"></div>サンプルファイルへのリンクはこちら。
メリット、デメリット
このデータURIスキームを使うと、基本的にどんな画像でも対応できますし、どんな場面でも利用できます。例えば、画像アップロードに対応していないCMSやブログなどで使ったりすると便利な場面もあります。
個人的に思うメリットは次の2点です。
- HTMLファイルに埋め込むと、管理する画像ファイルが減って、メンテナンスが便利。
- HTTPリクエストを削減できる。
ただし、次のような注意点があります。
- Base64でエンコードするとサイズが約1.3倍に膨らむ。
- 画像データ毎のキャッシュは効かないので、気を付けて使わないとトラフィックが増加する。
- ブラウザによってはデータサイズに上限があって、大きな画像は扱えない。
使える場面としては、比較的小さなデータの画像ファイルがメインかなと思います。CSSへの埋め込みで背景パターンに使うのも結構便利だったりします。
何かと便利なテクニックなので活用してみてください。
