wake-up-neo.net

Base 64-Kodierung vs. Laden einer Bilddatei

Ich arbeite also an etwas in PHP, wo ich meine Bilder aus einer SQL-Datenbank holen muss, wo sie in base64 verschlüsselt werden. Die Geschwindigkeit der Anzeige dieser Bilder ist kritisch. Ich versuche also herauszufinden, ob es schneller wäre, die Datenbankdaten in eine Bilddatei umzuwandeln und sie dann in den Browser zu laden oder einfach die rohen base64-Daten zu wiederholen und Folgendes zu verwenden:

<img src="data:image/jpeg;base64,/9j/4AAQ..." />

Welches wird in FireFox und anderen Gecko-Browsern unterstützt.

Um es zusammenzufassen, wäre es schneller, eine tatsächliche Bilddatei oder den base64-Code zu übertragen. Benötigt es weniger http-Anforderung, wenn Sie mit ajax die Bilder laden?

Die Bilder würden insgesamt nicht mehr als 100 Pixel betragen.

28
teh_noob

Ich stimme mit keinem von euch überein. Es gibt Fälle, in denen Sie immer mehr Bilder laden müssen. Nicht alle Seiten enthalten 3 Bilder. Eigentlich arbeite ich an einer Website, auf der Sie mehr als 200 Bilder laden müssen. Was passiert, wenn 100000 Benutzer 200 Bilder auf einer sehr geladenen Site anfordern? Die Festplatten des Servers, die die Bilder zurückgeben, sollten zusammenfallen. Noch schlimmer ist, dass Sie so viele Anfragen an den Server stellen müssen, anstatt eine mit base64. Für so viele Thumbnails würde ich die base64-Darstellung vorziehen, die in der Datenbank gespeichert ist. Die Lösung und eine starke Argumentation fand ich unter http://www.stoimen.com/blog/2009/04/23/when-you-should-use-use-base64-for-images/ . Der Typ ist wirklich in diesem Fall und hat ein paar Tests gemacht. Ich war beeindruckt und mache auch meine Tests. Die Realität ist wie es heißt. Für so viele Bilder, die auf einer Seite geladen werden, ist die Antwort vom Server wirklich hilfreich.

19
Peter Novak
  • Durch die Base64-Kodierung wird die Datei größer und damit langsamer übertragen.
  • Durch das Einbinden des Bildes in die Seite muss es jedes Mal heruntergeladen werden. Externe Bilder werden normalerweise nur einmal heruntergeladen und dann vom Browser zwischengespeichert.
  • Es ist nicht mit allen Browsern kompatibel
25
some

Warum das Bild immer wieder neu generieren, wenn es nicht geändert wird? Hypothetisch, obwohl 1000 verschiedene mögliche Bilder auf der Grundlage von 1000 verschiedenen Bedingungen gezeigt werden, denke ich immer noch, dass 1000 Images auf den Festplatten besser sind. Denken Sie daran, dass festplattenbasierte Images vom Browser zwischengespeichert werden können, um Bandbreite usw. zu sparen.

4
Mir Nazim

Denke nicht, dass data:// in IE7 oder darunter funktioniert.

Wenn ein Image angefordert wird, können Sie es im Dateisystem speichern und dieses dann weitergeben. Wenn sich die Bilddaten in der Datenbank ändern, löschen Sie einfach die Datei. Servieren Sie es auch von einer anderen Domain wie img.domain.com. Sie können alle Vorteile der zuletzt geänderten oder E-Tags kostenlos von Ihrem Webserver erhalten, ohne PHP starten zu müssen, es sei denn, Sie benötigen dies ebenfalls.

Wenn Sie Apache verwenden:

# If the file doesn't exist:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^/(image123).jpg$ makeimage.php?image=$1
3
rojoca

Um die erste Frage zu beantworten, habe ich einen Test mit einem JPEG-Bild von 400 x 300 Pixeln in 96 ppi durchgeführt:

base64ImageData.Length
177732

bitmap.Length
129882
2
esbenr

Es ist eine sehr schnelle und einfache Lösung. Obwohl die Bildgröße um etwa 33% zunimmt, wird die Anzahl der http-Anforderungen durch die Verwendung von base64 erheblich reduziert.

Google-Bilder und Yahoo-Bilder verwenden base64 und liefern Bilder inline. Überprüfen Sie den Quellcode und Sie werden es sehen.

Natürlich gibt es Nachteile bei diesem Ansatz, aber ich glaube, die Vorteile überwiegen die Kosten. Ein Nachteil, den ich gefunden habe, sind langsame Geräte. Im iPhone 3GS werden zum Beispiel Bilder, die von Google-Bildern geliefert werden, sehr langsam gerendert, da die Bilder vom Server entpackt werden und im Browser nicht komprimiert werden müssen. Wenn der Kunde ein langsames Gerät hat, wird er beim Rendern der Bilder etwas leiden.

2
user2377782

Im Allgemeinen erhöht die Verwendung der Base64-Codierung die Byte-Größe um etwa 1/3. Aus diesem Grund müssen Sie 1/3 Bytes aus der Datenbank in den Server verschieben und dann diese zusätzlichen 1/3 Bytes über die Verbindung zum Browser übertragen.

Mit zunehmender Größe des Bildes wird der erwähnte Aufwand natürlich proportional zunehmen.

Davon abgesehen halte ich es für eine gute Idee, die Dateien in ihre Byte-Darstellungen in der DB zu ändern und diese zu übertragen.

1
casperOne

Ich habe einmal oder zweimal base64-Bilder für Icons (10x10 Pixel oder so) verwendet.

Base64-Bilder für:

  • kompakt - Sie haben eine einzige Datei. Wenn die Datei komprimiert ist, wird das base64-Bild fast auf die Größe eines normalen Bildes komprimiert.
  • seite wird in Einzelanforderung abgerufen.

Base64 Bilder Nachteile:

  • um realistisch zu sein, müssen Sie wahrscheinlich auf allen Seiten, die das Bild enthalten, eine Skript-Engine (wie PHP) verwenden.
  • wenn das Bild geändert wird, müssen alle zwischengespeicherten Seiten erneut heruntergeladen werden. 
  • da das Image inline ist, können Sie keinen CDN oder Webserver mit statischem Inhalt verwenden.

Normale Bilder für:

  • wenn Sie das SPDY-Protokoll verwenden, wird zumindest theoretisch Seite + Bilder + CSS mit einer einzigen Anforderung geladen.
  • sie können den Ablauf für das Bild festlegen, sodass der Inhalt von den Browsern zwischengespeichert wird.
0
Nick

Wenn Sie die höchste Geschwindigkeit wünschen, sollten Sie sie auf die Festplatte schreiben, wenn sie hochgeladen/geändert werden, und den Webserver statische Dateien bereitstellen lassen. Die Vorschläge von Rojoca sind auch gut, da sie den Aufruf von PHP minimieren. Ein zusätzlicher Vorteil der Bereitstellung von einer anderen Domäne ist, dass (die meisten) Browser die Anforderungen parallel ausgeben.

Abgesehen davon sollten Sie bei der Abfrage der Daten prüfen, ob sie zuletzt geändert wurden, und dann auf die Festplatte schreiben und von dort aus bedienen. Sie sollten sicherstellen, dass Sie den If-Modified-Since-Header respektieren, damit Sie nicht unnötig Daten übertragen.

Wenn Sie nicht auf die Festplatte oder einen anderen Cache schreiben können, wäre es am schnellsten, sie als binäre Daten in der Datenbank zu speichern und zu streamen. Das Anpassen der Puffergrößen hilft an dieser Stelle.

0