Skip to main content

Image to Base64 Converter

Convert an image to a Base64 data URL or raw Base64 string for HTML, CSS, and API payloads. Runs in your browser.

Geprüft von · Zuletzt geprüft

🔤

Drop an image here or click to upload

Supports JPG, PNG, WebP, GIF, SVG

Den Bild-zu-Base64-Konverter verwenden

  1. Ein Bild ziehen oder auswählen - JPEG, PNG, WebP, GIF, SVG, BMP und ICO werden von der FileReader-API verarbeitet, sodass das Bild in Base64 in einem Schritt konvertiert werden kann.
  2. Einen kurzen Moment warten, während FileReader.readAsDataURL die Datei liest und eine Base64-Daten-URL erzeugt.
  3. Die zwei Ausgabeblöcke prüfen: eine vollständige Daten-URL (data:image/png;base64,iVBOR...) zum direkten Einfügen in HTML oder CSS, und den rohen Base64-String allein für API-Nutzlasten.
  4. Eine der Ausgaben kopieren mit der danebenliegenden Kopier-Schaltfläche - die Clipboard-API verarbeitet Text bis zu einigen Megabyte ohne Probleme.
  5. In das Ziel einfügen. Daten-URLs funktionieren in <img src>, CSS background-image: url(...) oder überall dort, wo eine URL erwartet wird.

Bild-zu-Base64-Konverter: Daten-URL vs. Roher Output

Dieser Bild-zu-Base64-Konverter gibt zwei Ausgaben nebeneinander aus, weil echte Workflows beide benötigen. Der Daten-URL-Output verpackt die kodierten Bytes in die RFC-2397-Hülle data:image/png;base64,... und ist das, was in ein <img src>, ein CSS background-image: url(...), eine E-Mail-Vorlage oder ein eingebettetes SVG href eingefügt wird. Der rohe Base64-Output entfernt das data:-Präfix und die MIME-Deklaration und lässt nur die kodierte Nutzlast zurück - das ist es, was Cloud-Vision-APIs (AWS Rekognition, Google Cloud Vision), JSON-Request-Bodies mit einem separaten contentType-Feld und Kubernetes-Secret-Manifeste tatsächlich erwarten. Als Daten-URL-Generator plus roher Base64-Bild-Encoder auf einer Seite zu agieren bedeutet, dass das Präfix nie manuell bearbeitet werden muss, wenn das Ziel gewechselt wird. Der umgekehrte Weg - einen Base64-String nehmen und ihn zurück in eine renderbare Datei verwandeln - liegt auf unserem Base64-zu-Bild-Konverter.

Was Base64 eigentlich ist

Base64 (RFC 4648) stellt jede Bytesequenz mit 64 druckbaren ASCII-Zeichen dar (A-Z, a-z, 0-9, plus "+" und "/", mit "="-Padding). Jede drei Bytes expandieren in vier Zeichen, sodass der Output 4/3 der Quelle ist - ein 100-KB-PNG wird zu ~133 KB String. Für MIME-E-Mail 1987 entwickelt, ist Base64 heute die Lingua franca für das Einbetten von Binärdaten in textbasierte Protokolle. Die FileReader.readAsDataURL-Methode verpackt Base64 in RFC-2397-Daten-URL-Syntax - data:MIME;base64,payload - die Browser als eingebettete Ressource ohne zusätzliche HTTP-Anfrage behandeln.

Wann das Einbetten eines Bildes sinnvoll ist

  • Ein Logo an eine transaktionale E-Mail von einem Node/SMTP-Backend anhängen, ohne sich Sorgen zu machen, dass der Empfänger ein Remote-Bild abruft (was die meisten E-Mail-Clients ohnehin blockieren).
  • Ein kleines Icon oder dekoratives SVG in eine Single-File-HTML-Seite bündeln, die per E-Mail versendet oder für Offline-Lesen gespeichert werden soll.
  • Ein Bild durch eine JSON-API leiten, wo Multipart-Uploads einen komplexeren Client erfordern würden.
  • Einen Profil-Avatar in einer kleinen Datenbank speichern, wo das Anhängen einer echten Datei übertrieben wäre - unter 10 KB ist der Sweet Spot.
  • Eine Fallback-"Defektes-Bild"-Grafik in CSS einbetten, die noch gerendert wird, wenn externe Assets fehlschlagen.
  • Einen eigenständigen HTML-Bericht (Finanz-Dashboards, Penetrationstest-Ausgaben) mit direkt in die Datei eingebetteten Diagrammen erstellen.

