Das beste Bildformat für Websites: JPG, PNG, WebP oder AVIF?

JPG, PNG, WebP und AVIF im Überblick

Technische Eigenschaften und Kompatibilität beschreibt die MDN-Bildformatreferenz. Formatunterstützung bedeutet nicht, dass jeder Uploaddienst oder Editor es akzeptiert.

Was verlustbehaftete und verlustfreie Kompression erhalten

Verlustbehaftete Kodierung verändert einen Teil der Pixeldaten, um die Datei zu verkleinern. Eine kleine Veränderung der Textur kann bei einem Foto unauffällig bleiben, einen Buchstaben aber schlechter lesbar machen. Verlustfreie Kompression erhält die übergebenen Pixeldaten. Ein bereits komprimiertes JPG in PNG umzuwandeln, stellt verlorene Details nicht wieder her; möglicherweise wird nur die Datei größer.

WebP unterstützt beide Verfahren, wie die WebP-Dokumentation von Google erklärt. Der Formatname allein verrät den verwendeten Modus nicht, und Qualität 100 garantiert keinen verlustfreien Export. Bewahre deine beste Quelldatei auf und erstelle jede Veröffentlichungskopie daraus, statt verlustbehaftete Konvertierungen zu verketten. Mehr dazu im Leitfaden zu verlustbehafteter und verlustfreier Kompression.

Fotos: WebP und AVIF mit dem bisherigen JPG vergleichen

Das Bergfoto unten zeigt echte Pixilo-Exporte. Das bereitgestellte JPG hat 413,1 kB; Pixilo erzeugte ein WebP mit 299,0 kB bei Qualität 80 und ein AVIF mit 275,7 kB mit der Qualitätsvorgabe 65. Alle drei haben 1920 × 1440 Pixel. Gegenüber diesem JPG spart WebP rund 28 % und AVIF rund 33 %. Das AVIF ist in diesem Beispiel etwa 8 % kleiner als das WebP.

Gemessen wurden vollständige Dateien aus einem einzelnen, bereits komprimierten JPG. Die Qualitätsskalen sind formatspezifisch; die Exporte wurden nicht auf gleiche sichtbare Qualität abgestimmt. Betrachte sie als Beispiele zum Prüfen, nicht als allgemeine Rangliste. Achte im Schieberegler auf weichere Felsstrukturen, helle Säume an der Bergkante und Farbstufen im glatten Himmel. Beurteile das ganze Bild in der vorgesehenen Anzeigegröße und untersuche fragliche Stellen anschließend in der Detailansicht.

Wiederhole den Test mit einem typischen Bild deiner Website: Stoff für einen Shop oder ein Gesicht für eine Teamseite. Erstelle beide Kandidaten aus derselben Quelle mit denselben Maßen: für JPG mit JPG zu WebP und JPG zu AVIF. Für andere Quellen nutze PNG zu AVIF oder WebP zu AVIF. Wähle die kleinste Version mit ausreichend guten Details. Auch das Original zu behalten ist sinnvoll, wenn es seinen Zweck erfüllt. Bei großen Stapeln zählt zusätzlich die Konvertierungszeit.

Original-JPGPixilo-WebP

Grafiken: Kanten, Schrift und Transparenz schützen

Text und Diagramme zeigen Kompressionsfehler schnell: Ein Farbsaum um einen Buchstaben oder eine unterbrochene Ein-Pixel-Linie kann mehr stören als eine leichte Veränderung einer Landschaft. Die Grafik unten vergleicht ein PNG mit 109,2 kB mit Pixilos JPG-, WebP- und AVIF-Exporten bei jeweils 960 × 640 Pixeln. Das AVIF hat nur 6,4 kB, doch diese Ersparnis hilft nur, wenn die kleinsten Texte und Linien ausreichend deutlich bleiben.

Wechsle das Format und prüfe dieselben Buchstaben und Farbkanten in der Detailansicht. Kehre anschließend zur Gesamtansicht zurück, um die normale Lesegröße zu beurteilen. Dies sind verlustbehaftete Konvertierungen, keine Tests verlustfreier WebP- oder AVIF-Dateien. Zeigt ein Screenshot einen Preis, eine Fehlermeldung oder eine Softwareeinstellung, haben lesbarer und korrekter Text Vorrang vor der kleinsten Datei. Behalte das PNG, wenn die Alternativen diesen Test nicht bestehen.

