So nutzt du: Bild in Base64
- Unter „Bild → Base64“ kannst du ein Bild per Drag & Drop hinzufügen oder auswählen. Es wird lokal gelesen – es wird nichts hochgeladen.
- Kopiere die Daten-URI oder den vorgefertigten CSS-Hintergrund bzw. den <img>-Codeausschnitt. Deaktiviere das Häkchen bei „data: prefix“, wenn du nur den reinen Base64-Code benötigst.
- Bei SVGs solltest du auf URL-kodiert umsteigen – das ist meistens kürzer als Base64.
- Um es andersherum zu machen, öffne „Base64 → Bild“, füge eine Zeichenfolge ein und lade die entschlüsselte Datei herunter.
Was ist ein Bild-zu-Base64-Konverter?
Base64 ist eine Methode, binäre Daten ausschließlich mit 64 zulässigen Textzeichen (A–Z, a–z, 0–9, + und /). Durch die Konvertierung eines Bildes in Base64 kannst du es direkt in HTML, CSS, JSON oder eine E-Mail-Vorlage als Daten-URI einbetten, anstatt auf eine separate Datei zu verlinken:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…Der Teil vor dem Komma gibt den MIME-Typ an; der Rest ist die kodierte Datei. Browser behandeln sie genau wie eine Bild-URL, daher funktioniert sie in <img src>, CSS background-image, <link rel="icon"> und im Canvas-Code.
Der Größenaufwand von 33 %
Base64 speichert jeweils 3 Bytes der Datei als 4 Zeichen, sodass die kodierte Zeichenfolge etwa 33 % größer ist als das Original (zuzüglich des kurzen data: Präfix). Gzip oder Brotli auf deinem Server machen einen Teil davon wieder wett, aber die größeren Nachteile sind struktureller Natur: Ein eingebettetes Bild wird mit jeder HTML- oder CSS-Datei, die es enthält, erneut heruntergeladen, kann nicht eigenständig zwischengespeichert werden und macht dein Stylesheet – das das Rendern blockiert – schwerer.
Wann man Bilder einbinden sollte (und wann nicht)
- Gut geeignet: kleine Icons, Ladeanzeigen und UI-Sprites unter ein paar KB, Bilder in HTML-E-Mail-Signaturen, bei denen externe Bilder blockiert werden, HTML-Berichte als einzelne Datei und Test-Fixtures im Code.
- Ungeeignet: Fotos, Hero-Bilder und alles, was größer als etwa 10–20 KB ist. Stelle diese als normale Dateien mit Caching, Komprimierung und
loading="lazy". Verkleinere sie vorher mit dem Image Compressor.
SVG: URL-Kodierung ist besser als Base64
SVG ist bereits Text, daher brauchst du Base64 überhaupt nicht. Eine URL-kodierte Daten-URI wie data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'… escapet nur wenige Zeichen (<, >, #, %) und ist in der Regel 20–30 % kürzer als die Base64-Version – dabei bleibt sie lesbar und lässt sich besser mit gzip komprimieren. Dieses Tool bietet beides für SVG-Dateien. Wenn du viel mit SVG in CSS arbeitest, hilft dir auch das „SVG-zu-CSS“-Tool.
Base64 wieder in ein Bild dekodieren
Füge eine vollständige Daten-URI oder eine reine Base64-Zeichenkette ein (base64url mit - und _ funktioniert ebenfalls). Das Tool erkennt das tatsächliche Format anhand der „Magic Bytes“ der Datei – PNG, JPEG, GIF, WebP, AVIF, SVG, ICO oder BMP –, zeigt eine Vorschau mit den Abmessungen an und lässt dich die Datei mit der richtigen Dateiendung herunterladen. Für Base64, das kein Bild ist, nutze den allgemeinen Base64-Encoder/Decoder.
Auch gesucht als: base64-bild, data-uri, base64 in bild, png in base64, svg in data-uri, img src base64, css-hintergrund base64, base64-decoder-bild.
Passende Tools zu: Bild in Base64
- Favicon-Generator — Erstelle aus einem Logo, einem Buchstaben oder einem Emoji ein komplettes Favicon-Paket: eine „favicon.ico“-Datei in verschiedenen Größen, ein Apple-Touch-Icon, Android-/PWA-Icons, einen Webflow-Webclip, das Web-Manifest und die HTML-Tags zum Einfügen.
- URL Encode / Decode — Percent-encode text for safe use in URLs, decode encoded strings back to readable text, and break any URL down into its parts and query parameters.
- Barcode-Generator — Erstelle scanbare Barcodes für Produkte, Lagerbestände, Versand und Bibliotheken – die Prüfziffern werden automatisch berechnet, und du kannst eine gestochen scharfe SVG-Datei zum Ausdrucken oder eine PNG-Datei für Dokumente herunterladen.
- QR-Code-Scanner — Richte deine Kamera auf einen QR-Code oder lade ein Bild oder einen Screenshot hoch, der einen solchen enthält.
Häufige Fragen
Warum ist die Base64-Zeichenkette größer als mein Bild?
Wie verwende ich ein Base64-Bild in CSS?
url(): background-image: url("data:image/png;base64,…");. Der obige CSS-Ausschnitt ist bereit zum Einfügen – benenne einfach den Selektor um.Verbessert das Einbetten von Bildern als Base64 die Ladegeschwindigkeit der Seite?
Ist es sicher, hier private Bilder umzuwandeln?
Warum wird bei meinem eingefügten Base64-Code ein Fehler angezeigt?
url() Umschließungszeichen und Anführungszeichen automatisch.