Bildformate für Vorschaubilder: JPEG, PNG, WebP, AVIF

Ist PNG oder JPEG besser für Screenshots?

PNG ist für Screenshots die bessere der beiden klassischen Optionen. PNG komprimiert verlustfrei und eignet sich laut MDN für Screenshots, Diagramme und Strichzeichnungen. JPEG arbeitet verlustbehaftet und taugt als Rückfallformat für Fotos. PNG ist außerdem das Rückfallformat für Bilder mit Transparenz, weil JPEG keinen Alphakanal hat (Quelle: developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types, Stand: Oktober 2026).

Ein stark verkleinertes Thumbnail zeigt Schrift ohnehin kaum lesbar. Dann kann sich ein verlustbehaftetes Format lohnen – eine Abwägung, keine Messung.

Wie viel kleiner sind WebP-Dateien?

WebP-Dateien sind deutlich kleiner als JPEG und PNG. Verlustbehaftete WebP-Bilder sind laut MDN im Schnitt 25 bis 35 Prozent kleiner als JPEG-Bilder vergleichbarer Qualität. Verlustfreie WebP-Dateien sind typischerweise 26 Prozent kleiner als dieselben Bilder im PNG-Format. WebP unterstützt Transparenz und Animation. Die größten zulässigen Abmessungen sind 16.383 × 16.383 Pixel (Quelle: developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types, Stand: Oktober 2026).

Google gibt auf seiner WebP-Projektseite für verlustfreie WebP-Bilder 26 Prozent weniger Dateigröße als PNG an. Transparenz koste im verlustfreien WebP nur 22 Prozent zusätzliche Bytes (Quelle: developers.google.com/speed/webp, Stand: Oktober 2026).

WebP läuft laut MDN in allen aktuellen Versionen von Chrome, Edge, Firefox, Opera und Safari. Auf dem Mac braucht es allerdings Safari 14 oder neuer. Zusätzlich ist macOS Big Sur (11) oder neuer nötig (Quelle: developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types, Stand: Oktober 2026).

Lohnt sich AVIF für Thumbnails?

AVIF komprimiert in der Regel noch stärker als WebP. MDN nennt verlustbehaftete AVIF-Bilder rund 50 Prozent kleiner als JPEG. MDN zitiert zudem einen Vergleich mit denselben JPEG-Dateien. Darin sparte AVIF im Median 50 Prozent ein, WebP 30 Prozent. AVIF beherrscht verlustfreie Kompression, Transparenz, Animation, HDR und erweiterte Farbräume (Quelle: developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types, Stand: Oktober 2026).

Ein Nachteil von AVIF ist die fehlende progressive Darstellung. Die Datei muss laut MDN vollständig geladen sein, bevor sie erscheint. Bei kleinen Vorschaubildern fällt das kaum ins Gewicht, weil die Dateien ohnehin klein sind. Bei großen Dateien empfiehlt MDN, ein Format mit progressiver Darstellung zu erwägen (Quelle: developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types, Stand: Oktober 2026).

AVIF wird von allen großen Browsern unterstützt, laut caniuse.com in Chrome ab Version 85. Edge unterstützt AVIF ab 121, Firefox ab 93 und Opera ab 71. Safari unterstützt AVIF vollständig ab 16.4, die Versionen 16.1 bis 16.3 nur teilweise. Die globale Nutzungsabdeckung gibt caniuse.com mit gut 96 Prozent an (Quelle: caniuse.com/avif, Stand: Oktober 2026).

Wie bietet man AVIF mit Rückfall an?

Das Element picture liefert neuere Bildformate mit Rückfalloption aus. Jedes source-Element nennt eine Datei und ihren MIME-Typ. Das abschließende img enthält das Format mit der breitesten Unterstützung. MDN rät, bei AVIF immer einen Rückfall in WebP, JPEG oder PNG mitzuliefern. Zwei oder drei source-Elemente hält MDN meist für ausreichend (Quelle: developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types, Stand: Oktober 2026).

<picture>
  <source srcset="/thumbs/example.avif" type="image/avif">
  <source srcset="/thumbs/example.webp" type="image/webp">
  <img src="/thumbs/example.png" width="400" height="300"
       alt="Startseite von example.org" loading="lazy">
</picture>

Beim Element picture übernimmt der Browser die Auswahl. Er prüft die Attribute srcset, media und type jedes source-Elements. Laut MDN wählt er unter ihnen die beste Übereinstimmung für Layout und Gerät. Findet er keine, lädt er die Adresse aus dem src des img. Das img beschreibt außerdem Größe und Darstellung. MDN führt picture seit März 2016 als browserübergreifend verfügbar (Quelle: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture, Stand: Oktober 2026).

In welchem Format liefern Screenshot-Werkzeuge?

Playwright speichert Screenshots standardmäßig als PNG und kann auch JPEG und WebP schreiben. Die Option quality (0 bis 100) gilt nicht für PNG. Für JPEG ist 80 voreingestellt. Bei WebP erzeugt der Standardwert 100 ein verlustfreies Bild, niedrigere Werte komprimieren verlustbehaftet (Quelle: playwright.dev/docs/api/class-page#page-screenshot, Stand: Oktober 2026).

Puppeteer legt das Screenshot-Format über die Option type fest, Standard ist 'png'. Die Option quality zwischen 0 und 100 gilt nicht für PNG. omitBackground blendet den weißen Hintergrund aus und erzeugt so Screenshots mit Transparenz (Quelle: pptr.dev/api/puppeteer.screenshotoptions, Stand: Oktober 2026).

Das Chrome DevTools Protocol liefert Screenshots nur als JPEG, PNG oder WebP. Der Befehl Page.captureScreenshot kennt die Formate jpeg, png und webp, mit PNG als Standard (Quelle: chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot, Stand: Oktober 2026). Ein AVIF-Thumbnail entsteht also in einem zweiten Schritt, durch Umwandeln der PNG-Aufnahme.

Welche Formate sollte man meiden?

MDN rät von einigen Formaten ab. Statt GIF empfiehlt MDN für verlustfreie Standbilder PNG und für Animationen WebP, AVIF oder APNG. Das alte Format XBM gilt bei MDN als nicht mehr unterstützt und wegen möglicher Sicherheitsprobleme als zu meiden. JPEG XL nennt MDN wegen unvollständiger Browser-Unterstützung nur mit Rückfall per picture (Quelle: developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types, Stand: Oktober 2026).