Embedding images in CSS using "data" URL scheme
-----------------------------------------------

URLスキームのひとつであるdataを使うと、URLにデータを含められる。これをCSSと組み合わせて使うと、CSSに画像データを埋め込める。画像を外部ファイルにしなくてよいので、場合と使いようによっては便利。

The "data" URL scheme
http://www.ietf.org/rfc/rfc2397.txt

(via http://znz.s1.xrea.com/t/?date=20060108#p01)

例えばこんな感じ。ABCDE...の部分がデータ。

  data:image/png;base64,ABCDE...

例えばh1要素の直前に何か画像を置きたければ、次のように指定すればよい。

  h1:before {
    content: url("data:image/png;base64,GyRCMTEbKEJORwoaCgAAAA1JSERS
                  AAAAAQAAAAEQAAAAAGobJEJ7KBsoQhYAAAAJcEhZcwAAAEgAAA
                  BIAEYbJEIlThsoQms+AAAAC0lEQVQIGyRCJWkbKEJjGyRCGyhC
                  HwADAAEbJEIbKEJdchskQhsoQgAAAElFTkQbJEIlZxsoQkJg");
  }

base64,の後にあるのは、PNG画像をbase64でテキストにエンコードしたもの。実際には改行と空白を取り除いて詰める必要がある（Firefox 1.5で表示を確認。IE6では正しく表示されない）。

画像をbase64エンコードする方法は何でもいいけれど、RubyとNKFの例をメモしておく。

  % ruby -e '[ARGF.read].pack("m").display' <foo.png
  % nkf -MB <foo.png