DEVELOP.07 BASE64 IMAGE

Base64-Bildkonverter

Base64 bearbeiten oder einfügen und live prüfen; Bilder bleiben im Browser.

SOURCE

Bild hochladen

Bild hierher ziehen

oder JPG, PNG, GIF, WebP, SVG, BMP oder ICO auswählen

Maximal 10 MB · Datei bleibt in diesem Browser

Bild auswählen und sofort kodieren

BASE64

Base64-Code

Warte auf Bild oder Base64-CodeLokale Verarbeitung mit FileReader und Data URI · kein Upload oder Speichern

§ 01

Ein klarer Ablauf zum Kodieren und Dekodieren

Inhalt hinzufügen

Data URI oder Raw Base64 einfügen oder ein Bild ablegen, um den aktuellen Inhalt zu ersetzen.

Vorschau prüfen

Die rechte Seite analysiert den Inhalt, entfernt Leerzeichen, repariert Padding und erkennt gängige Bildformate.

Kopieren oder laden

Vorschau, Abmessungen und Größe prüfen und anschließend den Code kopieren oder das Bild laden.

§ 02

Base64 ändert die Darstellung, nicht die Pixel

Base64 bildet 6-Bit-Gruppen von Bilddaten auf druckbare Zeichen ab und macht sie in JSON, HTML oder CSS nutzbar. Es ist keine Kompression und mindert die Qualität nicht.

Der Preis ist etwa ein Drittel mehr Umfang. Kleine Symbole lassen sich einbetten; große Bilder vergrößern das Dokument und verlieren unabhängiges Caching.

§ 03

Eingaben und Einsatzbereiche in beide Richtungen

Richtung

Eingabe

Geeignet für

Bild zu Base64

JPG, PNG, GIF, WebP, SVG, BMP, ICO

Web, API-JSON, Ein-Datei-Berichte

Base64 zu Bild

Data URI oder Raw Base64

API-Ausgaben prüfen, Ressourcen wiederherstellen, MIME prüfen

§ 04

Data URI für kleine, stabile Ressourcen verwenden

Eine Data URI verbindet MIME-Typ und Base64-Daten zu einer direkt nutzbaren Adresse. Die vollständige URI eignet sich für Bildattribute, Raw Base64 für APIs mit separatem MIME-Feld.

Als Faustregel nur Symbole oder Dekorationen von wenigen KB einbetten. Wiederverwendete oder größere Bilder gehören meist an eine normale URL.

§ 05

Bilder im Code in Base64 umwandeln

const dataUri = await new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onload = () => resolve(reader.result);
  reader.onerror = reject;
  reader.readAsDataURL(file);
});

§ 06

Häufige Fragen

Q1Kann Raw Base64 ohne Data-URI-Präfix angezeigt werden?

Ja. PNG-, JPEG-, GIF-, WebP- und SVG-Signaturen werden erkannt; bei unbekannter Signatur wird der Ersatz-MIME-Typ verwendet.

Q2Warum wird Base64 größer?

Vier Textzeichen stellen drei Originalbytes dar. Der Inhalt wächst daher um etwa ein Drittel, zuzüglich eines kleinen Präfixes.

Q3Verringert die Umwandlung die Qualität?

Nein. Die Originalbytes werden gelesen und nur ihre Darstellung geändert; es wird weder neu skaliert noch komprimiert.

Q4Werden Bilder hochgeladen oder Codes gespeichert?

Nein. Lesen, Prüfen, Vorschau und Download finden in der aktuellen Browserseite statt.

Q5Warum wird eine Base64-Zeichenfolge nicht angezeigt?

Sie kann abgeschnitten sein, unerlaubte Zeichen enthalten, einen falschen MIME-Typ nennen oder kein dekodierbares Bild darstellen.