Zuletzt aktualisiert: 10. August

<span aria-hidden="true" id="how-to-convert-webp-to-png"></span> <span aria-hidden="true" id="webp-in-png-umwandeln"></span> <span aria-hidden="true" id="so-konvertieren-sie-webp-in-png"></span>

# WebP in PNG umwandeln

![Tim Koschützki](/assets/images/teammates/avatar-tim-kos-1.jpg?dpl=dpl_AkBKiiEcd5MPUBn4NARw15mr6FeE)

**Tim Koschützki**

Mitgründer · Berlin, Deutschland · Bio anzeigen

[](https://x.com/tim%5Fkos)[](https://github.com/tim-kos)

WebP ist eine gute Wahl 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 Ausgabe und unterstützt Transparenz.

Die Umwandlung von WebP in PNG verbessert nicht die Qualität des Ausgangsbilds. Sie ändert nur das Container- und Kompressionsformat, und die resultierende PNG-Datei ist oft größer. Akzeptiert das Ziel WebP, ist es meist effizienter, die Originaldatei zu behalten.

Diese Anleitung vergleicht vier praktische Methoden zur Umwandlung:

|Methode|Am besten geeignet für|Wichtigster Kompromiss|
|-|-|-|
|Browser|Einmalige Umwandlungen ohne Datei-Upload|Nutzt Client-Speicher und ist bei Batches umständlich|
|ImageMagick|Lokale Skripte und Kommandozeilen-Batches|Sie verwalten die Laufzeitumgebung und Ressourcengrenzen selbst|
|Sharp für Node.js|Umwandlung innerhalb einer Node.js-Anwendung|Ihre Anwendung übernimmt Skalierung und Job-Verwaltung|
|Managed API|Nutzer-Uploads und wiederholbare Produktions-Pipelines|Fügt eine externe Service-Abhängigkeit hinzu|

<span aria-hidden="true" id="before-converting"></span> <span aria-hidden="true" id="vor-der-umwandlung"></span> <span aria-hidden="true" id="vor-der-konvertierung"></span>

## Vor der Umwandlung

Prüfen Sie diese Punkte, bevor Sie ein Werkzeug wählen:

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

<span aria-hidden="true" id="convert-webp-to-png-in-a-browser"></span> <span aria-hidden="true" id="webp-im-browser-in-png-umwandeln"></span> <span aria-hidden="true" id="webp-im-browser-in-png-konvertieren"></span> <span aria-hidden="true" id="webp-in-png-im-browser-umwandeln"></span>

## WebP im Browser in PNG umwandeln

Der Bild-Decoder des Browsers und die Canvas API reichen für ein kleines, lokales Umwandlungstool aus. Die Datei muss das Gerät des Nutzers dabei nicht verlassen.

```html
<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 Umwandlungen. Große Bilder und Batches können erheblichen Browser-Speicher beanspruchen, und Canvas erhält die ursprünglichen Bildmetadaten nicht.

<span aria-hidden="true" id="convert-webp-to-png-with-imagemagick"></span> <span aria-hidden="true" id="webp-mit-imagemagick-in-png-umwandeln"></span> <span aria-hidden="true" id="webp-in-png-mit-imagemagick-umwandeln"></span> <span aria-hidden="true" id="webp-mit-imagemagick-in-png-konvertieren"></span>

## WebP mit ImageMagick in PNG umwandeln

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

```bash
magick input.webp output.png

```

Um alle WebP-Dateien im aktuellen Verzeichnis umzuwandeln:

```bash
magick mogrify -format png ./*.webp

```

`mogrify` erzeugt 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.

<span aria-hidden="true" id="convert-webp-to-png-in-nodejs"></span> <span aria-hidden="true" id="webp-in-nodejs-in-png-umwandeln"></span> <span aria-hidden="true" id="webp-in-nodejs-in-png-konvertieren"></span> <span aria-hidden="true" id="webp-in-png-in-nodejs-umwandeln"></span>

## WebP in Node.js in PNG umwandeln

[Sharp⁠](https://sharp.pixelplumbing.com/) ist eine praktische Option, wenn die Umwandlung Teil eines bestehenden Node.js-Dienstes ist:

```javascript
import sharp from 'sharp'

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

```

Validieren Sie im Anwendungscode die Eingabe, bevor Sie sie verarbeiten, und behandeln Sie Fehler, ohne unvollständige Ausgabedateien zu hinterlassen. Sie benötigen außerdem eine Warteschlange oder ein Nebenläufigkeitslimit, wenn viele Nutzer gleichzeitig Umwandlungen starten können.

<span aria-hidden="true" id="convert-webp-to-png-with-an-api"></span> <span aria-hidden="true" id="webp-mit-einer-api-in-png-umwandeln"></span> <span aria-hidden="true" id="webp-in-png-mit-einer-api-umwandeln"></span> <span aria-hidden="true" id="webp-mit-einer-api-in-png-konvertieren"></span>

## WebP mit einer API in PNG umwandeln

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

```jsonc
{
  "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 besonders praktisch, wenn die Umwandlung von WebP in PNG eine Stufe in einem größeren Upload- oder Bildverarbeitungs-Workflow ist.

<span aria-hidden="true" id="convert-webp-to-png-online"></span> <span aria-hidden="true" id="webp-online-in-png-umwandeln"></span> <span aria-hidden="true" id="webp-online-in-png-konvertieren"></span>

## WebP online in PNG umwandeln

Sie benötigen eine schnelle Umwandlung ohne ein lokales Tool einzurichten? [Wandeln Sie WebP in unserem kostenlosen Online-Tool in PNG um](/de/tools/webp-to-png.md) und laden Sie das Ergebnis in Ihrem Browser herunter. Das ist nützlich für einzelne Dateien, während der oben beschriebene API-Workflow besser für wiederholbare Produktionsverarbeitung geeignet ist.

<span aria-hidden="true" id="which-method-should-you-choose"></span>

## Welche Methode sollten Sie wählen?

Nutzen Sie den Browser für ein datenschutzfreundliches, einmaliges Hilfsprogramm. Nutzen Sie ImageMagick für Shell-Skripte und kontrollierte Server-Umgebungen. Nutzen Sie Sharp, wenn die Umwandlung ein kleiner Teil einer bestehenden Node.js-Anwendung ist. Nutzen Sie eine Managed API, wenn Uploads, Storage, Observability und zuverlässige Verarbeitung ebenso wichtig sind wie die Formatumwandlung selbst.

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

<span aria-hidden="true" id="automate-your-image-conversions"></span> <span aria-hidden="true" id="automatisieren-sie-ihre-bildumwandlungen"></span> <span aria-hidden="true" id="ihre-bildkonvertierungen-automatisieren"></span>

## Automatisieren Sie Ihre Bildumwandlungen

Wenn die Umwandlung von WebP in PNG Teil eines Upload- oder Medien-Workflows ist, [erstellen Sie ein kostenloses Transloadit-Konto](/c/signup/), um einen API-Schlüssel zu erhalten, diesen Workflow als Template zu speichern und Dateien zuverlässig mit Retries, Storage-Integrationen und Webhook-Benachrichtigungen zu verarbeiten.

<span aria-hidden="true" id="frequently-asked-questions"></span>

## Häufig gestellte Fragen

<span aria-hidden="true" id="does-converting-webp-to-png-improve-image-quality"></span>

### Verbessert die Umwandlung von WebP in PNG die Bildqualität?

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

<span aria-hidden="true" id="will-transparency-be-preserved"></span> <span aria-hidden="true" id="bleibt-die-transparenz-erhalten"></span>

### 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, ein Flattening oder andere Transformationen anwendet.

<span aria-hidden="true" id="why-is-the-png-larger-than-the-webp"></span>

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

PNG ist verlustfrei und besonders effektiv für 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.

<span aria-hidden="true" id="can-i-convert-webp-files-in-batches"></span> <span aria-hidden="true" id="kann-ich-webp-dateien-in-batches-umwandeln"></span> <span aria-hidden="true" id="kann-ich-webp-dateien-im-stapel-konvertieren"></span> <span aria-hidden="true" id="kann-ich-webp-dateien-stapelweise-umwandeln"></span>

### Kann ich WebP-Dateien in Batches umwandeln?

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.

[#webp](/de/blog/tags/webp.md)[#png](/de/blog/tags/png.md)[#image-conversion](/de/blog/tags/image-conversion.md)[#image-processing-service](/de/blog/tags/image-processing-service.md)

### 👩‍💻 Werden Sie Teil einer Community mit 20k+ Entwicklern

Abonnieren Sie unseren [monatlichen Newsletter EN (English)](/newsletters.md) und erhalten Sie direkte Links zu 3 exklusiven Tech-Beiträgen und 2 Produkt-Updates. Nicht mehr und nicht weniger.

Ihre E-Mail:

Zugang erhalten

## Datei-Uploads und Encoding leicht gemacht.

Transloadit vereinfacht das Dateihandling für Entwickler; Marken wie Coursera und The New York Times vertrauen auf die Plattform. Wir stehen für eine zuverlässige API, erstklassigen Support und ein starkes Engagement für Open Source; Projekte wie [Uppy⁠](https://uppy.io) und [tus⁠](https://tus.io) setzen Standards in der Dateiverarbeitung.

[Registrieren](/c/)[Demo buchen](https://survey.typeform.com/to/kRg47Xi5)

Keine Kreditkarte erforderlich

Jederzeit kündbar