この画像の表示方法は何ですか?

Google画像では、次のように画像が読み込まれます:

data:image/jpeg;base64,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

これは何と呼ばれていますか?私はそれについていくつかの情報を見つけたいと思います(例えば、それがどれだけうまくサポートされていますか?従来のイメージよりも速いのですか?)。

1

3 答え

これはデータURIスキーマであり、 RFC 2397 を参照してください。

この特定の場合、イメージはbase64でエンコードされ、ページ/ cssに埋め込まれます。

これを行うと(Base64エンコーディング)、データのサイズが約30%増加しますが、データURIによってサーバーへの追加要求が回避され、多くの場合、ページ全体が高速に読み込まれます。

4
追加された
+1:データのサイズに大きな影響を与えているかどうかはわかりませんでした。
追加された 著者 Nightfirecat,
@Nightfirecat - データURIスキーマではなく、 Base64 エンコーディングを使用した結果です。
追加された 著者 Oded,

Base64エンコーディングと呼ばれ、データURI

通常の画像と同じ速度で処理されますが、余分なHTTPリクエストは必要ありません。そのため、HTMLページの読み込み速度は速くなりますが、HTML/CSSファイルは(やや)重くなります。

1
追加された

これはデータURIスキームです。 RFC 2397 を参照してください。

0
追加された