So konvertieren Sie WebP in PNG

Tim Koschützki

Mitgründer · Berlin, Deutschland · Bio anzeigen

WebP ist eine gute Wahl für die Auslieferung von Bildern im Web, weil es kleine Dateien bei guter visueller Qualität erzeugen kann. PNG ist oft das bessere Austauschformat, wenn ein Editor, ein Publishing-System oder ein älterer Workflow WebP nicht akzeptiert. Außerdem bietet PNG eine vorhersehbare verlustfreie Ausgabe und unterstützt Transparenz.

Die Konvertierung von WebP in PNG verbessert die Qualität des Ausgangsbildes nicht. Sie ändert nur das Container- und Kompressionsformat, und die resultierende PNG-Datei ist häufig größer. Wenn das Ziel WebP akzeptiert, ist es meist effizienter, das Original beizubehalten.

Dieser Leitfaden vergleicht vier praxistaugliche Konvertierungsmethoden:

Vor der Konvertierung

Prüfen Sie diese Details, bevor Sie ein Tool auswählen:

• Transparenz: WebP und PNG unterstützen beide einen Alphakanal, aber Ihr Konvertierungsweg muss ihn erhalten.
• Animation: Animierte WebP-Dateien erfordern eine besondere Behandlung. Eine einfache Konvertierung erzeugt möglicherweise nur ein PNG-Einzelbild. Verwenden Sie APNG oder eine Folge von PNG-Dateien, wenn Sie jedes Einzelbild erhalten müssen.
• Metadaten: Konverter entfernen EXIF-Daten, ICC-Profile oder andere Metadaten unter Umständen standardmäßig. Testen Sie genau die Felder, die Ihr Workflow benötigt.
• Dateigröße: PNG nutzt verlustfreie Kompression, daher werden fotografische Bilder häufig deutlich größer.
• Nicht vertrauenswürdige Eingaben: Setzen Sie Limits für Abmessungen, Pixelanzahl, Arbeitsspeicher und Verarbeitungszeit durch, wenn Nutzer Bilder bereitstellen.

WebP im Browser in PNG konvertieren

Der Bilddecoder des Browsers und die Canvas API reichen für ein kleines, lokales Konvertierungstool aus. Die Datei muss das Gerät des Nutzers nicht verlassen.

<input id="image" type="file" accept="image/webp" />
<button id="convert" type="button">Convert to PNG</button>

<script type="module">
  const input = document.querySelector('#image')
  const button = document.querySelector('#convert')

  button.addEventListener('click', async () => {
    const [file] = input.files
    if (!file) return

    const bitmap = await createImageBitmap(file)
    const canvas = document.createElement('canvas')
    canvas.width = bitmap.width
    canvas.height = bitmap.height

    const context = canvas.getContext('2d')
    context.drawImage(bitmap, 0, 0)
    bitmap.close()

    const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'))
    if (!blob) throw new Error('The browser could not encode the image as PNG')

    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = file.name.replace(/\.webp$/i, '.png')
    link.click()
    URL.revokeObjectURL(link.href)
  })
</script>

Das eignet sich gut für gelegentliche Konvertierungen. Große Bilder und Stapel können viel Arbeitsspeicher im Browser beanspruchen, und Canvas erhält die ursprünglichen Bildmetadaten nicht.

WebP mit ImageMagick in PNG konvertieren

Für lokale Automatisierung oder einen Server, den Sie bereits verwalten, bietet ImageMagick einen kompakten Befehl:

magick input.webp output.png

So konvertieren Sie alle WebP-Dateien im aktuellen Verzeichnis:

