7

重複の可能性:
背景画像データを base64 として css に埋め込む、良い方法または悪い方法

Google Chrome ホームページでソースを閲覧していたところ、CSS で画像が base64 でエンコードされていることに気付きました。これの利点は何ですか？http リクエストを減らすためだけにと思いたいところですが、ローカル アプリケーションなので関係ありませんよね？画像をローカルにロードできますか？

menu > [checked]:before {
  content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAARklEQVQYlWNgwA+MgViQkIJ3QKzEAFVpjEPBf5giJaiAMRYF72DWKSEJlKMpgNsgiCTxH5sCbG7AqgBZ4V2sCv7//08QAwAUfjKKBs+BFgAAAABJRU5ErkJggg==");
  display: inline-block;
  height: 9px;
  margin: 0 5px;
  vertical-align: 50%;
  width: 9px;
}
4

2 に答える 2

2

これはData Uri スキームであり、私の知る限り、唯一の利点は HTTP リクエストを保存することです (画像を取得するのではなく、すべてが 1 つとして読み込まれるため)。

なぜそれが Google Chrome のランディング ページにあるのか.

于 2012-05-03T02:52:02.117 に答える
1

キリアンが正しいと思いますが、具体的な質問のタイトルを詳しく説明すると...

バイナリ イメージ データはデータ URI で base64 エンコードされているため、テキスト ファイルに入れることができます。バイナリ データが base64 でエンコードされていない場合、次のようになります。

?PNG

IHDR           ??FIDAT?c`???X???w@??Ui?C??"%??1?`?)!    ??)?? ?$??ln??Y?]?
???O~2?ρIEND?B`?

のような文字が含まれ"ている可能性があり、css パーサーがそれを詰まらせる可能性があります。

base64 でエンコードされている場合、次のような文字のみが含まれます。

0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+,=

彼らがなぜそのようにすることを選んだのかはわかりません。おそらく、余分な画像ファイルを管理する必要がなかったのでしょう。

于 2012-05-04T16:22:02.320 に答える