Base64-Bildkodierer

Ziehen Sie Ihr Bild per Drag-and-Drop (JPG, PNG, SVG, WEBP) oder klicken Sie zum Hochladen. Das Tool generiert sofort den Base64-String, der als Daten-URI in CSS oder HTML verwendet werden kann.

Verwenden Sie die Base64-Kodierung für kleine Bilder wie Symbole, Logos und UI-Elemente (unter 5 KB). Dadurch entfallen HTTP-Anfragen für diese Assets, was die Leistung leicht verbessern kann. Für große Bilder sind externe URLs besser.

Verwenden Sie es als Hintergrundbild: background-image: url('data:image/png;base64,iVBORw0KGgo...'); Das Tool generiert automatisch dieses CSS-Snippet, das zum Kopieren bereit ist.

Verwenden Sie es als src-Attribut eines img-Tags: <img src='data:image/png;base64,iVBORw0KGgo...'/>. Das Tool generiert diesen HTML-Snippet für Sie.

Ja. Die Base64-Kodierung erhöht die Dateigröße im Vergleich zum binären Original um etwa 33 %. Dies ist ein Kompromiss: Sie speichern eine HTTP-Anfrage, aber die Daten sind größer. Bei sehr kleinen Bildern lohnt es sich, bei großen Fotos jedoch nicht.

Ja. Wechseln Sie in den Dekodiermodus, fügen Sie Ihre Base64-Zeichenfolge ein (mit oder ohne das Präfix data:image/...), und das Tool rendert das Bild und lässt Sie es als Datei herunterladen. Dies ist nützlich, um eingebettete Bilder aus HTML-Quellcode oder API-Nutzlasten zu extrahieren.

Ja, um etwa ein Drittel, da binär als Text dargestellt wird. Aus diesem Grund eignet es sich am besten für kleine Vermögenswerte, bei denen die Vermeidung einer Anfrage wichtiger ist als die Größe.

Nein. Die Kodierung und Dekodierung erfolgt vollständig in Ihrem Browser.