Fallstricke beim Einbetten

  • 33% Größenzunahme. Base64 ist immer 4/3 der Länge der Binärdatei plus ein kleines Präfix. Niemals ein 500-KB-Foto einbetten, wenn ein 5-KB-Thumbnail ausreicht - die kodierte Form wird 670 KB String sein, die an jeden Client gesendet werden.
  • Kann nicht separat gecacht werden. Browser cachen externe Bilder pro URL; eine Daten-URL ist im HTML oder CSS eingebettet und wird jedes Mal neu heruntergeladen, wenn das enthaltende Dokument abgerufen wird. Große eingebettete Bilder beeinträchtigen die Cache-Effizienz.
  • Gmail- und Outlook-Limits. Einige E-Mail-Clients kürzen Nachrichten über 102 KB (Gmail) oder lehnen sehr große eingebettete Bilder ab (älteres Outlook). Ein langer Base64-Blob kann eine transaktionale E-Mail über das Limit hinausschieben und abgeschnitten werden.
  • CSP und Sandboxing. Eine strenge Content Security Policy mit img-src 'self' blockiert Daten-URLs, es sei denn, man erlaubt explizit data: in der Direktive.
  • Nicht alle Clients dekodieren zuverlässig. Einige ältere Feed-Reader und fehlerhafte E-Mail-Clients scheitern an großen Daten-URLs. Für transaktionale E-Mails ist eine gehostete URL immer noch zuverlässiger als Einbetten.

Base64 in der RFC-4648-Familie

RFC 4648 definiert mehrere Kodierungen: Standard-Base64 (die Ausgabe dieses Werkzeugs), Base64url (ersetzt "+" und "/" durch "-" und "_" für URLs und Dateinamen), Base32 und Base16 (Hex). Der 33%-Overhead ist der Grund, warum Binärprotokolle wie HTTP/2 und gRPC rohe Bytes bevorzugen; Base64 überlebt, weil es durch alles ASCII-Sichere geht - Legacy-E-Mail-Relays, XML-Attribute, JSON-Felder, JavaScript-Quellliterale. Moderne Browser akzeptieren Daten-URLs bis zu mehreren Megabyte, begrenzt hauptsächlich durch Speicher.

Wann ein CLI oder Build-Tool schneller ist

Für eine einmalige Einbettung ist der Browser am schnellsten: ablegen, kodieren, einfügen. Für wiederkehrende Arbeit gewinnt ein CLI: base64 -w 0 logo.png unter Linux, openssl base64 -in logo.png unter macOS, certutil -encode logo.png logo.txt unter Windows. Build-Tools (webpack Asset-Module, Vite Asset-Handling, esbuild dataurl-Loader, Parcel) betten zum Build-Zeitpunkt ein, was Laufzeit-Base64 bei Produktions-CDN-Egress-Kosten schlägt. Diesen Konverter für Debugging, E-Mail-Vorlagen und einmalige HTML-Dateien verwenden; die Pipeline den Rest erledigen lassen.

Häufig gestellte Fragen

Wird meine Datei wirklich nirgends hochgeladen?

Korrekt. Die FileReader-API liest die Bytes lokal in den JavaScript-Speicher und der Browser führt den Base64-Encoder nativ aus. Es gibt keinen <code>fetch</code>-Aufruf, keinen WebSocket und keinen Telemetrie-Ping, der Bilddaten überträgt. Das DevTools-Netzwerk-Panel bleibt während der Konvertierung leer, und wenn du die Internetverbindung sofort nach dem Laden der Seite trennst, funktioniert das Werkzeug weiterhin.

Warum ist mein Base64-String 33% größer als das ursprüngliche Bild?

Base64 kodiert je 3 Bytes Binärdaten in 4 ASCII-Zeichen, was ein festes Expansionsverhältnis von 4/3 ergibt. Eine 100-KB-Quelle wird zu etwa 133 KB String. Dieser Overhead ist der Preis für garantierte Sicherheit durch rein textbasierte Kanäle. Wenn die Größe wichtiger als ASCII-Sicherheit ist, das Binärdaten direkt transportieren (Multipart-Formular-Upload, binärer WebSocket, gRPC) statt es mit Base64 zu kodieren.

Kann ich die Daten-URL direkt in ein HTML-img-Tag einfügen?

Ja. Den "Daten-URL"-Output (der mit <code>data:image/...;base64,</code> beginnt) kopieren und als <code>src</code>-Attribut eines <code>&lt;img&gt;</code>-Elements verwenden. Es funktioniert auch in CSS <code>background-image: url(...)</code>. Das Bild wird sofort aus den eingebetteten Bytes gerendert, ohne zusätzliche HTTP-Anfrage - praktisch für offline-taugliche Single-File-HTML-Dokumente.

Wofür sollte ich den "Roher Base64"-Output verwenden?

Den rohen Output verwenden, wenn das Ziel nur die kodierte Nutzlast ohne das <code>data:image/png;base64,</code>-Präfix erwartet - zum Beispiel ein JSON-API-Body, der ein separates <code>contentType</code>-Feld hat und <code>imageData</code> als reinen Base64 erwartet. Viele Cloud-APIs (AWS Rekognition, Google Cloud Vision) wollen die rohe Kodierung plus eine separate MIME-Deklaration.

