背景画像データを CSS に Base64 として埋め込むのは良いことでしょうか、それとも悪いことでしょうか? 質問する

Greasemonkey ユーザー スクリプトのソースを調べていたところ、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ファイルはGZIP圧縮できる

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

では、これは良い方法でしょうか、それとも悪い方法でしょうか。なぜこれを使用しないのでしょうか。また、画像を base64 でエンコードするにはどのようなツールを使用すればよいのでしょうか。

更新 - テストの結果

• 画像によるテスト: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

いいですね、でも小さい画像の場合はあまり役に立たないと思います。

更新: PageSpeed に取り組んでいる Google のソフトウェア エンジニアである Bryan McQuade 氏は、ChromeDevSummit 2013 での講演で、CSS の data:uris は、クリティカル/最小限の CSS を提供する際のレンダリングをブロックするアンチパターンであると述べました#perfmatters: Instant mobile web apps。http://developer.chrome.com/devsum​​mit/sessionsそしてそれを心に留めておいてください -実際のスライド