CSS にデータURIスキームで画像を埋め込む

CSS にもデータURIスキームで画像を埋め込めるようなので、以下のサイトを参考にしながらやってみた。対応ブラウザはきちんと確認していません。

この画像でやってみる。
変換元の画像

base64 エンコードをするのには base64 コマンドを使用

$ base64 -e bg.gif
R0lGODlhCgAKAIAAAAAAAP///yH5BAAAAAAALAAAAAAKAAoAAAIRhB2ZB7rnAovTVcUavpJn
yxUAOw==

実行結果から改行・スペースを取り除いてCSSに入れる。

background: #ffffff url("data:image/gif;base64, R0lGODlhCgAKAIAAAAAAAP///yH5BAAAAAAALAAAAAAKAAoAAAIRhB2ZB7rnAovTVcUavpJnyxUAOw==") 0 0 repeat;

画像ファイルをアップする場所が無い、html以外を含められないなど、使い道は限られそうだけど。