[解決済み] CSSとHTMLのどちらに画像をdata/base64で埋め込むべきですか？

2022-06-29 20:17:29

質問

サーバーへのリクエスト数を減らすために、私はいくつかの画像（PNGとSVG）をBASE64として直接CSSに埋め込みました。(これはビルドプロセスで自動化されています)。

このように

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...);

これは良い習慣でしょうか？これを避けるべき理由があるのでしょうか？データURLをサポートしていない主要なブラウザはありますか？

ボーナス質問です。 CSS & JSについても、これを行うことは意味があるのでしょうか？

これは良い方法なのでしょうか？これを避けるべき理由はありますか？

IEとの互換性が重要でなく、キャッシュよりもリクエストの保存が重要な場合、通常は一緒に使用される非常に小さなCSS画像（CSSスプライトなど）に対してのみ良い方法です。

注目すべき欠点がいくつもあります。

IE6 および 7 ではまったく動作しません。
リソースに対してのみ動作する IE8 では 32k サイズまで . これは、base64エンコード後に適用される制限です。つまり、32768文字以下ということです。
これはリクエストを保存しますが、代わりに HTML ページを肥大化させます! そして、画像をキャッシュできないようにします。そして、画像はキャッシュされません。画像は、含まれるページやスタイルシートが読み込まれるたびに読み込まれます。
Base64 エンコーディングは、画像サイズを 33% 肥大させます。
gzip圧縮されたリソースで提供される場合。 data: の画像は、ほぼ確実に、サーバのリソースにひどい負担をかけることになります! 画像は伝統的に、圧縮するために非常に CPU 負荷が高く、サイズはほとんど縮小されません。