UltKit
Bild11
BildkonverterBild komprimierenBildgröße ändernBild zuschneidenBild in PDFPassfoto erstellenBild in SVGAlle Bild-Tools →
PDF13
PDF komprimierenPDF-KonverterPDF in BildPDF zusammenfügenPDF teilenPDF entsperrenPDF schützenAlle PDF-Tools →
Dokumente & Daten7
In PDF umwandelnDokumentkonverterBild in Text (OCR)Bild in ExcelDatenkonverterE-Book-KonverterAlle Dokumente & Daten-Tools →
Video6
VideokonverterVideo komprimierenVideo in AudioVideo in GIFVideo kürzenAudio in VideoAlle Video-Tools →
Audio4
AudiokonverterAudio komprimierenAudio kürzenAudio in TextAlle Audio-Tools →
Weitere Tools22
QR-Code-GeneratorDateien zippenOnline entpackenZeitzonenrechnerEinheitenumrechnerPasswort-GeneratorWörter zählenFarbwählerAlle weiteren Tools →
BlogSo funktioniert's

Bild in Base64 umwandeln

Machen Sie aus einer Bilddatei eine Textzeile, die Sie in HTML, CSS, eine JSON-Anfrage oder eine Markdown-Datei einfügen können. Das Data-URI-Präfix steht bereits davor, sodass der Code sofort nach dem Einfügen funktioniert.

Daten-Konverter

oder CSV, TSV, TXT …-Dateien hierher ziehen ·

Max. 95 MB pro Datei· Bis zu 20 Dateien· Gelöscht nach 30 Minuten

Ausgabe

Dateien werden auf unseren Servern verarbeitet und nach 30 Minuten gelöscht.

So verwenden Sie dieses Tool

  1. 1

    Bilder hinzufügen

    Ziehen Sie PNG-, JPG-, GIF-, WebP- oder SVG-Dateien in den Upload-Bereich, bis zu 20 gleichzeitig und je maximal 95 MB.

  2. 2

    Präfix behalten oder entfernen

    Data-URI-Präfix ist aktiviert, sodass das Ergebnis mit data:image/png;base64, oder dem passenden Typ beginnt. Deaktivieren Sie es unter Erweiterte Einstellungen, wenn eine API den reinen Base64-String erwartet.

  3. 3

    Umwandeln und kopieren

    Klicken Sie auf Konvertieren in Base64-Text und laden Sie pro Bild eine .txt-Datei herunter, die Sie direkt in Ihren Code einfügen können.

Laden Sie das Bild hoch und klicken Sie auf Konvertieren in Base64-Text. Sie erhalten die Datei als reine Zeichenfolge, beginnend mit data:image/…;base64, sodass sie direkt in ein img-src oder ein CSS-url() passt. Am Bild selbst ändert sich nichts.

Wofür ein Bild als Base64 nützlich ist

Base64 ist in RFC 4648 (2006) definiert und bildet je 3 Bytes Binärdaten auf 4 Zeichen eines 64-Zeichen-Alphabets aus A–Z, a–z, 0–9, + und / ab. Das Ergebnis übersteht jeden Kanal, der für Text gebaut ist. Das Data-URI-Schema, 1998 von Larry Masinter als RFC 2397 festgehalten, lässt einen Browser diesen Text dann wie eine Datei behandeln.

Frontend-Entwickler binden kleine Symbole, Ladeanimationen und Platzhalterbilder inline ein, damit eine Seite ohne zusätzliche Anfragen dargestellt wird. Backend-Entwickler senden Bilder in JSON, weil viele APIs, darunter Bilderkennungs- und OCR-Dienste, ein Bild als Base64-Feld akzeptieren. Tester legen Fixtures im Quellcode ab, und wer HTML-Berichte in einer Datei oder Markdown-Notizen erstellt, bettet Screenshots ein, damit die Datei beim Versenden per E-Mail oder Archivieren in sich geschlossen bleibt.

So sieht die Base64-Ausgabe aus

Ein transparentes 1 × 1 PNG (68 Bytes) als Data-URI in einem img-Tag
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="Ein Pixel">

PNG-Symboldatei

24 KB

typisches Symbolset für Werkzeugleisten, 96 × 96 px

+33 % Größe, keine Qualitätsänderung

Base64-Text

32 KB

4 Zeichen pro 3 Bytes, plus Präfix

ANY I

Beliebiges Bild

Dieses Tool akzeptiert gängige Bildformate, darunter JPG, PNG, WebP, HEIC, GIF, BMP und TIFF. Das Format wird automatisch aus der Datei erkannt, Sie müssen also nicht wissen, um welche Art von Bild es sich handelt.

Any image-Konverter

BASE64

Base64-codierter Text

