Wandeln Sie PNG-Bilder mit der Canvas-API im Browser in WebP um. PNG ist verlustfrei und oft größer als WebP bei fotografischem oder verlaufsreichem Inhalt; erneutes Kodieren als WebP mit einstellbarer Qualität kann die Dateigröße fürs Web verringern.
So funktioniert es
Das Tool liest Ihre lokale .png-Datei mit FileReader, dekodiert sie in ein HTMLImageElement, zeichnet Pixel auf eine Offscreen-Canvas und exportiert mit canvas.toDataURL('image/webp', quality). Alpha-Transparenz wird beim Zeichnen auf einen undurchsichtigen Hintergrund zusammengesetzt—typisches Browserverhalten beim Abflachen von PNG nach WebP.
Wann Sie es nutzen
- UI-Screenshots oder Icons für schnellere Seitenladung komprimieren
- WebP-Qualitätseinstellungen vor einer Batch-Umwandlung prüfen
- Ein einzelnes Asset umwandeln, wenn Desktop-Tools fehlen
Einschränkungen
Verlustfreie PNG-Transparenz und Farbprofile bleiben nicht erhalten. Animiertes PNG (APNG) wird nicht unterstützt. Sehr große Bilder können Browser-Speichergrenzen treffen. Die Encoder-Qualität hängt von der eingebauten WebP-Unterstützung des Browsers ab.
Beispiel
Geben Sie beispielsweise die Standard-Beispielwerte im Formular ein und vergleichen Sie die Ausgabe mit einer bekannten Referenz; ändern Sie jeweils nur einen Eingabewert, um die Wirkung zu sehen.