Image to Base64
Verwandeln Sie ein Bild in eine Data-URL, die Sie direkt in CSS oder HTML einfügen können.
Oder eine Datei wählen. Sie wird in diesem Tab verarbeitet und nie hochgeladen — deshalb funktioniert das Werkzeug auch mit Fotos weit jenseits jeder Upload-Grenze.
Datei wählenKodiert ein Bild als Data-URL, sodass es ohne separaten Request in einem Stylesheet, einem HTML-Dokument oder einem JSON-Payload leben kann. Sinnvoll für ein kleines Icon, das sonst einen Round Trip kosten würde; nicht sinnvoll für ein Foto, da Base64 die Bytes um ein Drittel aufbläht und das Ergebnis nicht separat vom Dokument gecacht werden kann.
So arbeitet es
- Die Datei wird in Ihrem Browser gelesen und kodiert; es wird nichts hochgeladen.
- Die Ausgabe ist standardmäßig eine vollständige data:-URL oder der rohe Base64-Payload, wenn Sie diese Option deaktivieren.
- Base64 macht jede Datei etwa 33% größer – das ist der Preis für die Verwendung nur text-sicherer Zeichen.
Wohin Ihre Daten gehen
Nirgendwohin. Dieses Werkzeug läuft vollständig in Ihrem Browser: Der eingefügte Text wird von der Seite verarbeitet und weder an einen Server übertragen noch protokolliert.
Kostet ein Lauf Punkte, wird eine einzeilige Zusammenfassung in Ihrem eigenen Verlauf gespeichert, damit Sie ihn wiederfinden. Festgehalten wird die Form des Laufs — Größen, Anzahlen, die abgefragten Werte — nie der eingefügte Inhalt.
Was es kostet
Bis 512.0 KB pro Lauf kostenlos und ohne Konto. Darüber kostet ein Lauf 1 Punkte und wird in Ihrem Verlauf gespeichert.
Punkte gibt es für die Registrierung, den täglichen Check-in, Kommentare und ein vollständiges Profil.
So funktionieren PunkteHäufige Fragen
- Wann lohnt sich das Inlining eines Bildes wirklich?
- Unter etwa 2–4KB: ein Icon, ein kleines Logo, ein Hintergrundmuster. Darunter überwiegt der gesparte Round Trip die 33%ige Vergrößerung. Darüber machen Sie das Dokument größer und nicht cachebar, um einen Request zu sparen, den HTTP/2 ohnehin multiplexen würde.
- Wie verwende ich das Ergebnis in CSS?
- background-image: url("data:image/png;base64,…") – behalten Sie die gesamte data:-URL einschließlich Präfix bei. In HTML kommt sie direkt in das src-Attribut eines img-Tags.
- Warum ist meine Data-URL so lang?
- Weil sie die gesamte Datei als Text plus ein Drittel darstellt. Eine 40KB-PNG wird zu etwa 54KB Zeichen. Das ist normal und der Grund, nur kleine Bilder zu inlinen.
Das Open Source dahinter
Dieses Werkzeug ist eine eigenständige Implementierung ohne fremde Bibliothek. dankogai/js-base64 (BSD-3-Clause) erledigt dieselbe Aufgabe als Bibliothek — wer sie im eigenen Programm braucht, fängt dort an, statt eine Webseite aufzurufen.
dankogai/js-base64Auch bekannt als
- Bild zu Base64
- Base64 Bild Encoder
- Data URL Generator
- PNG zu Base64
- Bild Base64 konvertieren