WebP oder PNG und JPG: moderne Bildformate fürs Web

Bei der Frage WebP oder PNG und JPG gewinnt WebP auf deiner eigenen Website: Es kann komprimieren wie ein JPG oder verlustfrei wie ein PNG, unterstützt Transparenz und erzeugt bei gleicher sichtbarer Qualität kleinere Dateien. Jeder aktuelle Browser unterstützt es. Wo PNG und JPG weiter gewinnen, ist überall außerhalb deiner Seite: Uploads auf Instagram und LinkedIn, E-Mail-Anhänge, Dateien für Kunden und Druckereien. Die praktische Regel ist also einfach. Mach und behalte Masterdateien in PNG, liefere Besuchern WebP (oder AVIF) aus.

Was WebP ist

WebP ist ein Bildformat, das Google entwickelt und auf web.dev dokumentiert hat. Ein Format deckt ab, wofür man früher drei brauchte: verlustbehaftete Fotos wie JPG, verlustfreie Grafiken mit Transparenz wie PNG und kurze Animationen wie GIF. Die Ersparnis kommt aus klügerer Kompression, die jeden Pixelblock aus seinen Nachbarn vorhersagt und nur die Differenz speichert.

WebP oder PNG für Grafiken und Transparenz

Für Logos, Interface-Bilder und Freisteller behält verlustfreies WebP jedes Pixel wie PNG und ist meist kleiner. Verlustbehaftetes WebP mit Transparenz ist der größere Gewinn: Ein Produktfreisteller mit weicher, durchscheinender Kante kann einen Bruchteil der PNG Größe haben, ohne sichtbaren Unterschied.

Farbverläufe sind die Ausnahme, bei der du aufpassen musst. Ein glatter dunkler Verlauf kann in verlustbehaftetem WebP Streifen bilden, genau wie in JPG. Besteht dein Hero-Bild größtenteils aus Verlauf, vergleiche verlustbehaftet in hoher Qualität mit verlustfrei und überleg, ob es überhaupt ein Bild sein muss: Ein CSS Farbverlauf kostet keinen Download.

WebP oder JPG für Fotos

Bei Fotos entspricht verlustbehaftetes WebP mit einer Qualität um 75 bis 80 meist einem JPG mit 85 und ist dabei kleiner. Auf Seiten mit vielen Bildern summiert sich der Unterschied: Produktraster, Portfolios, Blogs. Bei einem einzelnen Hero-Foto ist der Gewinn real, aber weniger dramatisch, und die richtigen Pixelmaße zählen mehr als das Format.

1. 1

   Zuerst die Größe

   Exportiere das Foto in der größten Größe, in der es tatsächlich angezeigt wird. Ein Website-Hero mit 1920×1080 braucht nie ein Original mit 6000 Pixeln.

2. 2

   Wähle eine Qualität

   Starte verlustbehaftetes WebP bei 80. Schau dir Haut, Himmel und dunkle Ecken bei 100% Zoom an, geh dann schrittweise runter, bis sich etwas ändert, und einen Schritt zurück.

3. 3

   Mach kleinere Versionen

   Exportiere Breiten von 640, 1280 und 1920 Pixeln, damit Handys die kleine laden.

4. 4

   Liefere mit srcset aus

   Lass den Browser mit srcset und sizes die richtige Breite wählen, wie im Code unten.

AVIF oder WebP

AVIF ist neuer und komprimiert meist stärker als WebP, vor allem bei Fotos und weichen Tönen. Es wird in allen aktuellen großen Browsern unterstützt. Die Kosten sind langsameres Kodieren, was zählt, wenn du Bilder spontan umwandelst, und weniger Tools, die es öffnen. Viele Seiten liefern zuerst AVIF, dann WebP und zuletzt JPG aus und lassen den Browser das erste nehmen, das er versteht.

<picture>
  <source type="image/avif" srcset="hero-1280.avif 1280w, hero-1920.avif 1920w" sizes="100vw">
  <source type="image/webp" srcset="hero-1280.webp 1280w, hero-1920.webp 1920w" sizes="100vw">
  <img src="hero-1920.jpg" alt="Evening light over the harbour" width="1920" height="1080" fetchpriority="high">
</picture>

Nutzt du ein Framework oder ein Bild-CDN, macht es das vielleicht alles automatisch aus einem hochgeladenen Original. Prüfe, was es ausgibt, bevor du irgendetwas von Hand umwandelst.

Wo PNG und JPG weiter gewinnen

Social Plattformen wandeln Uploads selbst um, und manche lehnen WebP ab oder verarbeiten es falsch. Auch Crawler für Linkvorschauen verhalten sich unterschiedlich, also behalte dein Open Graph Bild als PNG oder JPG in 1200×630. Und ein WebP, das du einem Kunden schickst, öffnet sich oft in der falschen App oder gar nicht.

So wandelst du PNG in WebP um

Googles kostenloses Kommandozeilentool cwebp wandelt eine Datei oder einen ganzen Ordner um, und die meisten Bildbearbeitungs- und Designtools exportieren WebP inzwischen direkt.

# lossy, good for photos
cwebp -q 80 photo.png -o photo.webp

# lossless, good for logos and interface graphics
cwebp -lossless logo.png -o logo.webp

# a whole folder
for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done

Deine Master-Designdateien können in PNG bleiben: Gradiently exportiert Designs als PNG und JPG, die richtigen Ausgangsdateien für diesen Schritt und die richtigen Dateien für jeden Social Upload. Die Gründe hinter Qualitätseinstellungen erklärt Bildkompression, ohne Farbverläufe zu ruinieren; für das ältere Paar siehe PNG oder JPG; und für die vollständige Checkliste zur Geschwindigkeit Bilder fürs Web optimieren.