Bild in Base64
Wandle eine Bilddatei in einen Base64-String zum Kopieren um, mit fertigen HTML- und CSS-Snippets.
Bild in Base64 kodiert eine Bilddatei als Base64-Text, damit sie als reiner Text gespeichert oder versendet werden kann, zum Beispiel in JSON, einer HTML-Seite oder einer CSS-Datei. Der String wird aus den Original-Bytes der Datei erstellt, das Bild wird also weder neu komprimiert noch verändert. Das Tool zeigt die Zeichenzahl an und liefert dir außerdem ein HTML-img-Tag und eine CSS-background-image-Regel, die das komplette Bild enthalten.
Anleitung: Bild in Base64
- 1
Bild öffnen
Zieh eine beliebige Bilddatei hierher, wähle sie aus oder füge sie ein. Kleine Bilder wie Icons eignen sich am besten.
- 2
Base64-String erhalten
Der String erscheint sofort, zusammen mit seiner Länge in Zeichen und seiner ungefähren Größe.
- 3
Kopieren, was du brauchst
Klicke auf „Base64 kopieren“ für den reinen String oder nutze „HTML kopieren“ oder „CSS kopieren“ für ein fertiges Snippet.
- 4
In deinen Code einfügen
Füge den String in dein JSON, HTML, CSS oder Skript ein.
Funktionen
- Byte-genaue Kodierung
- Die Originaldatei wird so kodiert, wie sie ist, ohne neue Kompression oder Qualitätsänderung.
- Angaben zur Größe
- Sieh die Zeichenzahl und die ungefähre Größe des Strings, bevor du ihn verwendest.
- HTML- und CSS-Snippets
- Kopiere ein img-Tag oder eine background-image-Regel, in der die komplette Data-URI bereits enthalten ist.
- Lokal kodiert
- Die Datei wird in deinem Browser gelesen und kodiert und nie hochgeladen.
Fragen
Wofür wird Base64 bei Bildern verwendet?
Base64 wandelt binäre Bilddaten in reine Textzeichen um. Entwickler nutzen das, um kleine Bilder direkt in HTML, CSS, JSON oder E-Mail-Vorlagen einzubetten, sodass keine separate Bilddatei geladen werden muss.
Warum ist der Base64-String größer als die Bilddatei?
Base64 braucht für je 3 Bytes 4 Textzeichen, das Ergebnis ist also etwa 33 % größer. Aus einem Bild mit 30 KB werden rund 40 KB Text.
Was ist der Unterschied zwischen Base64 und einer Data-URI?
Base64 ist nur der kodierte Text. Eine Data-URI fügt ein Präfix wie data:image/png;base64, hinzu, damit Browser den Dateityp kennen. Dieses Tool liefert den reinen String, „Bild in Data-URI“ die vollständige Version.
Sollte ich große Bilder in Base64 umwandeln?
Meistens nicht. Base64 eignet sich am besten für kleine Bilder wie Icons. Große Fotos machen dein HTML oder CSS deutlich schwerer, und der Browser kann das Bild nicht als eigene Datei zwischenspeichern.
Wird mein Bild beim Kodieren verändert?
Nein, die Original-Bytes werden kodiert. Einzige Ausnahme sind HEIC-Fotos vom iPhone: Sie werden zuerst in PNG umgewandelt, weil die meisten Browser HEIC nicht anzeigen können.