Bild zu Base64 — Kostenlos Online
Konvertieren Sie beliebige Bilder in Base64-Strings für CSS oder HTML.
Who uses the Bild zu Base64?
- Frontend-Entwickler, die kleine Icons in CSS einbetten, um zusätzliche HTTP-Anfragen zu eliminieren.
- E-Mail-Entwickler, die Logobilder in HTML-E-Mails einbetten, die externe Ressourcen blockieren.
- API-Integratoren, die Bilddaten in JSON-Request-Bodies senden, die eine String-Kodierung erfordern.
How the Bild zu Base64 works
Laden Sie Ihre Bilddatei über die Dateiauswahl hoch oder ziehen Sie sie per Drag & Drop in den Toolbereich.
Die Base64-Zeichenkette wird sofort im Ausgabe-Textbereich generiert.
Klicken Sie auf „Base64 kopieren“, um den vollständigen Data-URI (data:image/png;base64,...) in Ihre Zwischenablage zu kopieren, zur Verwendung in HTML-src-Attributen oder CSS-Hintergründen.
Wenn Sie nur das reine Base64 ohne das Data-URI-Präfix benötigen, löschen Sie manuell alles bis einschließlich des ersten Kommas, bevor Sie es verwenden.
Tips & tricks
- Die Kopieren-Schaltfläche kopiert immer den vollständigen Data-URI (mit dem Präfix „data:image/...;base64,“) — es gibt keine separate Schaltfläche nur für den reinen Base64-String.
- Base64 fügt etwa 33% zur Dateigröße hinzu — dieses Tool eignet sich am besten für kleine Icons und Bilder unter etwa 10 KB, nicht für große Fotos.
- Es kann jeweils nur ein Bild verarbeitet werden — es gibt keine Stapelkonvertierung für mehrere Dateien.
- Der Ausgabe-Textbereich zeigt den vollständigen Data-URI als reinen Text — Sie können auch manuell nur einen Teil davon auswählen und kopieren, wenn Sie nicht die vollständige Ausgabe der Kopieren-Schaltfläche verwenden möchten.
Frequently Asked Questions
Warum sollte ich ein Bild als Base64 statt einer Bilddatei einbetten?
Das Einbetten von Bildern als Base64 in HTML oder CSS eliminiert eine HTTP-Anfrage für dieses Bild, was die Leistung für kleine Icons und kritische Bilder oberhalb des sichtbaren Bereichs verbessern kann. Dies ist besonders nützlich in HTML-E-Mails, bei denen externe Bilder blockiert werden könnten.
Um wie viel größer ist ein Base64-Bild im Vergleich zur Originaldatei?
Die Base64-Kodierung fügt etwa 33% Overhead hinzu. Ein 10-KB-PNG wird zu ~13,3 KB als Base64. Bei großen Bildern überwiegt dieser Overhead den Vorteil, eine HTTP-Anfrage zu sparen — verwenden Sie Base64 nur für Bilder unter 10 KB.
Kopiert die Kopieren-Schaltfläche nur das reine Base64 oder den vollständigen Data-URI?
Die Base64-kopieren-Schaltfläche kopiert immer den vollständigen Data-URI, einschließlich des Präfixes „data:image/...;base64,“ — es gibt keine separate Schaltfläche nur für die reine Base64-Zeichenkette. Wenn Sie nur die reine Zeichenkette benötigen (z. B. für eine API-Nutzlast), kopieren Sie sie und löschen Sie manuell alles bis einschließlich des ersten Kommas.
Wie verwende ich ein Base64-Bild in einem HTML-img-Tag?
Verwenden Sie den vollständigen Data-URI als src: <img src="data:image/png;base64,iVBORw0KGgo..." alt="icon">. Der Browser dekodiert und rendert das Bild inline ohne externe Anfrage.
Wie verwende ich ein Base64-Bild in CSS?
Verwenden Sie es als Hintergrund: background-image: url("data:image/svg+xml;base64,..."). Dies ist besonders effektiv für SVG-Icons, da es die Stile eigenständig hält.
Welche Bildformate können in Base64 konvertiert werden?
Jedes Format, das Ihr Browser als Datei lesen kann, funktioniert: JPG, PNG, GIF, WebP und andere. Das Präfix des Ausgabe-Data-URIs spiegelt den tatsächlichen MIME-Typ der Quelldatei wider.
Is my data safe when using the Bild zu Base64?
Completely safe. The Bild zu Base64 processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
What image formats does the Bild zu Base64 support?
The Bild zu Base64 works with common image formats supported by your browser, including JPEG, PNG, WebP, and GIF. SVG support varies by tool. No format conversion plugin or driver is needed.
Does the Bild zu Base64 work with large image files?
Yes. The Bild zu Base64 processes files entirely in your browser using the Canvas API. Very large files (over 20 MB) may take a few extra seconds on older or lower-powered devices. Closing other tabs can free up memory for better performance.