WebP in Base64 umwandeln - kostenlos, sofort, im Browser
WebP zu Base64 Konverter
Bis zu 10 MB. Nichts wird hochgeladen – die Datei verlässt Ihr Gerät nie.
Verwenden Sie dies in einem <img src>-Attribut oder in CSS url().
Ohne das data:-Präfix – für JSON-Nutzlasten und APIs.
Ihre Dateien bleiben privat
Diese Umwandlung läuft vollständig in Ihrem Browser. Das Bild wird nie hochgeladen, nichts von dem, was Sie hier kodieren, erreicht unseren Server oder sonst jemanden.
Wissenswertes zur Umwandlung von WebP in Base64
WebP ist ohnehin das kompakte Format. Eine Datei, die als PNG 40 KB groß wäre, landet als WebP oft bei etwa 15 KB – die 33 %, die Base64 hinzufügt, schmerzen in absoluten Zahlen also weniger als bei jedem anderen Format. Das macht WebP zu einem ungewöhnlich guten Kandidaten fürs Einbetten – mit einem Haken, der nichts mit der Größe zu tun hat.
So wandeln Sie WebP in Base64 um
- 1 Legen Sie Ihre .webp-Datei im Upload-Bereich ab.
- 2 Die kodierten Formen erscheinen sofort, zusammen mit der Größe vorher und nachher.
- 3 Kopieren Sie die passende Form: Data-URI, reiner String oder CSS-Regel.
Einbetten nimmt Ihnen den Fallback
Der übliche Weg, WebP auszuliefern, ist ein picture-Element, das zuerst WebP und dann ein JPG oder PNG anbietet, sodass jeder Browser nimmt, was er versteht. Eine Data-URI kann das nicht: Sie ist eine einzige Zeichenkette mit einem einzigen Medientyp, und ein Browser, der WebP nicht dekodieren kann, zeigt schlicht nichts. Die Unterstützung ist heute sehr breit, im offenen Web beißt das also selten – wohl aber in E-Mail-Programmen, in älteren eingebetteten Browsern und in Desktop-Anwendungen, die HTML mit einer betagten Engine darstellen.
Wo es gut passt
Überall dort, wo Sie die Laufzeitumgebung kontrollieren und wissen, dass WebP dekodiert wird: ein internes Dashboard, ein Admin-Panel, eine Browser-Erweiterung, eine Electron-App, ein Designsystem für ein ausschließlich modernes Publikum. Dort bekommen Sie WebP-Kompression und keine zusätzliche Anfrage zugleich – besser wird Einbetten kaum. Auf einer öffentlichen Marketingseite, wo Bruchteile eines Prozents an Besuchern noch zählen, bevorzugen Sie ein picture-Element und eine gewöhnliche Datei.
Der größere Verlust bleibt das Caching
Weil WebP-Dateien klein sind, verlockt es dazu, viele davon einzubetten. Genau dort potenziert sich der zweite Kostenpunkt: Jedes eingebettete Bild lebt im Stylesheet, eine einzige geänderte CSS-Zeile entwertet also alle auf einmal, und der Besucher lädt den gesamten Satz erneut. Zehn kleine eingebettete Bilder können leicht schlechter sein als zehn zwischengespeicherte Dateien. Halten Sie die Zahl niedrig, jedes Einzelne wirklich winzig, und lassen Sie den Rest gewöhnliche Dateien bleiben, die der Browser cachen und seitenübergreifend wiederverwenden kann.