1

画像を css ファイルにエンコードする Base64 uri は、余分なリクエストを防ぎ、ページの読み込みを高速化します。

base64 uri をサポートしていない古い IE をサポートする必要がないと仮定します。

base64 を使用するための最善のポリシーは何ですか。私は 8KB 未満のファイルをエンコードする傾向があります。しかし、なぜすべてをエンコードしないのでしょうか?

4

3 に答える 3

4

すべてを base64 インライン イメージとして送信する場合のいくつかの問題:

  • 画像が複数の場所から使用されている場合、インライン化するとキャッシュの使用が防止されます
  • base64 エンコーディングは、バイナリよりも多くの場所で使用されます (約 3 分の 1 多い)。
  • ブラウザはできるだけ早くレンダリングを開始します。CSS にホームページに必要のない画像さえ含まれていると、レンダリングが遅くなります。
  • リクエストが少ないことは一般的に良いことですが、ブラウザがそれらを並行して行うため、リクエストが少ないことはそれほど悪くありません
  • すべてのページで使用する小さな画像のセットを考慮すると、特にそれらが同じパレットを共有している場合、はるかに優れた最適化があります: スプライト
  • 画像よりも CSS の方が頻繁に変更される可能性があります。ファイルが 1 つしかないということは、何かが変更されるたびにすべてを再度ダウンロードする必要があることを意味します。キャッシュをうまく利用できません。

今日のポリシーに固執することもできます (HTML などの他の場所から別のファイルとして呼び出す css 内の画像をインライン化しない限り) が、個人的には、適切に構成されたキャッシュ パラメーターとスプライトほど強力ではないことがわかります。

于 2013-03-27T16:05:04.490 に答える
0

(外部の .css ファイルに画像を埋め込むことについて話していると思います。)

これは次の場合のオプションです。

  • そんなイメージはあまりない
  • 画像が小さい
  • 画像は、CSS が含まれるほぼすべてのページに適用されます

これは、次の理由で不適切なオプションです。

  • 画像が大きくなる可能性があり、ファイルはすぐに数メガバイトにまで大きくなる可能性があります
  • 画像は base64 でエンコードされ、生のバイナリよりもさらに大きい
  • クライアントはすべての画像を一度にダウンロードする必要がありますが、これは必要ない場合があります (上記の 3 番目のポイントを参照)。
  • クライアントがキャッシュされたファイルを個別に管理することはできません。つまり、小さな CSS ファイルを保持したまま大きな画像ファイルを破棄することはできません。
于 2013-03-27T16:07:28.500 に答える
-1

Base64 URL は余分なリクエストを防ぐ可能性がありますが、関連する画像のサイズも大幅に増加するため、リクエストを 1 つ減らすことによるパフォーマンス上の利点は、合計ダウンロード サイズの余分な重みを上回る可能性があります。

リクエストの数を減らすことは良い考えかもしれませんが、サイトのパフォーマンスに関係する唯一の要因ではありません。実際、ほとんどのサイトでは、リストの比較的下にあると思われます。

さらに、画像や CSS が変更された場合、それらすべてを 1 つのファイルにまとめると、既にサイトにアクセスしたことがあるユーザーにとっては不利になります。キャッシュからすべてを破棄して再読み込みする必要があるからです。それらが別々のファイルである場合、変更時にそれらの 1 つだけを再ロードする必要があります。繰り返しますが、必要なダウンロードの総量を増やしています。

やみくもに最適化しようとしないでください。サイト パフォーマンス分析ツールを使用して、特定のボトルネックがどこにあるかを特定し、最も重要なものを最初に修正します。

于 2013-03-27T16:07:35.020 に答える