Transparenz ist eine eigene Anforderung neben der Schärfe: PNG, WebP und AVIF unterstützen sie, JPG nicht. Probiere für ein transparentes Produktbild PNG zu WebP und kontrolliere Umriss und Schatten auf hellem und dunklem Hintergrund. Wähle vor einem JPG-Export bewusst eine einfarbige Fläche. Die undurchsichtige Grafik unten prüft keine transparenten Kanten.

Liegt ein Logo bereits als SVG vor, bewahre die Vektorquelle auf. Rasterisieren nur für einen Kompressor kann den Vorteil sauberer Skalierung beseitigen. Pixilos Rasterwerkzeuge verarbeiten die jeweils angegebenen Bildtypen. Lies den SVG-und-PNG-Leitfaden, um zu entscheiden, wann du das Vektorformat beibehalten solltest und wann eine PNG-Kopie sinnvoll ist.

Original-PNGPixilo-JPG

Lege die Bildmaße fest, bevor du die Dateigröße optimierst

Plane nach dem tatsächlichen Platz. Für 600 CSS-Pixel Anzeigebreite könnte eine 1200-Pixel-Version auf einem hochauflösenden Display sinnvoll sein. Das ist ein Testbeispiel, keine allgemeine Regel. Vergrößere kein kleines Original nur für eine Zielzahl: Zusätzliche Pixel erzeugen keine verlorenen Details.

Wer Breite und Höhe verdoppelt, vervierfacht die Pixelzahl. Die Dateigröße vervierfacht sich nicht zwangsläufig, aber der Encoder muss mehr Bilddaten darstellen. Lege zuerst Ausschnitt und benötigte Maße fest und vergleiche Formate anschließend bei gleichen Abmessungen. So trennst du den Nutzen einer Verkleinerung vom Formatwechsel.

Eine Website kann über responsive Bildeinstellungen wie srcset und sizes verschiedene Größen ausliefern. Bereite Varianten mit Bildgröße ändern vor und lies den Leitfaden zu responsiven Bildern zur Auslieferung. Vermeide ein starres Dateigrößenlimit für jedes Bild: Eine kleine Karte und ein detaillierter Produktzoom erfüllen unterschiedliche Aufgaben.

Auch die Auslieferung prüfen

Reserviere Platz, damit beim Laden nichts springt. Lazy Loading kann für weiter unten liegende Bilder passen, das sichtbare Hauptbild aber verzögern. Googles LCP-Empfehlungen raten dazu, wichtige Bilder früh auffindbar zu machen und das LCP-Bild nicht verzögert zu laden.

Konfiguriere ein benötigtes Ersatzformat im HTML oder CMS. Bei einem picture-Element verwendet der Browser die erste Quelle, die zu seiner Formatunterstützung und den weiteren Bedingungen passt; er vergleicht nicht alle Dateien auf die kleinste Größe. Setze dein bevorzugtes getestetes Format an die erste Stelle und behalte ein geeignetes JPG oder PNG als Ersatz. Der picture-Leitfaden von web.dev erklärt die Auswahl.

Prüfe das Bild, das die veröffentlichte Seite tatsächlich ausliefert. Ein CMS oder Bild-CDN kann den Upload skalieren oder neu kodieren. Besucher erhalten dann möglicherweise eine andere Datei als deinen Pixilo-Download. Pixilo bereitet Dateien vor; deine Website steuert die Auslieferung. Ein kleinerer Export allein behebt weder einen verspäteten Bildabruf noch eine langsame Serverantwort.

Checkliste vor der Veröffentlichung

• Zielsystem und Dateiendung passen zum Format.
• Die Abmessungen passen zum Layout.
• Schrift, Gesichter und transparente Kanten bleiben akzeptabel.
• Die Datei ist kleiner oder der Formatwechsel löst ein echtes Kompatibilitätsproblem.
• Die Seite funktioniert bei schmaler Breite und das wichtige Bild lädt frühzeitig.
• Das Original bleibt für spätere Änderungen erhalten.