it-swarm.com.de

vor- und nachteile von base64 image strings

Ich habe festgestellt, dass Sie Bilder in base64-Zeichenfolgen umwandeln und diese Zeichenfolgen in img -Tags und CSS wie folgt verwenden können:

<img alt="" src="data:image/png;base64,iVBORw0KGgoAhEUgAAA ... FTkSuQmCC" />

oder dieses:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAA ... uQmCC);

Die Bereitstellung von Bildern auf diese Weise scheint die Ladezeiten der Website zu verbessern, kann jedoch einige Nachteile haben. Ich habe ein paar Fragen zu dieser Methode:

  • Wird der Browser diese Bilder zwischenspeichern?
  • Ist es für eine Seite schneller, diesen String oder eine Bilddatei zu rendern?

Ich interessiere mich für andere Vor- oder Nachteile, die mit dieser Bildserving-Methode verbunden sind.

2
Hoytman

Wird der Browser diese Bilder zwischenspeichern?

Was meinen Sie in diesem Zusammenhang mit Caching? Browser speichern statische Dateien im Cache, damit sie sie nicht erneut anfordern müssen. Wenn die Bilddaten in der HTML-Seite selbst inline bereitgestellt werden, ist kein Caching erforderlich.

Wenn die Bilddaten im Stylesheet bereitgestellt werden, werden die Bilddaten mit dem Stylesheet zwischengespeichert, da das Stylesheet selbst zwischengespeichert wird.

Ist es für eine Seite schneller, diesen String oder eine Bilddatei zu rendern?

Ich würde vermuten, dass der Unterschied dort vernachlässigbar und nicht erwägenswert ist.

Bei der Beantwortung einer Frage aus Ihrem Kommentar würde ich im Allgemeinen nur in Betracht ziehen, Bilddaten in der HTML-Quelle einzufügen, wenn sehr kleine Bilder vorhanden sind, die nur auf dieser einen Seite verwendet werden.

1
Tim Fountain