So konvertieren Sie WebP in PNG

Tim Koschützki

Mitgründer · Berlin, Deutschland · Bio anzeigen

WebP eignet sich hervorragend für die Auslieferung von Bildern im Web, da es kleine Dateien bei guter visueller Qualität erzeugt. PNG ist oft das bessere Austauschformat, wenn ein Editor, ein Publishing-System oder ein älterer Workflow WebP nicht akzeptiert. Es bietet zudem vorhersehbare verlustfreie Ausgaben und unterstützt Transparenz.

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

Dieser Leitfaden vergleicht vier praxisnahe Konvertierungsmethoden:

Vor der Konvertierung

Prüfen Sie diese Punkte, bevor Sie sich für ein Tool entscheiden:

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

WebP im Browser in PNG konvertieren

Der Bild-Decoder des Browsers und die Canvas-API reichen für ein kleines, lokales Konvertierungstool aus. Die Datei muss dabei nicht das Gerät des Nutzers 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 Stapelverarbeitung können erheblichen Browser-Speicher beanspruchen, und Canvas erhält die ursprünglichen Bildmetadaten nicht.

WebP mit ImageMagick in PNG konvertieren

Für lokale Automatisierung oder einen selbst verwalteten Server 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 Speicher oder Festplattenplatz beanspruchen können.

WebP in Node.js in PNG konvertieren

Sharp⁠ ist eine praktische Option, wenn die Konvertierung Teil eines bestehenden Node.js-Dienstes ist:

import sharp from 'sharp'

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

Validieren Sie in Ihrem Anwendungscode die Eingabe, bevor Sie sie verarbeiten, und behandeln Sie Fehler so, dass keine unvollständigen Ausgabedateien zurückbleiben. Außerdem benötigen Sie eine Warteschlange oder ein Nebenläufigkeitslimit, falls viele Nutzer gleichzeitig Konvertierungen starten können.

WebP mit einer API in PNG konvertieren

Eine Managed API ist sinnvoll, wenn die Konvertierung Teil eines Benutzer-Upload-Ablaufs ist, wenn Dateien aus mehreren Quellen stammen oder wenn das Ergebnis gespeichert und an spätere Verarbeitungsschritte weitergegeben werden muss. Für einige wenige lokale Dateien sind die oben beschriebenen Kommandozeilen- und Node.js-Ansätze einfacher. Für eine produktive Medien-Pipeline kann eine API den operativen Aufwand rund um Uploads, Queues, Retries, temporäre Dateien und Skalierung abnehmen.

Der /image/resize Robot von Transloadit konvertiert eine hochgeladene WebP-Datei, indem format auf png gesetzt wird:

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

Dieselbe Assembly kann Dateien aus Cloud-Speicher importieren, mehrere Uploads verarbeiten und die PNG-Dateien an Ihr Ziel exportieren. Das macht Transloadit zu einer besonders praktischen Option, wenn die WebP-zu-PNG-Konvertierung eine Stufe in einem größeren Upload- oder Bildverarbeitungs-Workflow ist.

Sie können die WebP-zu-PNG-Pipeline in der Live-Demo ausprobieren EN (English), bevor Sie sie integrieren.

Welche Methode sollten Sie wählen?

Nutzen Sie den Browser für ein datenschutzfreundliches Einwegwerkzeug. 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 Managed API, wenn Uploads, Speicherung, Observability und zuverlässige Verarbeitung ebenso wichtig sind wie die Formatkonvertierung selbst.

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

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 beim Erstellen 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. Überprüfen Sie das Ergebnis, wenn Ihr Workflow einen Hintergrund, ein Flatten oder andere Transformationen anwendet.

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

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

Kann ich WebP-Dateien im Stapel konvertieren?

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