Base64 ist eine in RFC 4648 definierte Kodierung, die beliebige Binärdaten in eine Zeichenfolge aus 64 sicheren Textzeichen umwandelt. Sie dient dazu, Bilder als Data-URI in HTML und CSS einzubetten, Dateien an E-Mails anzuhängen und Binärdaten in JSON oder XML zu übertragen. Die Kodierung ist vollständig umkehrbar, macht die Daten aber etwa 33 % größer. Base64 ist keine Verschlüsselung und bietet keine Sicherheit; jeder kann es dekodieren.

Komprimierung
Verlustfrei
Transparenz
–
Animation
–
Eingeführt
–
BASE64-Konverter

Bilder werden zu Base64-Text, wenn sie in etwas transportiert werden müssen, das nur Text aufnimmt: eine HTML- oder CSS-Datei ohne separate Anfrage, ein JSON-Feld eines API-Aufrufs, eine Testdatei (Fixture) oder ein Bericht in einer einzigen Datei.

Wann ein eingebettetes Bild einer Seite hilft – und wann es schadet

Inlining spart eine Anfrage, was vor allem unter HTTP/1.1 wichtig war, als Browser nur wenige Verbindungen pro Website öffneten. Mit dem Multiplexing von HTTP/2 und HTTP/3 sind zusätzliche kleine Anfragen günstig, der Vorteil schrumpft also, während die Nachteile bleiben: Das codierte Bild kann nicht separat zwischengespeichert werden, es wird bei jeder Änderung des HTML oder CSS erneut geladen, und es verzögert das Parsen der Datei, in der es steckt.

Eine sinnvolle Regel: Binden Sie nur Bilder von wenigen Kilobyte inline ein, die auf jeder Seite erscheinen, etwa ein Logo oder ein Icon-Sprite, und liefern Sie alles andere als Dateien aus. Fotos gehören fast nie inline. Wenn Sie eigentlich einen anderen Dateityp statt Text brauchen, erledigt das der Bildkonverter.

Stärken von Base64-Bildern

  • Eine in sich geschlossene HTML-, CSS- oder JSON-Datei
  • Keine zusätzliche Anfrage für winzige Symbole
  • Sicher in JSON, XML und anderen Textformaten
  • Verlustfrei und umkehrbar

Nachteile von Base64-Bildern

  • Etwa 33 % größer als die Binärdatei
  • Wird vom Browser nicht separat zwischengespeichert
  • Wird von vielen E-Mail-Programmen als Bild blockiert
  • Schwer in Code-Diffs zu prüfen

Fragen zu Bild in Base64

Was ist der Unterschied zwischen Base64 und einer Data-URI?

Base64 sind nur die codierten Zeichen. Eine Data-URI umschließt sie mit Schema und Typ, data:image/png;base64, gefolgt von den Zeichen, damit ein Browser weiß, wie er sie decodieren und anzeigen soll. HTML und CSS benötigen die vollständige Data-URI; die meisten JSON-APIs erwarten nur den reinen Base64-Teil.

Wie viel größer wird ein Bild als Base64?

Base64 schreibt 4 Zeichen für je 3 Bytes, der Text ist also etwa ein Drittel größer als die Datei, zuzüglich des kurzen Präfixes. Ein 30 KB großes PNG wird zu rund 40 KB Text. Wird das HTML oder CSS mit gzip-Komprimierung ausgeliefert, wird ein Teil dieses Mehraufwands bei der Übertragung wieder ausgeglichen.

Kann ich ein Base64-Bild in einer E-Mail-Signatur verwenden?

Das ist unzuverlässig. Gmail zeigt Bilder als Data-URI nicht an, und mehrere Desktop-Mailprogramme entfernen sie ebenfalls, sodass Empfänger ein defektes Symbol sehen. Legen Sie das Bild auf einem Webserver ab oder hängen Sie es an, und nutzen Sie Base64 für Webseiten und Apps.

Sollte ein SVG-Icon Base64-kodiert werden?

Das funktioniert, aber SVG ist bereits Text. Wenn Sie das Markup per URL-Codierung statt mit Base64 codieren, wird die Data-URI meist kürzer und bleibt lesbar. Bei allem, was größer als ein kleines Symbol ist, ist eine separate SVG-Datei, die der Browser zwischenspeichern kann, die bessere Wahl.

Kann ich den Base64-Text wieder in ein Bild umwandeln?

Ja, die Codierung ist verlustfrei und vollständig umkehrbar: Beim Decodieren erhalten Sie exakt die ursprünglichen Bytes. Jede Programmiersprache bringt einen Decoder mit, und wenn Sie eine vollständige Data-URI in die Adressleiste eines Browsers einfügen, wird das Bild angezeigt.

Verändert die Kodierung die Bildqualität?

Nein. Base64 ändert, wie die Bytes geschrieben werden, nicht die Pixel. Um den String zu verkürzen, verkleinern Sie zuerst das Bild, zum Beispiel mit Bild auf 20 KB komprimieren, und codieren Sie dann die kleinere Datei.