Data/Base64 を使用して CSS または HTML に画像を埋め込むことは良い方法ですか?

Data/Base64 を使用した CSS または HTML への画像の埋め込み

サーバーリクエストを最適化するために、一部の開発者は小さな画像 (PNG および SVG) を次のように埋め込みます。 BASE64 文字列を CSS ファイルに直接入力します。この手法は、画像の可視性を維持しながら HTTP リクエストを保存することを目的としています。

データ: URL の埋め込みは良い方法ですか?

画像をデータに埋め込む: URL は次のような場合に役立ちます。特定の状況:

• 非常に小さい CSS 画像の場合 (base64 以降 32k 未満)エンコード)
• CSS スプライトとして使用する場合 (複数の画像を 1 つに結合する)
• IE の互換性が問題ではない場合

データを避ける理由: URL 埋め込み:

潜在的な利点にもかかわらず、データ: URL埋め込みにはいくつかの顕著な欠点があります:

• ブラウザの互換性: IE6 および IE7 はデータ: URL をサポートしません。 IE8 は、最大 32k のサイズのリソースに対してのみサポートします。
• ページの肥大化: データ: URL は、画像をテキスト文字列としてエンコードすることにより、HTML または CSS ファイルのサイズを増加させます。
• キャッシュできない画像: 埋め込み画像は、毎回ロードされるため、キャッシュできなくなります。含むページまたはスタイル シートがアクセスされます。
• パフォーマンス オーバーヘッド: Base64 エンコードにより、画像サイズが 33% 増加します。これは、特に gzip 圧縮されたコンテンツを提供する場合に、サーバー リソースに負担をかける可能性があります。

CSS と JS をデータに埋め込む: URL

CSS と JS を埋め込むのは論理的であるように思えるかもしれませんが、データを使用する JavaScript: URL は画像と同じ理由で、通常は推奨されません。 CSS および JavaScript ファイルは通常、CSS 画像よりもはるかに大きいため、データ: URL の埋め込みは非現実的であり、リソースを大量に消費します。

以上がData/Base64 を使用して CSS または HTML に画像を埋め込むことは良い方法ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。