magick mogrify -format png ./*.webp

mogrify erstellt in diesem Beispiel PNG-Dateien neben den Originalen. Konfigurieren Sie in der Produktion außerdem die Ressourcenrichtlinie von ImageMagick, damit unerwartet große oder fehlerhafte Bilder nicht den gesamten verfügbaren Arbeitsspeicher oder Speicherplatz belegen können.

WebP in Node.js in PNG konvertieren

Sharp⁠ ist eine praktische Option, wenn die Konvertierung in einen bestehenden Node.js-Dienst gehört:

import sharp from 'sharp'

await sharp('input.webp').png().toFile('output.png')

Validieren Sie im Anwendungscode die Eingabe vor der Verarbeitung und behandeln Sie Fehler so, dass keine unvollständigen Ausgabedateien zurückbleiben. Außerdem benötigen Sie eine Queue oder ein Limit für parallele Verarbeitung, wenn viele Nutzer gleichzeitig Konvertierungen starten können.

WebP mit einer API in PNG konvertieren

Eine verwaltete API ist sinnvoll, wenn die Konvertierung Teil eines Upload-Flows für Nutzer ist, wenn Dateien aus mehreren Quellen eintreffen oder wenn das Ergebnis gespeichert und an spätere Verarbeitungsschritte übergeben werden muss. Für wenige lokale Dateien sind die oben beschriebenen Ansätze mit Kommandozeile und Node.js einfacher. In einer Produktions-Pipeline für Medien kann eine API Ihnen den Betriebsaufwand rund um Uploads, Queues, Retries, temporäre Dateien und Skalierung abnehmen.

{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "converted": {
      "use": ":original",
      "robot": "/image/resize",
      "format": "png",
      "background": "none",
      "result": true
    }
  }
}

Dieselbe Assembly kann Dateien aus Cloud-Speicher importieren, mehrere Uploads verarbeiten und die PNGs an Ihr Ziel exportieren. Damit ist Transloadit eine besonders praktische Option, wenn die Konvertierung von WebP in PNG eine Stufe in einem größeren Workflow für Uploads oder Bildverarbeitung ist.

WebP online in PNG konvertieren

Sie brauchen schnell eine Konvertierung, ohne ein lokales Tool einzurichten? Konvertieren Sie WebP in unserem kostenlosen Online-Tool in PNG und laden Sie das Ergebnis in Ihrem Browser herunter. Das ist praktisch für einzelne Dateien, während sich der oben beschriebene API-Workflow besser für wiederholbare Verarbeitung in der Produktion eignet.

Welche Methode sollten Sie wählen?

Nutzen Sie den Browser für ein datenschutzfreundliches Werkzeug für einmalige Konvertierungen. Nutzen Sie ImageMagick für Shell-Skripte und kontrollierte Serverumgebungen. Nutzen Sie Sharp, wenn die Konvertierung ein kleiner Teil einer bestehenden Node.js-Anwendung ist. Nutzen Sie eine verwaltete API, wenn Uploads, Speicherung, Observability und zuverlässige Verarbeitung genauso wichtig sind wie die eigentliche Formatkonvertierung.

Testen Sie unabhängig von der gewählten Methode repräsentative transparente, fotografische, große und animierte Dateien. Diese Fälle decken die meisten Unterschiede zwischen Konvertern auf, bevor sie sich in der Produktion auswirken.

Bildkonvertierungen automatisieren

Wenn die Konvertierung von WebP in PNG Teil einer Upload- oder Medien-Pipeline ist, erstellen Sie ein kostenloses Transloadit-Konto, um einen API-Schlüssel zu erhalten, speichern Sie diesen Workflow als Template und verarbeiten Sie Dateien zuverlässig mit Retries, Storage-Integrationen und Webhook-Benachrichtigungen.

Häufig gestellte Fragen

Verbessert die Konvertierung von WebP in PNG die Bildqualität?

Nein. PNG speichert die decodierten Pixel ohne zusätzliche verlustbehaftete Kompression, kann aber keine Details wiederherstellen, die bei der Erstellung der WebP-Datei entfernt wurden.

Bleibt die Transparenz erhalten?

Das ist möglich. Beide Formate unterstützen Transparenz, und die obigen Beispiele erhalten den decodierten Alphakanal. Prüfen Sie das Ergebnis, wenn Ihr Workflow einen Hintergrund, eine Ebenenreduzierung oder andere Transformationen anwendet.

Warum ist die PNG-Datei größer als die WebP-Datei?

PNG ist verlustfrei und eignet sich besonders für Grafiken mit flächigen Farben. WebP kann verlustbehaftete Kompression nutzen, die bei Fotos in der Regel kompakter ist. Eine größere Ausgabedatei ist daher in vielen Fällen zu erwarten.

Kann ich WebP-Dateien stapelweise konvertieren?

Ja. ImageMagick kann ein Verzeichnis verarbeiten, Anwendungsbibliotheken können über eine kontrollierte Queue laufen, und eine API kann mehrere hochgeladene oder importierte Dateien in einer Pipeline verarbeiten.