PNG zu WebP: Wie man PNG Bilder konvertiert und verkleinert

Zuletzt aktualisiert: June 27, 2026

PNG ist das richtige Format für scharfe Grafiken und Transparenz, aber seine Dateien sind groß – besonders bei fotografischen Inhalten. Die Konvertierung von PNG zu WebP behält die Schärfe und den Alpha-Kanal bei und reduziert gleichzeitig die Bytes dramatisch. Der Knackpunkt ist die korrekte Wahl zwischen verlustfrei (lossless) und verlustbehaftet (lossy)em WebP, da der richtige Modus vom Bildinhalt abhängt. Dieser Leitfaden behandelt beides mit real gemessenen Größen.

Kurzantwort: Soll man PNG zu WebP konvertieren?

Ja, für Web-Bilder – WebP behält die Transparenz und Schärfe von PNG bei nur einem Bruchteil der Größe. Wählen Sie den Modus basierend auf dem Inhalt:

Für ein einzelnes Bild verwenden Sie den Image Converter; für Stapelverarbeitung nutzen Sie cwebp. Die Entscheidungsgrundlage dahinter finden Sie in image formats explained.

Wie viel spart PNG zu WebP?

Es hängt vollständig davon ab, welchen WebP-Modus Sie wählen, da PNG verlustfrei ist und der Vergleich nicht Äpfel mit Äpfeln ist.

Zwei ehrliche Erkenntnisse aus diesen Zahlen. Erstens ist lossless WebP einer Fotografie immer noch groß (568 KB) – denn verlustfreie Kodierung kann das Rauschen in einem Foto nicht einfach wegwerfen. Wenn der Inhalt ein Foto ist, sollte es lossy WebP und kein lossless sein. Zweitens glänzt lossless WebP bei flachen Grafiken: Bei Screenshots und UI-Art ist es typischerweise 20–30% kleiner als PNG mit identischen Pixeln. Passen Sie den Modus an den Inhalt an.

Die gleiche Quelle für alle vier Formate zeigt, wo PNG im Verhältnis zu Alternativen steht:

Welche Bilder sollten als PNG bleiben?

Einige Bilder sollten überhaupt nicht konvertiert werden. Behalten Sie PNG, wenn es sich um ein Logo oder Icon handelt, das stattdessen SVG sein könnte (Vektorgrafiken sind kleiner und schärfer), oder wenn Sie an ein System liefern müssen, das spezifisch PNG erfordert – einige Druck-Pipelines, manche Legacy-Editoren und die meisten Design-Tool-Austauschverfahren erwarten PNG. Bei einem winzigen Icon (unter ~3 KB) ist die Konvertierung nicht den Komplexitätsaufwand der Pipeline wert; lassen Sie es als PNG. Die Entscheidungsgrundlage ist dieselbe wie in image formats explained: Konvertieren Sie PNG zu WebP, wenn die Bytes wichtig sind und das Ziel ein Webbrowser ist; behalten Sie PNG bei, wenn Kompatibilität oder eine Vektor-Alternative wichtiger sind.

Methode 1: Browser-Konverter

Für ein einzelnes Bild verwenden Sie den Imagic AI Image Converter: Laden Sie das PNG hoch, wählen Sie WebP, wählen Sie verlustfrei für Grafiken oder Qualität ~80 für Fotos und laden Sie es herunter. Squoosh eignet sich gut zum Vergleich von lossless vs lossy nebeneinander, bevor Sie sich festlegen.

Methode 2: cwebp Kommandozeile

## Lossless WebP (am besten für Grafiken, Screenshots, scharfen Text, transparente UI)
cwebp -lossless input.png -o output.webp

## Lossy WebP (am besten, wenn das PNG tatsächlich ein Foto ist)
cwebp -q 80 input.png -o output.webp

## Ein Ordner mit PNGs, verlustfrei, parallelisiert
mkdir -p out
ls *.png | xargs -P 4 -I {} cwebp -lossless {} -o out/{}.webp

-lossless ist das Schlüssel-Flag – ohne es verwendet cwebp standardmäßig lossy, was dünne Kanten verschmiert. Übergeben Sie immer -lossless für Grafiken und Screenshots.

Methode 3: Python (Pillow)

from PIL import Image
from pathlib import Path

def png_to_webp(src: Path, dest: Path, lossless: bool = True, quality: int = 80):
    with Image.open(src) as img:
        img.save(dest, "WebP", lossless=lossless, quality=0 if lossless else quality, method=6)

for f in Path("assets").glob("*.png"):
    # lossless für scharfe Grafiken; auf lossless=False wechseln für fotografische PNGs
    png_to_webp(f, Path("out") / f"{f.stem}.webp", lossless=True)

Wenn lossless=True ist, wird der Wert von quality ignoriert; bei lossy setzen Sie ihn auf ~80 für Fotos.

Behält WebP die Transparenz von PNG?

Ja. WebP unterstützt einen vollständigen Alpha-Kanal sowohl im lossy als auch im lossless Modus, sodass ein transparentes PNG zu einem transparenten WebP ohne zusätzlichen Aufwand wird. Dies ist der Hauptgrund, UI-Assets und Produkt-Ausschneidungen zu konvertieren: Sie behalten die Transparenz und verlieren die meisten Bytes. Details zur Transparenz finden Sie in how to make transparent images.

Wie dient man WebP mit einem PNG Fallback?

WebP-Unterstützung liegt bei ~98%, aber behalten Sie einen PNG Fallback für ältere Clients und E-Mails:

