PNG oder WebP für deine Website? Ein praktischer Leitfaden

Ja, nutze WebP. 2026 ist das die ganze Antwort für Bilder auf einer Website, die du kontrollierst: Jeder Browser rendert WebP seit Jahren, die Dateien sind 25–35 % kleiner als das JPG oder PNG, das sie ersetzen, und an der Erfahrung deiner Besucher ändert sich nichts außer schneller ladenden Seiten. Die interessanten Fragen sind die operativen: Welche Bilder lohnen sich, wie liefert man WebP aus, ohne etwas kaputt zu machen, und wo gehören PNG und JPG weiterhin hin. Das deckt dieser Guide ab.

Was sich lohnt und was du in Ruhe lassen solltest

Nicht jedes Bild verdient den Aufwand. Der Entscheidungsbaum ist kurz:

Wandle zuerst die großen Brocken um. Hero-Bilder, Produktfotos, Artikel-Illustrationen — alles, was in Hunderten von Kilobytes gemessen wird. Ein 450-KB-JPG, das ein 300-KB-WebP wird, ist ein echter Gewinn, multipliziert mit jedem Besucher bei jedem Seitenaufruf. Produktraster und Galerien sind der Ort, wo sich das aufsummiert.

Wandle PNG-Grafiken mit Gewicht um. Screenshots, Diagramme und transparente UI-Bilder, die als PNG hochgeladen wurden, schrumpfen als verlustbehaftetes WebP dramatisch, und selbst verlustfreies WebP schlägt PNG um etwa ein Viertel. Das technische Warum steht in WebP vs. PNG.

Lass die kleinen Dateien in Ruhe. Ein 4-KB-Icon ist ein Rundungsfehler. Es umzuwandeln spart nichts Wahrnehmbares und kostet dich einen Schritt in der Pipeline. Die Regel: Wenn die Datei schon klein genug ist, dass du nie an sie gedacht hast, denk weiter nicht an sie.

Der Migrationspfad

1. Inventarisiere die Bilder auf den Seiten, die zählen — Homepage, Top-Landingpages, Produkt-Templates. Deine Analytics wissen, welche das sind.
2. Wandle die PNG- und JPG-Assets im Batch um. Zieh die Ordner in PNG zu WebP oder JPG zu WebP; beide laufen lokal in deinem Browser, verarbeiten ganze Ordner und geben ein ZIP zurück. Nichts verlässt deinen Rechner — wichtig, wenn die Assets Kundenarbeit sind.
3. Behalte die Originale. WebP ist im gängigen Modus verlustbehaftet. Deine PNG/JPG-Master bleiben die Quelle der Wahrheit für jede künftige Neukodierung.
4. Tausche die Referenzen in den Templates und lade neu hoch. Die Dateinamen bleiben bis auf die Endung erhalten, also deckt ein Suchen-und-Ersetzen von .png nach .webp in deinen Templates das meiste ab.

Wenn deine Website auf einem CMS läuft

Prüfe das, bevor du irgendetwas von Hand umwandelst. Modernes WordPress akzeptiert WebP-Uploads und erzeugt Untergrößen wie bei jedem anderen Bild, und viele Managed Hoster und CDNs können am Edge automatisch zu WebP umwandeln — dann ist die Migration eine Einstellungsseite, kein Dateivorgang. Manuelles Umwandeln bleibt der richtige Weg für statische Websites, handgebaute Templates und jedes CMS, dessen Medien-Pipeline älter als das Format ist.

Mit Fallback ausliefern

Das <picture>-Element lässt moderne Browser WebP nehmen, während alles Antike auf das Original durchfällt:

<picture>
  <source type="image/webp" srcset="/img/hero.webp" />
  <img src="/img/hero.jpg" alt="Hero image" width="1600" height="900" />
</picture>

Browser nehmen die erste Quelle, die sie verstehen; alles andere liest das <img>, als wäre nichts gewesen. 2026 ist das doppelt abgesichert — Browser-WebP-Support ist seit Jahren universell —, aber es kostet eine Zeile und nimmt die Frage komplett vom Tisch. Die Alternative, serverseitige Content Negotiation über den Accept-Header, liefert dasselbe Ergebnis auf URL-Ebene; sie ist mächtig, verschiebt die Komplexität aber in die Server-Konfiguration — ein Tausch, den die meisten kleinen Sites ablehnen sollten.

Was PNG oder JPG bleibt

Drei Kategorien bleiben in den alten Formaten, selbst auf einer vollständig WebP-basierten Website:

Dateien, die Besucher herunterladen. Ein „Pressekit herunterladen"-Link sollte PNG oder JPG ausliefern, weil die empfangende Person es mit irgendetwas öffnen könnte. Die Support-Lücke außerhalb von Browsern ist real — dieselbe, die wir in WebP vs. JPG kartiert haben.

Open-Graph- und E-Mail-Bilder. og:image und Newsletter-Assets werden von Crawlern, Chat-Apps und Mail-Clients mit deutlich älteren Bildstacks als Browser abgerufen. Liefere sie als JPG oder PNG, oder akzeptiere, dass manche Vorschauen leise scheitern.

Deine Master-Dateien. Immer. WebP ist der Versandcontainer, nicht das Archiv.

Für die größere Landschaft, wo jedes Format steht, hat der Web-Bildformate-Guide die volle Karte.

Nach dem Wechsel

Jag deine Top-Seiten vorher und nachher durch einen Speed-Test. Die Verbesserung zeigt sich genau dort, wo sie sollte: Largest Contentful Paint, Gesamtgewicht der Seite und die mobile Erfahrung, wo die Bytes am meisten wehtun. Wenn sich eine Seite kaum bewegt, waren ihre Bilder schon klein — was heißt, der Entscheidungsbaum oben hat seinen Job gemacht und dir gesagt, sie zu überspringen. Heb die Vorher-nachher-Zahlen auf; sie sind das Argument für die Migration des Rests der Website.

Die Umwandlung selbst ist der schnelle Teil dieses Projekts. Ein Ordner Produktfotos durch PNG zu WebP dauert unter einer Minute; die Template-Änderungen dauern länger. Fang mit deiner schwersten Seite an — und lass das Waterfall-Diagramm mit jedem diskutieren, der das immer noch für optional hält.