[解決済み] 背景画像データをCSSにBase64で埋め込むのは良い方法ですか、悪い方法ですか？

質問

greasemonkeyのuserscriptのソースを見ていて、そのcssに以下のようなものがあることに気がつきました。

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

greasemonkeyスクリプトが、サーバー上でホストするのではなく、ソース内でできることは何でもバンドルしたいと思うのは、十分に理解できることです。しかし、私はこのテクニックを以前見たことがなかったので、その使用方法を考えてみました。

1. ページロード時のHTTPリクエストを減らすことができ、パフォーマンスを向上させることができる
2. CDNがない場合、画像と一緒に送信されるCookieによって発生するトラフィックの量を減らすことができます。
3. CSSファイルのキャッシュが可能
4. CSSファイルをGZIPPEDにすることができる

IE6（など）では背景画像のキャッシュに問題があることを考えると、これは最悪のアイデアではないような気がするのですが...。

また、どのようなツールを使って画像をbase64エンコードするのでしょうか？

update - テスト結果

• 画像でテストしています。 http://fragged.org/dev/map-shot.jpg - 133.6Kb

• テストURLです。 http://fragged.org/dev/base64.html

• 専用のCSSファイルです。 http://fragged.org/dev/base64.css - 178.1Kb

• サーバー側でGZIPエンコードする

• クライアントに送信される結果サイズ（YSLOW コンポーネントのテスト)。 59.3Kb

• のクライアントブラウザに送信されるデータの保存。 74.3Kb

いいですね、でも小さい画像には若干使い勝手が悪くなりそうかな。

UPDATE: GoogleでPageSpeedに携わるソフトウェアエンジニアのBryan McQuadeは、ChromeDevSummit 2013で、CSSのdata:urisは重要/最小限のCSSを配信するためのレンダーブロッキングのアンチパターンと考えられていると講演で表明しました。 #perfmatters: Instant mobile web apps . 参照 http://developer.chrome.com/devsummit/sessions と覚えておいてください -。 実際のスライド

解決方法は？

画像とスタイル情報を別々にキャッシュさせたい場合には、あまり良い方法とは言えません。 また、大きな画像や多数の画像を css ファイルにエンコードすると、ブラウザがファイルをダウンロードするのに時間がかかり、ダウンロードが完了するまでスタイル情報が表示されないままになります。 小さな画像で、頻繁に変更する予定がない場合は、良い解決策になります。

base64エンコーディングの生成に関して。

• http://b64.io/
• http://www.motobit.com/util/base64-decoder-encoder.asp (アップロード)
• http://www.greywyvern.com/code/php/binary2base64 (下に小さなチュートリアルがあるリンクから)