データURIスキームで画像ファイルの埋め込み

ホームページやブログで外部ファイルなしで画像を埋め込むテクニックとして、データ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エンコーダー

サンプル

data URI schemeのサンプル その1

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAkCAYAAAB/up84AAAAqklEQVRo3u3ayw6AIAxEUTH+/y/jWmJiRCyPnLtzoSVOOhMKKeecNwzD7hcQBASZh6PFR1JKl+c/Y6ms9UTLtUTU1iEsCwRZPUPeemnPfPryfo/aOoRlgSCrZ0jphX9mSs9RW4/aOoRlgSCrZ8jIjDRXM8tiWSCIDJEZtRlhlsWyQBAZYp8RmU86hGWBIDNZcs3d3si7Ua3PWiLXYpbFskAQGQIdQhAQBLecXDxIQPxN4GgAAAAASUVORK5CYII=">

 data URI schemeのサンプル その2

<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への埋め込みで背景パターンに使うのも結構便利だったりします。

何かと便利なテクニックなので活用してみてください。

CSS3のFlexible Box(flexbox)を使ってみる その3

前回前々回と続けてきたflexboxですが、最後にflexboxを使ってグリッドレイアウトをするサンプルを作ってみました。

flexbox-grid-sample
https://github.com/rlated/flexbox-grid-sample

使い方

使い方は次のような感じです。

<div class="container">
  <div class="row">
    <div class="col-4"></div>
    <div class="col-8"></div>
  </div>
  <div class="row">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
  </div>
</div>

まず、グリッドレイアウトしたい部分全体をclass="container"で囲みます。

続いて、レイアウト内容に合わせて、1行ごとにclass="row"を入れます。幅は(よくあるパターンだと思いますが)12等分した内のいくつ分かをclass="col-N"で指定していきます。col-4とすると1/3、col-8とすると2/3の幅。

各コンテンツ間にスペース(余白)を入れたい場合はpadを追加するようにしてみました。

<div class="container pad">
  <!-- 省略 -->
</div>

flexbox-grid-sampleのサンプル その1

レスポンシブ対応として、描画領域の幅が768px未満の場合は全てを1カラムで表示するようにしています。1カラム表示の境界を変更したい場合はcssの下記部分を修正(もしくは削除)してください。

@media screen and (max-width: 767px){ ... }

サンプル

こちらが実際に使ってみたサンプルです。(リンク

demo - flexbox grid sample
demo – flexbox grid sample

padを付けているので、20pxの余白があります。

サンプル2(3カラムレイアウト)

ブログ等でよく使われる3カラムレイアウトのサンプルです。(リンク

3カラム表示

demo (3 column layout) - flexbox grid sample
demo (3 column layout) – flexbox grid sample

1カラム表示(絵画領域の幅が768px未満の場合)

demo (3 column layout) - flexbox grid sample
demo (3 column layout) – flexbox grid sample

わざわざ作っておいて何ですが、従来からあるシステムをflexboxで置き換える意味は基本的にないと思います。

flexboxを使っているので、実は合計が12にならなくても良かったりします。