Gibt es eine Größenbeschränkung, die das Werkzeug verarbeiten kann?

Die FileReader-API kann Dateien bis zu einem Gigabyte in modernen Browsern dekodieren, bevor Speicherdruck entsteht. Die praktische Nutzbarkeit bricht jedoch weit davor zusammen: Die Clipboard-API fängt ab 5 MB String zu verzögern an, und ein mehrere Megabyte großes Daten-URL in einen Texteditor einzufügen ist langsam. Für Bilder über ein paar hundert Kilobyte sind gehostete URLs fast immer eine bessere Wahl als Einbetten.

Beeinflusst Base64-Kodierung die Bildqualität?

Nein. Base64 ist eine verlustfreie, umkehrbare Transformation - es übersetzt die exakte Bytesequenz der Datei in ASCII-Zeichen und zurück. Die Pixeldaten, Komprimierung und Metadaten überstehen den Hin- und Rückweg. Wenn der Base64-Output dekodiert wird, erhält man Byte für Byte dieselbe Datei zurück.

Warum würde ich ein Bild einbetten statt es zu hosten?

Drei Hauptgründe: Das eingebettete Bild kann nicht fehlschlagen beim Laden (nützlich in E-Mails, Offline-Seiten und Single-File-HTML-Berichten); es vermeidet eine separate HTTP-Anfrage, was bei kritischen sichtbaren Logos auf Verbindungen mit hoher Latenz wichtig ist; und es hält das Bild im enthaltenden Dokument gebündelt, was das Teilen und Archivieren vereinfacht. Der Kompromiss ist die 33% Größenzunahme und der Verlust des pro-Bild-Caching.

Kann ich das auch für SVG-Dateien verwenden?

Ja, SVG kodiert wie jeder andere Dateityp. Das Ergebnis ist eine <code>data:image/svg+xml;base64,...</code>-URL, die als Bildquelle funktioniert. Zu beachten ist, dass für SVG speziell URL-Encoding des rohen XML oft kompakter als Base64 ist - <code>data:image/svg+xml;utf8,&lt;svg...&gt;</code> vermeidet die 33% Vergrößerung - aber diese Form hat ihre eigenen Escape-Fallstricke.

Funktioniert das mit der Clipboard-API in Firefox und Safari?

Ja. Alle modernen Browser implementieren <code>navigator.clipboard.writeText</code>, was dieses Werkzeug für die Kopier-Schaltflächen verwendet. In älteren oder eingeschränkten Kontexten (einige Unternehmensrichtlinien, altes iOS Safari) ist die Clipboard-API hinter Benutzeraktivierung gesperrt, die der Schaltflächenklick erfüllt. Der Fallback-Pfad verwendet das ältere <code>document.execCommand("copy")</code> bei Bedarf.

Wie unterscheidet sich das von base64-to-image?

Dieses Werkzeug macht die Vorwärtsrichtung: eine binäre Bilddatei nehmen und einen Base64-String zum Einbetten oder Senden erzeugen. Das inverse Werkzeug "Base64 zu Bild" nimmt einen vorhandenen Base64-String und dekodiert ihn zurück in eine ansehbare und herunterladbare Bilddatei. Sie sind natürliche Gegenstücke in einem einzigen Workflow - hier kodieren, dort dekodieren, beide Enden einzeln wiederverwenden.

Wird der MIME-Typ bei seltsamen Formaten korrekt erkannt?

Das Werkzeug verwendet den MIME-Typ, den der Browser vom Dateiobjekt meldet, welchen Browser aus den Magic Bytes der Datei statt der Dateinamenerweiterung ermitteln. Häufige Typen (JPEG, PNG, GIF, WebP, SVG) werden immer erkannt. Exotische Formate wie HEIC oder BMP können auf einigen Plattformen als <code>application/octet-stream</code> erscheinen; in diesem Fall funktioniert die Daten-URL noch, aber nachgelagerte Werkzeuge erkennen den MIME-Hinweis möglicherweise nicht.

Mehr Image Tools

Base64 to Image Converter

Decode a Base64 string or data URL back into a viewable image and download it as PNG, JPG, WebP or GIF. Runs in your browser.

Open tool

Favicon Generator

Generate favicons in all standard sizes (16x16 to 512x512) for websites and PWAs.

Open tool

Image Blur & Pixelate

Apply blur or pixelation effects to images with adjustable intensity.

Open tool

Image Color Picker

Upload an image and pick colors in HEX, RGB, and HSL with a visual color history.

Open tool

Image Compressor

Compress images by adjusting quality to reduce file size without losing visual clarity.

Open tool

Image Cropper

Crop images with preset aspect ratios like 1:1, 16:9, and 4:3 using a visual editor.

Open tool