Bild zu Base64
Konvertieren Sie Bilder in Base64-Text.
Bilder in Base64 für Webentwicklung konvertieren
Base64 ist ein Kodierungssystem, das Binärdaten (wie Bilder) in eine ASCII-Textzeichenkette umwandelt. Dies ermöglicht das direkte Einbetten von Bildern in HTML-Code, CSS-Stylesheets oder JavaScript-Dateien, ohne eine separate externe Datei zu benötigen. Es ist besonders nützlich für kleine Icons, Logos und UI-Elemente, die vom Inline-Laden profitieren und eine zusätzliche HTTP-Anfrage an den Server eliminieren.
Die Base64-Kodierung erhöht die Datengröße um etwa 33% im Vergleich zur ursprünglichen Binärdatei. Aus diesem Grund wird ihre Verwendung hauptsächlich für kleine Bilder (unter 10 KB) empfohlen. Für größere Bilder ist es in der Regel effizienter, sie als separate Dateien bereitzustellen und den Browser-Cache zu nutzen. Data-URIs mit Base64 können in src-Attributen von HTML-Bildern, in CSS-background-image-Eigenschaften und überall dort verwendet werden, wo eine URL akzeptiert wird.
Unser Tool konvertiert jedes Bild sofort in Ihrem Browser in Base64. Es wird nichts auf einen Server hochgeladen. Sie erhalten drei Ausgabeformate: den reinen Base64-String, den vollständigen Data-URI mit MIME-Präfix für die direkte Verwendung und ein HTML-img-Tag, fertig zum Einfügen in Ihren Code. Jedes Format enthält eine Ein-Klick-Kopier-Schaltfläche für die Zwischenablage.
Häufig gestellte Fragen
Warum ist der Base64-Code größer als die Originaldatei?
Base64 kodiert jeweils 3 Bytes Binärdaten in 4 ASCII-Zeichen, was zu einer Vergrößerung von etwa 33% führt. Dies ist dem Kodierungssystem inhärent und der Preis für die Umwandlung von Binärdaten in Klartext.
Wann sollte ich Bilder in Base64 verwenden?
Es ist ideal für kleine Bilder wie Icons (unter 10 KB), HTML-E-Mails, Offline-Anwendungen oder wenn Sie die Anzahl der HTTP-Anfragen reduzieren möchten. Für große Bilder ist es besser, sie als separate Dateien bereitzustellen.
Kann ich den Data-URI in CSS verwenden?
Ja. Sie können den vollständigen Data-URI in der CSS-Eigenschaft background-image verwenden, zum Beispiel: background-image: url(data:image/png;base64,...). Dies ist nützlich für Hintergründe, Sprites und Dekorationen, die kein externes Laden erfordern.