Was bewirkt die Codierung eines Bildes in base64?

94

Wenn ich ein Bild (jpg oder png) in base64 konvertiere, ist es dann größer oder hat es dieselbe Größe? Wie viel größer wird es sein?

Wird empfohlen, Base64-codierte Bilder auf meiner Website zu verwenden?

— Danny Fox
quelle

1

Das einzige Mal, wenn Sie so etwas tun möchten, ist, wenn Sie auf Nur-Text-Ressourcen beschränkt sind und aus irgendeinem Grund kein Rohbildformat verwenden können.

— Wug

Hier gibt es eine gute Antwort: stackoverflow.com/questions/1533113/…

— Steed

base64 macht Deeplinks unmöglich. Dies kann ein Plus sein.

— Damoeb

@Wug - Wissen Sie, dass dies keine späte Antwort ist und dass sich die Dinge geändert haben, aber es sind definitiv Zeiten, in denen Sie Leistungssteigerungen erzielen können, indem Sie bas64 senden. Das Senden von Nachrichten über Websockets mit Base64-codierten Bildern (kleine) wäre leistungsfähiger als das Anfordern jedes einzelnen Bilds für sich.

— Philip

Das ist eine gute Frage. Ich suchte nach einer guten Antwort für "Binärbilder speichern oder base64-codiert?" und ich fand einige gute Antworten wie diese

— moreirapontocom

129

Es wird ungefähr 37% größer sein:

Sehr grob gesagt entspricht die endgültige Größe von Base64-codierten Binärdaten dem 1,37-fachen der ursprünglichen Datengröße

Quelle: http://en.wikipedia.org/wiki/Base64

— Mixer
quelle

28

Nein, nicht 137% größer, 137% der Originalgröße :-) 37% größer (laut Ihrer Quelle).

— Eric J.

4

Ich würde sagen, das ist so ziemlich 4/3 der Originalgröße.

— Kiwixz

Gibt es eine Einschränkung für die Bildgröße, um das Bild in base64 zu konvertieren?

— 151291

2

@Blender Aber in meinem Fall, wenn ich eine 70-KB-Bitmap in einen String konvertiere, wird sie zu 500 KB. Es sind nicht 37%. Ich habe ein 5-MB-Bild auf 70 KB komprimiert und dieses komprimierte Bild dann in einen String konvertiert, der 500 KB groß wird.

— KJEjava48

@ KJEjava48: Wie konvertierst du es in einen String?

— Blender

16

Hier ist eine wirklich hilfreiche Übersicht darüber, wann base64 codiert werden muss und wann nicht von David Calhoun.

Grundlegende Antwort = gzipped base64-codierte Dateien sind in der Dateigröße in etwa mit Standard-Binärdateien (jpg / png) vergleichbar. Gzip-Binärdateien haben eine kleinere Dateigröße.

Takeaway = Das Codieren und Zippen Ihrer UI-Symbole usw. hat einige Vorteile, ist jedoch für größere Bilder nicht ratsam.

— Bulldogge
quelle

14

In base64 wird es größer sein.

Base64 verwendet 6 Bits pro Byte, um Daten zu codieren, während Binär 8 Bits pro Byte verwendet. Außerdem gibt es bei Base64 einen kleinen Polsterungsaufwand. Nicht alle Bits werden mit Base64 verwendet, da es in erster Linie entwickelt wurde, um Binärdaten auf Systemen zu codieren, die nur nicht-Binärdaten korrekt verarbeiten können.

Dies bedeutet, dass das codierte Bild etwa 25% größer ist, zuzüglich eines konstanten Overheads für das Auffüllen.

— Eric J.
quelle

7

Wenn Sie ein Bild in base64 codieren, wird es etwa 30% größer.

Weitere Informationen zum Daten-URI-Schema finden Sie im Wikipedia-Artikel.

Base64-codierte Daten-URIs sind 1/3 größer als ihr binäres Äquivalent. (Dieser Overhead wird jedoch auf 2-3% reduziert, wenn der HTTP-Server die Antwort mit gzip komprimiert.)

— Oded
quelle

7

Die Antwort lautet: Es kommt darauf an.

Obwohl base64-Bilder größer sind, gibt es einige Bedingungen, unter denen base64 die bessere Wahl ist.

Größe der base64-Bilder

Base64 verwendet 64 verschiedene Zeichen und dies ist 2 ^ 6. Base64 speichert also 6 Bit pro 8 Bit Zeichen. Das Verhältnis von nicht konvertierten Daten zu base64-Daten beträgt also 6/8. Dies ist keine genaue Berechnung, sondern eine grobe Schätzung.

Beispiel:

Ein 48-KB-Image benötigt ca. 64 KB als Base64-konvertiertes Image.

Berechnung: (48/6) * 8 = 64

Einfacher CLI-Rechner auf Linux-Systemen:

$ cat /dev/urandom|head -c 48000|base64|wc -c
64843

Oder mit einem Bild:

$ cat my.png|base64|wc -c

Base64-Bilder und Websites

Diese Frage ist viel schwieriger zu beantworten. Im Allgemeinen ist das Bild mit base64 so groß wie weniger sinnvoll. Beachten Sie jedoch die folgenden Punkte:

Viele eingebettete Bilder in einer HTML-Datei oder CSS-Datei können ähnliche Zeichenfolgen haben. Bei PNGs finden Sie häufig wiederholte "A" -Zeichen. Bei Verwendung von gzip (manchmal auch als "deflate" bezeichnet) kann es sogar zu einem Gewinn bei der Größe kommen. Aber es kommt auf den Bildinhalt an.
Anforderungs-Overhead von HTTP1.1: Insbesondere bei vielen Cookies kann der Overhead pro Anforderung leicht einige Kilobyte betragen. Durch das Einbetten von Base64-Bildern wird möglicherweise Bandbreite gespart.
Codieren Sie SVG-Bilder nicht mit base64, da gzip in XML effektiver ist als in base64.
Programmierung: Bei dynamisch generierten Bildern ist es einfacher, sie in einer Anfrage zu liefern, als zwei abhängige Anfragen zu koordinieren.
Deeplinks: Wenn Sie das Herunterladen des Bildes verhindern möchten, ist es etwas schwieriger, ein Bild aus einer HTML-Seite zu extrahieren.

— Trendfischer
quelle

3

Es kostet Sie definitiv mehr Speicherplatz und Bandbreite, wenn Sie base64-codierte Bilder verwenden möchten. Wenn Ihre Site jedoch viele kleine Bilder enthält, können Sie die Ladezeit der Seite verkürzen, indem Sie Ihre Bilder in base64 codieren und in HTML einfügen. Auf diese Weise muss der Client-Browser nicht viele Verbindungen zu den Bildern herstellen, sondern hat sie in HTML.

— Brad Larson
quelle

Dies wird jedoch kein Problem sein, sobald HTTP 2 wirklich durchkommt.

— Philip

@Philip Das stimmt, aber ich mag den Portabilitätsfaktor, wenn alle Ressourcen in der HTML-Datei enthalten sind. Dies hilft beim mobilen Web-Caching in Bereichen mit fleckigen Netzwerken.

— Aalaap

@aalaap Das Problem dabei ist, dass Sie, wenn Sie eine Änderung auf der Seite vornehmen, den gesamten Inhalt einschließlich der Bilder neu laden müssen. Wenn Sie die Assets getrennt haben, können Sie ein höheres Alter für diese Assets haben. Diese werden im Cache gespeichert und nicht neu geladen. Der Cache läuft auf der Seite selbst ab.

— Philip