Bild in Base64
Bilder in Base64-kodierte Zeichenfolgen umwandeln
Eingabebild
Bild auswählen oder hierher ziehen
Bilddateien bis zu 10 MiB. JPG, PNG, GIF, WebP, SVG und andere Bildformate.
Dateiinformationen
- Name
- —
- Größe
- 0 B
- MIME-Typ
- —
- Abmessungen
- —
Über die Base64-Kodierung
- Bilder ohne externe Dateien direkt in HTML, CSS oder JSON einbetten
- Nützlich für E-Mail-Vorlagen, Daten-URIs und API-Antworten
- Base64-Kodierung erhöht die Dateigröße um etwa 33%
- Am besten für kleine Bilder wie Symbole, Logos oder Vorschaubilder geeignet
Base64-Ergebnis
Laden Sie ein Bild hoch, um das Base64-Ergebnis zu sehen.
0 Zeichen
Laden Sie ein Bild hoch, um das Base64-Ergebnis zu sehen.
Anwendungsbeispiele
Die Beispiele werden zur Anzeige gekürzt. Die Kopierschaltflächen kopieren das vollständige HTML oder CSS.
Über den Konverter Bild in Base64
Unser kostenloser Konverter von Bild in Base64 wandelt Bilddateien in Base64-kodierte Zeichenfolgen um, die sich direkt in HTML, CSS, JavaScript oder JSON einbetten lassen. Laden Sie einfach ein Bild hoch oder ziehen Sie es hinein, und das Tool erzeugt sofort einen vollständigen Data-URI, den Sie in Ihrem Code verwenden können.
Base64-Kodierung wandelt binäre Bilddaten mithilfe eines Alphabets aus 64 Zeichen in ein Textformat um. So lassen sich Bilder inline in textbasierte Dokumente einbinden, und separate Anfragen für Bilddateien entfallen. Sie vergrößert die Datenmenge um etwa 33 %, doch bei kleinen Bildern wie Icons, Logos und Vorschaubildern lohnt sich das, weil weniger HTTP-Anfragen die Ladezeit der Seite verbessern.
Der Konverter verarbeitet Ihre Bilder vollständig im Browser mit der FileReader-API. Es werden keine Bilddaten auf einen Server hochgeladen, daher ist das Kodieren von firmeneigenen Grafiken, vertraulichen Screenshots oder anderen sensiblen Bildinhalten völlig unbedenklich. Das Tool unterstützt alle gängigen Bildformate bis zu einer Größe von 10 MB.
Hauptfunktionen
- Unterstützung für JPG, PNG, GIF, WebP, SVG und weitere Bildformate
- Dateiauswahl per Drag-and-drop oder Klick zum Hochladen
- Sofortige Umwandlung im Browser ohne Server-Upload
- Live-Bildvorschau neben der Base64-Ausgabe
- Vollständige Data-URI-Ausgabe mit MIME-Typ-Header
- Kopieren der gesamten Base64-Zeichenfolge in die Zwischenablage mit einem Klick
- Base64-Zeichenfolge als Textdatei herunterladen
- Anzeige der Dateiinformationen (Name, Größe, Typ)
- Sofort einsetzbare HTML- und CSS-Codebeispiele
- Maximale Dateigröße von 10 MB mit Formatprüfung
So verwenden Sie den Konverter Bild in Base64
- Bild hochladen: Klicken Sie auf den Upload-Bereich oder ziehen Sie eine Bilddatei hinein. Unterstützt werden unter anderem JPG, PNG, GIF und WebP bis 10 MB.
- Vorschau ansehen: Das Tool zeigt eine Vorschau Ihres hochgeladenen Bildes zusammen mit den Dateiinformationen (Name, Größe und Typ).
- Base64-Zeichenfolge kopieren: Klicken Sie auf die Schaltfläche Kopieren, um den vollständigen Data-URI in die Zwischenablage zu übernehmen und direkt in Ihren Code einzufügen.
- Als Text herunterladen: Klicken Sie auf die Schaltfläche Herunterladen, um die Base64-Zeichenfolge zur späteren Verwendung als Textdatei zu speichern.
- Codebeispiele nutzen: Orientieren Sie sich an den HTML- und CSS-Beispielen unter der Ausgabe, um das kodierte Bild in Ihr Projekt einzubinden.
- Leeren und weiteres Bild umwandeln: Klicken Sie auf die Schaltfläche X in der Dateiinfo-Karte, um das aktuelle Bild zu entfernen und eine neue Umwandlung zu starten.
Anwendungsfälle
- Icons in HTML einbetten: Wandeln Sie kleine Icons und Logos in Base64 um und binden Sie sie mit img-Tags und Data-URIs direkt in Ihr HTML ein, ohne zusätzliche HTTP-Anfragen.
- CSS-Hintergrundbilder: Kodieren Sie dekorative Bilder und verwenden Sie sie als Inline-Werte für background-image in CSS, um externe Dateiabhängigkeiten zu verringern.
- Gestaltung von E-Mail-Vorlagen: Betten Sie Bilder direkt in HTML-E-Mail-Vorlagen ein, damit sie auch dann angezeigt werden, wenn E-Mail-Programme externe Bilder blockieren.
- API- & JSON-Payloads: Nehmen Sie Bilddaten in JSON-API-Antworten oder -Anfragen auf, wenn keine Endpunkte für Datei-Uploads zur Verfügung stehen.
- Einzeldatei-Anwendungen: Erstellen Sie eigenständige HTML-Dateien, in denen alle Bilder als Base64 eingebettet sind, ideal für Dokumentationen, Berichte oder Offline-Tools.
- Konfigurationsdateien: Kodieren Sie kleine Bilder zur Aufnahme in Konfigurationsdateien, Umgebungsvariablen oder Infrastructure-as-Code-Vorlagen.
- Progressive Web Apps: Legen Sie kritische Bilder als Base64-Zeichenfolgen in Service Workern oder im lokalen Speicher ab, damit sie offline sofort dargestellt werden.
Häufig gestellte Fragen
Was ist die Base64-Kodierung für Bilder?
Die Base64-Kodierung wandelt binäre Bilddaten in eine ASCII-Textzeichenfolge um. Das Ergebnis lässt sich als Data-URI in HTML-img-Tags und CSS-Background-Eigenschaften verwenden oder in JSON-Payloads aufnehmen, sodass Bilder als reiner Text übertragen und gespeichert werden können.
Vergrößert die Base64-Kodierung die Dateigröße?
Ja, die Base64-Kodierung vergrößert die Datenmenge um etwa 33 %, weil für je 3 Bytes Binärdaten 4 Textzeichen verwendet werden. Deshalb wird das Einbetten per Base64 vor allem für kleine Bilder wie Icons und Logos empfohlen.
Wann sollte ich Base64-Bilder statt normaler Bilddateien verwenden?
Verwenden Sie Base64 für kleine Bilder (unter 10-20 KB), bei denen weniger HTTP-Anfragen von Vorteil sind, für E-Mail-Vorlagen, in denen externe Bilder blockiert werden können, oder wenn Sie eigenständige HTML-Dokumente benötigen. Für größere Bilder sind normale Dateiverweise effizienter.
Ist dieses Tool kostenlos?
Ja, dieser Konverter von Bild in Base64 ist vollständig kostenlos. Es gibt keine Begrenzung der Umwandlungen, keine Registrierung, und Ihre Ausgabe wird weder mit Wasserzeichen versehen noch eingeschränkt.
Sind meine Daten sicher?
Ja. Ihre Bilder werden vollständig in Ihrem Browser mit der JavaScript-FileReader-API verarbeitet. Es werden keine Bilddaten auf einen Server hochgeladen oder dort gespeichert, daher ist dieses Tool für sensible oder firmeneigene Bilder völlig unbedenklich.
Wie groß darf eine Datei maximal sein?
Dieses Tool unterstützt Bilder bis zu 10 MB. In der Praxis lohnt sich die Base64-Kodierung am meisten bei Bildern unter 20 KB. Größere Bilder werden besser als normale Dateien eingebunden, damit Ihr HTML oder CSS nicht unnötig aufgebläht wird.
Tipps und bewährte Vorgehensweisen
- Bilder zuerst optimieren: Komprimieren und verkleinern Sie Ihre Bilder, bevor Sie sie in Base64 umwandeln. Kleinere Quelldateien ergeben kürzere, effizientere Base64-Zeichenfolgen.
- Nur für kleine Bilder verwenden: Base64 eignet sich am besten für Icons, Logos und Vorschaubilder unter 10-20 KB. Bei größeren Bildern bieten externe Dateiverweise eine bessere Performance.
- Den vollständigen Data-URI kopieren: Die Ausgabe enthält das komplette Präfix data:image/[format];base64, und lässt sich daher ohne Änderung direkt in HTML oder CSS einfügen.
- Codebeispiele prüfen: Verwenden Sie die mitgelieferten HTML- und CSS-Beispiele als Vorlagen, um das Base64-Bild in Ihr Projekt einzubinden.
- Caching bedenken: In HTML oder CSS eingebettete Base64-Bilder werden zusammen mit dem Dokument zwischengespeichert, externe Bilder dagegen unabhängig davon. Wählen Sie den Ansatz, der am besten zu Ihrer Caching-Strategie passt.
- Zur Sicherung herunterladen: Speichern Sie die Base64-Textdatei über die Schaltfläche Herunterladen als Backup, besonders für Bilder, die in mehreren Projekten verwendet werden.