<picture>
  <source srcset="/img/icon.webp" type="image/webp">
  <img src="/img/icon.png" alt="Beschreibung" width="200" height="200" loading="lazy">
</picture>

Der Browser wählt den ersten unterstützten Typ; das PNG <img> ist der finale Fallback. Bei scharfen Grafiken sollten Sie width/height reservieren, damit sich das Layout nicht verschiebt. Sehen Sie im WebP converter guide nach, um das vollständige Fallback-Muster einschließlich AVIF zu erhalten.

Wann ist PNG zu WebP der falsche Schritt?

• E-Mail. Viele E-Mail-Clients ignorieren WebP. Behalten Sie für E-Mails PNG (oder JPEG).
• Wenn stattdessen ein JPEG benötigt wird. Wenn das PNG ein Foto für einen Marktplatz ist, der nur JPEG akzeptiert, konvertieren Sie zu JPEG und nicht zu WebP. Sehen Sie WebP to JPG.
• Ältere eingebettete Browser ohne WebP-Unterstützung – obwohl der <picture> Fallback dies abdeckt.
• Wenn das PNG bereits winzig ist. Ein 2KB Icon profitiert kaum von der Konvertierung; die Pipeline-Kosten sind nicht lohnenswert.

Häufige Fehler

• Verwendung von lossy WebP für scharfe Grafiken. Lossy verschmiert dünne Kanten und Text. Verwenden Sie -lossless für Screenshots und UI.
• Verwendung von lossless WebP für Fotos. Es bleibt groß, weil lossless fotografisches Rauschen nicht entfernen kann. Nutzen Sie lossy.
• Das Weglassen des PNG Fallbacks. Ältere Browser und E-Mails benötigen das PNG <img>.
• Vergessen, vorher zu skalieren. Ein 4000px WebP ist immer noch ein 4000px Download, egal welches Format.
• Behandlung von PNG als Fotoformat. Wenn das Bild ein Foto ist, war es wahrscheinlich ursprünglich JPEG/RAW – konvertieren Sie aus der richtigen Quelle.

Häufig gestellte Fragen

Wie viel spart die Konvertierung von PNG zu WebP?

Für fotografische Inhalte 25 bis 35 Prozent bei gleicher Qualität; für flache Grafiken mit Transparenz oft noch mehr. WebP unterstützt sowohl lossy als auch lossless Modi plus einen Alpha-Kanal, sodass es das abdeckt, was PNG tut, aber in kleinerer Größe.

Soll jedes PNG zu WebP werden?

Für die Web-Bereitstellung: Ja, mit einem PNG Fallback für sehr alte Browser. Behalten Sie das PNG Master, falls Sie es erneut bearbeiten müssen, da WebP lossy eine Generation von Kompression ist. Servieren Sie WebP über ein <picture> Element mit PNG Fallback.

Unterstützt WebP Transparenz?

Ja – WebP unterstützt einen vollständigen Alpha-Kanal, sodass transparente PNGs sauber konvertiert werden. Dies ist der Hauptgrund, WebP gegenüber JPEG für Grafiken mit Transparenz zu bevorzugen. Sehen Sie transparent images guide.

Was ist die Kommandozeilenkonvertierung?

cwebp -q 80 input.png -o output.webp. Das -q-Flag setzt die Qualität (80 ist der Web-Standard). Für lossless verwenden Sie -lossless. Batch mit einer Shell-Schleife oder ImageMagick. Sehen Sie WebP converter guide.

Unterstützt WebP Animation?

Ja – WebP unterstützt animierte Bilder, die kleiner sind als entsprechende animierte GIFs. Für kurze Loops ist animiertes WebP eine moderne Alternative zu GIF. Bei längeren Animationen ist Video (MP4) immer noch kleiner und besser.

Soll ich PNG zu WebP lossy oder lossless konvertieren?

Lossy für Fotos (viel kleiner, unsichtbarer Verlust bei Qualität 80); lossless für Grafiken, Text und Masters, bei denen jedes Pixel exakt sein muss. WebP unterstützt beides. Ein häufiger Fehler ist die Konvertierung eines Logos zu lossy, was Artefakte an den scharfen Kanten hinzufügt – halten Sie Grafiken verlustfrei, konvertieren Sie Fotos lossy.

Was ist das cwebp Quality-Flag?

Das -q-Flag setzt die lossy Qualität auf einer Skala von 0 bis 100 – 80 ist der Web-Standard (unsichtbarer Verlust, ungefähr ein Viertel der Bytes von Qualität 100). Verwenden Sie stattdessen -lossless für Grafiken, bei denen jedes Pixel exakt sein muss. Höhere Qualität bedeutet eine größere Datei mit abnehmendem sichtbarem Nutzen; 80 ist der praktische Sweet Spot für die Web-Bereitstellung von Fotos.

Beschleunigt die Konvertierung von PNG zu WebP meine Seite?

Ja, messbar – WebP ist 25 bis 35 Prozent kleiner als PNG für denselben Inhalt, sodass Seiten mit vielen Grafiken schneller laden und LCP verbessert wird. Die Einsparung kumuliert sich über eine Seite mit Dutzenden von Icons oder Grafiken. Servieren Sie WebP mit einem PNG Fallback, damit ältere Browser die Bilder immer noch rendern können, und Sie erhalten die Geschwindigkeit, ohne Kompatibilität zu verlieren.

Bildnachweise

• Vergleich von PNG zu WebP und Größenbalkendiagramm – erstellt vom Autor anhand eines E-Commerce-Fotos (Pexels #16675632, Foto von Mikael Blomkvist), um reale gemessene Einsparungen von PNG zu WebP zu zeigen.