Loading...
Loading...
Ziehe ein JPG, PNG, WebP, GIF oder SVG hinein, um eine Base64-Daten-URL mit kopierbaren Snippets für CSS, HTML und Markdown zu erhalten — oder füge eine Base64-Zeichenfolge ein, um sie zurück in ein herunterladbares Bild zu dekodieren.
Base64 ist eine Möglichkeit, binäre Daten — wie ein Bild — nur mit druckbaren ASCII-Zeichen darzustellen. Die Daten-URL-Form (eine Zeichenkette, die mit data:image/png;base64,... beginnt) ermöglicht es Ihnen, ein ganzes Bild direkt in HTML, CSS, JSON, Markdown, eine E-Mail-Signatur oder eine Serverantwort einzufügen, ohne dass eine separate Datei erforderlich ist. Die Kodierung ist verlustfrei: Das Dekodieren des Base64 ergibt genau die gleichen Bytes, die eingegeben wurden. Der Nachteil ist die Größe — Base64 benötigt etwa 33 % mehr Zeichen als das zugrunde liegende Binärformat, sodass ein 100 KB PNG ungefähr 134 KB Base64-Text wird. Das macht es ideal für winzige Icons, Inline-SVGs und einmalige Snippets, und eine schlechte Wahl für große Hero-Bilder. Dieses Tool kodiert jedes Bild, das Sie hineinziehen, und dekodiert jede Base64-Zeichenkette zurück in ein herunterladbares Bild, wobei die gesamte Arbeit in Ihrem Browser erledigt wird.
Verwenden Sie Bild → Base64, um ein Bild zu kodieren, das Sie auf der Festplatte haben. Verwenden Sie Base64 → Bild, um eine Zeichenkette zu dekodieren, die Sie von einer Daten-URL, einer API-Antwort oder einer CSS-Datei kopiert haben.
Zum Kodieren ziehen Sie ein JPG, PNG, WebP, GIF, SVG, BMP, ICO oder AVIF in den Upload-Bereich oder klicken Sie, um von Ihrem Gerät auszuwählen. Das Bild wird oben auf der Ergebniskarte angezeigt.
Fünf paste-bereite Snippets werden generiert: die vollständige Daten-URL, das rohe Base64 (kein Präfix), CSS background-image, HTML <img>-Tag und Markdown-Bild. Klicken Sie auf Kopieren für das, was Sie möchten.
Wechseln Sie zu Base64 → Bild, fügen Sie entweder eine vollständige Daten-URL oder den rohen Base64-Teil ein. Das Tool fügt automatisch kurze Zeichenfolgen auf und geht davon aus, dass es sich um PNG handelt, wenn das Präfix fehlt — klicken Sie auf Dekodieren, um eine Vorschau anzuzeigen.
Sobald dekodiert, zeigt die Vorschaukarte die Bildabmessungen und eine geschätzte Dateigröße an. Klicken Sie auf Herunterladen, um die ursprünglichen Bytes mit der richtigen Erweiterung wieder auf die Festplatte zu speichern.
1. Der FileReader.readAsDataURL() des Browsers liest die Bilddatei als Binärdaten. 2. Es gruppiert die Bytes in Blöcke von 3 (24 Bit) und kodiert jeden Block als 4 ASCII-Zeichen neu. 3. Das 64-Zeichen-Alphabet besteht aus A-Z, a-z, 0-9, plus '+' und '/' (mit '=' für Padding). 4. Die Ausgabe wird mit 'data:<mime>;base64,' vorangestellt, um sie zu einer verwendbaren Daten-URL zu machen. 5. Das Dekodieren kehrt jeden Schritt um: Präfix entfernen, URL-sichere Varianten normalisieren, auf ein Vielfaches von 4 auffüllen. 6. Die dekodierten Bytes werden in einem Blob verpackt und über createObjectURL bereitgestellt — oder einfach direkt als Daten-URL verwendet.
Der 33 %ige Größenaufwand ist in die Mathematik eingebaut: 3 Bytes Binärdaten werden zu 4 Bytes ASCII, ein Verhältnis von 4/3. Das ist ein harter Boden — es gibt keine komprimierte Base64-Variante, die weit verbreitet ist. Das MIME-Präfix in einer Daten-URL ist kein optionales Dekor: Browser, Markdown-Renderer und E-Mail-Clients verwenden es, um zu entscheiden, wie die Bytes gerendert werden. Wenn Sie rohes Base64 ohne 'data:image/...' Präfix einfügen, geht dieses Tool standardmäßig von PNG aus, was eine sichere Vermutung für Screenshots und Icons ist, aber eine beschädigte Vorschau erzeugen kann, wenn die Quelle tatsächlich JPG war. Die beste Praxis ist, das vollständige Daten-URL-Format beizubehalten, wann immer Sie kopieren oder einfügen.
Referenz: MDN — Daten-URLs
| Anwendungsfall | Bestes Snippet zum Kopieren |
|---|---|
Inline ein winziges Icon direkt in CSS | Kopieren Sie das CSS background-image Snippet. Vermeidet eine HTTP-Anfrage für Icons unter ~5 KB. Funktioniert gut für Spinner, Häkchen, Sprite-ähnliche Icons. |
Ein Bild in eine JSON- oder REST-API-Antwort einbetten | Kopieren Sie das Daten-URL-Snippet. Der Empfänger kann es direkt in <img src> oder einen CSS-Hintergrund einfügen. Häufig für Chat-Apps, Screenshots und Avatar-Uploads. |
Fügen Sie einen Screenshot in einen Markdown-Blogbeitrag oder ein GitHub-Problem ein | Kopieren Sie das Markdown-Bild-Snippet. Wird inline gerendert, ohne es auf ein CDN hochzuladen. Einige Markdown-Renderer (GitHub) lehnen sehr große Daten-URLs ab — halten Sie es klein. |
Dekodieren Sie eine Base64-Zeichenkette aus einer E-Mail oder API in eine verwendbare Datei | Wechseln Sie zu Base64 → Bild, fügen Sie die Zeichenkette ein, drücken Sie Dekodieren und dann Herunterladen. Funktioniert auch für rohes Base64 — standardmäßig PNG, wenn das MIME fehlt. |
Schneiden Sie das Motiv aus jedem Foto mit KI auf dem Gerät aus – kein Upload erforderlich.
Verkleinern Sie JPG-, PNG- oder WebP-Dateien in Ihrem Browser mit einem interaktiven Qualitätsregler.
Passen Sie Fotos im Browser an, filtern, drehen und zuschneiden — keine Uploads, kein Wasserzeichen.
Erstelle Memes und Screenshot-Collagen mit echten Ebenen — einfügen, ziehen, zuschneiden, beschriften, exportieren.
Zuletzt aktualisiert