Bild als Base64-Data-URI _

So funktioniert die Bild-zu-Base64-Konvertierung

Die gesamte Konvertierung läuft in Ihrem Browser über die File API und die eingebaute btoa-Funktion — es wird keine Codec-Bibliothek heruntergeladen und kein Server sieht das Bild. Hier ist die vollständige Pipeline:

1. Sie legen ein Bild ab oder wählen es aus. Der Browser liest es als Blob von Ihrer lokalen Festplatte, ohne Bytes an einen Server zu kopieren.
2. Die Datei wird in 1-MB-Blöcken gelesen und die Bytes jedes Blocks werden an einen binären String angehängt. Die Block-Verarbeitung verhindert, dass große Bilder den JavaScript-Aufrufstack zum Überlaufen bringen.
3. Der binäre String wird an btoa übergeben, das jeweils drei Bytes auf vier Base64-Zeichen aus dem Alphabet A–Z, a–z, 0–9, plus / abbildet.
4. Der MIME-Typ der Datei (image/png, image/jpeg usw.) wird aus dem File-Objekt gelesen und als data:-Präfix vorangestellt, wodurch eine vollständige data:image/…;base64,…-URI entsteht.
5. Die Seite assembliert vier Ausgaben aus dieser URI — die vollständige Data-URI, das rohe Base64 ohne Präfix, ein einbaufertiges -Tag und einen CSS-background-image-Ausschnitt — jede mit eigener Kopierschaltfläche.

Warum ein Bild als Data-URI kodieren?

• Ein kleines Logo oder Symbol inline als Data-URI einzubetten entfernt eine separate Netzwerkanfrage, sodass die Seite oder E-Mail ihren ersten Frame etwas früher rendert.
• Eine Seite oder ein Stylesheet mit inline eingebetteten Bildern ist eigenständig. Es funktioniert offline und kann kopiert werden, ohne einen Ressourcenordner mitschleppen zu müssen.
• Viele Mail-Programme blockieren verknüpfte externe Bilder standardmäßig. Betten Sie ein Logo in Base64 ein und es erscheint in dem Moment, in dem die Nachricht geöffnet wird, ohne externe Anfrage.
• Die Kodierung erfolgt vollständig in Ihrem Browser, sodass sensible Bilder niemals an einen Drittanbieter-Server übertragen werden. Das gilt für Screenshots, Ausweisdokumente und interne Diagramme.

Häufige Anwendungsfälle für Base64-Bilder

Data-URIs kommen dort vor, wo ein Bild klein genug ist, dass eine separate Anfrage mehr kostet als die ~33%ige Größenzunahme, die Base64 hinzufügt. Drei Muster treten ständig auf:

• Inline-CSS-Symbole: Ein 1–2 KB großes Sprite oder Symbol wird in einem Stylesheet als background-image: url(data:…) eingefügt, sodass die Regel vollständig eigenständig ist.
• E-Mail-Signaturen und Newsletter: Ein als eingebettetes Logo mit einer data:-URI als src wird auch dann angezeigt, wenn der Client externe Bilder blockiert.
• Einbindung in Build-Tools: Bundler wie Webpack und Vite betten Assets unter einem Byte-Schwellenwert automatisch ein, und dieses Tool ermöglicht es Ihnen, genau zu sehen, wie diese Ausgabe aussieht.

Wie sieht ein Base64-Bild aus?

Nehmen Sie ein transparentes PNG von 1×1 Pixel. Seine rohen Bytes sind nur 67 Bytes, aber kodiert wird es zu dem String iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, und die vollständige Data-URI lautet data:image/png;base64,iVBORw0KGgo…. Beachten Sie, dass die kodierte Form etwa ein Drittel größer ist als das Original. Das ist der Kompromiss, um Binärdaten sicher direkt in Text einzubetten.

Wird mein Bild irgendwo hochgeladen?

Nein. Die Konvertierung verwendet die File API des Browsers und die native btoa-Funktion, um das Bild vollständig auf Ihrem Gerät zu kodieren. Sie können dies selbst überprüfen: Öffnen Sie die Entwicklertools Ihres Browsers, wechseln Sie zum Netzwerk-Panel und konvertieren Sie ein Bild — die einzigen Anfragen, die Sie sehen, sind der Seitenaufruf und etwaige Werbung. Nichts in Bildform wird an einen Server gesendet, was dies sicher für Screenshots, Ausweisdokumente und interne Diagramme macht.

Warum ist die Base64-Ausgabe größer als mein Originalbild?

Base64 stellt jeweils drei Bytes Binärdaten mit vier ASCII-Zeichen dar, sodass der kodierte Text etwa 33% größer ist als die Quelldatei. Die Data-URI-Größenanzeige auf dieser Seite zeigt die genaue aufgeblähte Länge. Deshalb sind Data-URIs nur für kleine Bilder sinnvoll — ein 2-MB-Foto inline einzubetten würde Ihr HTML oder CSS weit mehr aufblähen, als eine separate Anfrage gekostet hätte. Als Faustregel gilt: Betten Sie Bilder unter etwa 4 KB inline ein und verlinken Sie auf alles Größere.

Welche Bildformate kann ich konvertieren?

Jedes Format, das Ihr Browser als Bild erkennt, funktioniert, da das Tool die rohen Bytes liest statt das Bild zu dekodieren. Das umfasst PNG, JPEG, GIF, WebP, SVG und BMP. Der MIME-Typ wird direkt aus der Datei gelesen, sodass das data:-Präfix immer mit dem tatsächlichen Format übereinstimmt — ein JPEG erzeugt data:image/jpeg und ein SVG erzeugt data:image/svg+xml. SVG verdient eine besondere Erwähnung: Es ist bereits Text, daher ist eine URL-kodierte Data-URI für SVGs oft kleiner als die Base64-Version, obwohl dieses Tool aus Konsistenzgründen die Base64-Form ausgibt.

Legen Sie ein Bild ab, kopieren Sie die Data-URI oder den Ausschnitt, den Sie benötigen, und fügen Sie ihn in Ihr HTML, CSS oder E-Mail-Template ein. Jedes Byte bleibt auf Ihrem Gerät. Kein Upload, kein Konto, keine Serveranfrage.