# WebP oder PNG und JPG: moderne Bildformate fürs Web [Canonical HTML page](https://gradiently.design/de/guide/webp-images) Deine Website muss nicht dieselben Dateien ausliefern, die du auf Instagram postest. WebP und AVIF erledigen denselben Job wie PNG und JPG mit weniger Bytes, wenn du sie richtig einrichtest. ## The short version - WebP ist ein Bildformat, das verlustbehaftet wie JPG oder verlustfrei wie PNG sein kann und Transparenz sowie Animation unterstützt. - Bei ähnlicher sichtbarer Qualität sind WebP Dateien meist deutlich kleiner als vergleichbare JPG und PNG Dateien. - Jede aktuelle Version von Chrome, Safari, Firefox und Edge unterstützt WebP, ein Fallback ist also nur für sehr alte Browser nötig. - AVIF komprimiert stärker als WebP und wird inzwischen breit unterstützt, kodiert aber langsamer. - Behalte PNG und JPG für Uploads auf Social Plattformen und für Dateien, die du verschickst; nutze WebP oder AVIF auf deiner eigenen Website. 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](https://web.dev/articles/serve-images-webp) 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. | Merkmal | JPG | PNG | WebP | AVIF | | --- | --- | --- | --- | --- | | Verlustbehaftet | Ja | Nein | Ja | Ja | | Verlustfrei | Nein | Ja | Ja | Ja | | Transparenz | Nein | Ja | Ja | Ja | | Animation | Nein | Eingeschränkt (APNG) | Ja | Ja | | Browserunterstützung | Überall | Überall | Alle aktuellen Browser | Alle aktuellen Browser | | Von Social Plattformen akzeptiert | Ja | Ja | Uneinheitlich | Selten | Prüfe die aktuelle Unterstützung auf [caniuse.com](https://caniuse.com/webp), wenn dein Publikum alte Geräte nutzt. ## 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](https://gradiently.design/de/guide/css-linear-gradient) kostet keinen Download. - Dunkles Marine: verlustfrei testen: `linear-gradient(160deg, #0c1222 0%, #13294b 50%, #1e3a8a 100%)` - Blassrosa: hohe Qualität reicht: `radial-gradient(circle at 70% 30%, #f9a8d4 0%, #fbcfe8 35%, #fdf2f8 80%)` - Hell, drei Stopps: verlustbehaftet ok: `linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%)` Dunkle, feine Verläufe zeigen Kompression zuerst; helle, unruhige verbergen sie. Wähle WebP Einstellungen nach dem Inhalt, nicht aus Gewohnheit. ## 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. **Zuerst die Größe** Exportiere das Foto in der größten Größe, in der es tatsächlich angezeigt wird. Ein [Website-Hero](https://gradiently.design/de/guide/website-hero-background) mit 1920×1080 braucht nie ein Original mit 6000 Pixeln. 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. **Mach kleinere Versionen** Exportiere Breiten von 640, 1280 und 1920 Pixeln, damit Handys die kleine laden. 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. ```html Evening light over the harbour ``` Der Browser nutzt die erste `source`, die er unterstützt, und fällt sonst auf das `img` zurück. Breite und Höhe verhindern, dass das Layout beim Laden springt. 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. > **Animiertes WebP und GIF** Animiertes WebP ist viel leichter als GIF und behält volle Farbe, es passt also zu kleinen loopenden Grafiken auf einer Seite. Für alles, was länger als ein paar Sekunden ist, ist ein stummes MP4 oder WebM Video noch leichter. [GIF oder MP4](https://gradiently.design/de/guide/gif-vs-mp4) vergleicht sie im Detail. ## Wo PNG und JPG weiter gewinnen ### WebP oder AVIF nutzen - Bilder auf deiner eigenen Website - Produktraster und Galerien - Bilder in Blogs und Artikeln - Transparente Freisteller im Web ### PNG oder JPG nutzen - Uploads auf Instagram, LinkedIn, X und Facebook - Open Graph Bilder für Linkvorschauen - Dateien, die du mailst oder Kunden schickst - Masterdateien, die du noch bearbeitest 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](https://gradiently.design/de/guide/open-graph-image-size) 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. Ein breites Linkvorschaubild, das eine Frühjahrskollektion auf einem Farbverlaufshintergrund ankündigt Eine Linkvorschau in 1200×630. Behalte diese als PNG, damit der Crawler jeder Plattform sie lesen kann. ## 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. ```bash # 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 ``` Behalte die PNG Originale. WebP zurück in PNG umzuwandeln stellt keine Details wieder her, die bei verlustbehafteter Kompression verloren gingen. 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](https://gradiently.design/de/guide/image-compression); für das ältere Paar siehe [PNG oder JPG](https://gradiently.design/de/guide/png-vs-jpeg); und für die vollständige Checkliste zur Geschwindigkeit [Bilder fürs Web optimieren](https://gradiently.design/de/guide/lighthouse-image-performance). ## FAQ ### Ist WebP besser als PNG? Auf einer Website meist ja: Verlustfreies WebP behält dieselben Pixel in einer kleineren Datei und unterstützt Transparenz. Für Social Uploads und Dateien, die du verschickst, ist PNG sicherer, weil es sich überall öffnen lässt. ### Unterstützen alle Browser WebP? Alle aktuellen Versionen von Chrome, Safari, Firefox und Edge unterstützen WebP. Nutze ein `picture` Element mit JPG oder PNG Fallback, wenn du sehr alte Browser erreichen musst. ### Sollte ich AVIF oder WebP nutzen? AVIF ist meist kleiner, WebP kodiert schneller und wird von mehr Tools unterstützt. Zuerst AVIF mit WebP als Fallback auszuliefern gibt den meisten Besuchern die kleinste Datei. ### Kann ich WebP auf Instagram hochladen? Die Unterstützung ist uneinheitlich, also lade stattdessen PNG oder JPG in genau der richtigen Größe hoch, etwa 1080×1350 für einen Post im Hochformat. ### Unterstützt WebP Transparenz? Ja, sowohl verlustbehaftet als auch verlustfrei, und damit ist es ein guter Ersatz für transparente PNGs im Web.