Bildformate im Vergleich: JPG, PNG, WebP, AVIF

Diskussionen über Bildformate sind meist länger als nötig. Für die große Mehrheit der Bilder auf einer Website ist ein modernes Format richtig, und der Rest ist Kompromiss.

Die Ausnahmen sind trotzdem real, und die falsche Wahl kostet dich entweder Dateigröße oder Bildqualität. Deshalb zuerst die kurze Antwort, danach die Begründung.

Die kurze Antwort

Was du hast	Format	Warum
Ein Foto auf einer Website	WebP	Rund 25 bis 35 Prozent kleinere Dateigröße als JPG bei gleicher Qualität
Ein Foto für Druck, Kunden oder E-Mail	JPG	Öffnet sich überall, ohne Rückfragen
Logo, Icon oder Screenshot mit scharfen Kanten	PNG	Scharfe Kanten, volle Transparenz
Ein Logo, das aus Formen besteht	SVG	Skaliert beliebig, ohne größer zu werden
Eine Seite, bei der jedes Kilobyte zählt	AVIF	Die kleinsten Dateien, mit Rückfalllösung

Wer hier aufhört, trifft meistens die richtige Wahl und spart sich den ganzen Vergleich. WebP für Fotos im Web, PNG für Grafiken, JPG wenn Kompatibilität wichtiger ist als die Dateigröße.

Verlustbehaftet oder verlustfrei?

Jedes dieser Formate nutzt eines von zwei Verfahren, und dieser Unterschied erklärt das meiste.

Verlustbehaftete Kompression wirft Informationen weg, die das Auge kaum vermisst. JPG arbeitet so, WebP und AVIF in ihren Standardeinstellungen ebenfalls. Du bekommst deutlich kleinere Dateien, und das Bild verliert bei jedem erneuten Speichern ein wenig.

Verlustfreie Kompression behält jedes Pixel. PNG arbeitet so, WebP und AVIF bieten beide zusätzlich einen verlustfreien Modus. Nichts geht verloren, dafür bleiben die Dateien größer.

Die praktische Regel: verlustbehaftet für Fotos, wo niemand den Unterschied sieht, verlustfrei für Screenshots, Logos und alles mit Text oder scharfen Kanten, wo er sofort auffällt.

JPG: der sichere Standard

JPG, oft auch JPEG geschrieben, ist seit den frühen Neunzigern weit verbreitet und der Standard für Fotos und immer noch das Format, das jedes Programm öffnen kann. Das ist der einzige verbliebene Vorteil, und er ist nicht klein.

Was JPG nicht kann, ist Transparenz oder Animation. Sobald ein Teil deines Bildes durchsichtig sein soll, fällt das Format raus, bevor die Diskussion beginnt. Bei sehr niedriger Qualität entstehen außerdem die bekannten Klötzchen an Kanten und in Flächen wie Himmel.

Du solltest JPEG verwenden für Fotos, die gedruckt, gemailt oder an jemanden weitergegeben werden, dessen Software du nicht kennst. In der Fotografie bleibt JPEG außerdem das Austauschformat der Wahl.

PNG: für Grafiken, nicht für Fotos

PNG komprimiert verlustfrei. Jedes Pixel kommt so heraus, wie du es hineingegeben hast, und genau deshalb ist es die beste Wahl für Screenshots, Logos, Diagramme und alles mit Text.

Dieselbe Eigenschaft macht es für Fotos ungeeignet. Ein Foto als PNG ist typischerweise zwei- bis fünfmal so groß wie dasselbe Bild als JPG, und niemand sieht den Unterschied. Wer Urlaubsfotos als PNG speichert, zahlt eine große Dateigröße für Qualität, die er nicht wahrnehmen kann.

PNG beherrscht Transparenz vollständig, inklusive weicher Kanten. Ein transparentes Logo bleibt damit auf jedem Hintergrund sauber.

WebP: der sinnvolle Standard fürs Web

WebP erledigt beide Aufgaben. Es hat einen verlustbehafteten Modus, der JPG schlägt, und einen verlustfreien, der PNG schlägt. Transparenz und Animation unterstützt WebP in beiden.

Die Zahlen machen den Fall klar. Gegenüber JPG bei vergleichbarer Bildqualität sind WebP-Dateien rund 25 bis 35 Prozent kleiner. Im verlustfreien Modus gegenüber PNG liegt die Ersparnis meist bei 20 bis 30 Prozent. Auf einer bilderlastigen Seite entscheidet das darüber, ob sie schnell lädt oder nicht.

Die Unterstützung ist längst kein Argument mehr. WebP wird von allen aktuellen Browsern unterstützt, einschließlich Chrome, Edge, Firefox, Opera und Safari, und das auf allen Geräten. Der einzige Vorbehalt betrifft Safari auf macOS, wo Safari 14 oder neuer auf macOS Big Sur oder neuer nötig ist.

WebP stammt ursprünglich von Google und ist dadurch besonders gut in der Verarbeitung großer Bildmengen, etwa bei Shops mit vielen Produktfotos.

AVIF: die kleinsten Dateien, mit einem Haken

AVIF basiert auf dem Videocodec AV1 und wurde 2019 von der Alliance for Open Media eingeführt. Es komprimiert stärker als alles andere, was verbreitet im Einsatz ist.

Rechne mit Dateien, die rund 40 bis 55 Prozent kleiner sind als JPEG und 15 bis 25 Prozent kleiner als WebP, bei einer Bildqualität, die die meisten nicht unterscheiden können. AVIF unterstützt außerdem Transparenz, Animationen und einen deutlich größeren Farbraum, was bei Produktfotos mit kritischen Farben zählt.

Zwei Haken gibt es. Das Kodieren dauert spürbar länger, was stört, wenn eine Website Bilder erst beim Aufruf erzeugt. Und die Browser-Unterstützung ist jünger: Chrome ab Version 85, Firefox ab 93, Opera ab 71, Safari ab 16.1 und Edge ab 121.

Das reicht, um AVIF heute auf einer Website zu verwenden, solange du eine Rückfalllösung mitlieferst. AVIF liefert dabei die bessere Komprimierung, WebP die breitere Unterstützung. Das `picture`-Element lässt den Browser AVIF nehmen, wenn er kann, und still auf WebP oder JPG zurückfallen, wenn nicht. Die Formatübersicht von MDN empfiehlt genau dieses Vorgehen für neuere Formate.

AVIF oder WebP: welches Format für welchen Zweck?

Das ist die Frage, um die sich die meisten Vergleiche drehen, und die Antwort hängt weniger vom Format als vom Einsatz ab.

Nimm WebP, wenn du viele Bilder schnell verarbeiten musst, wenn die Bilder in sozialen Medien landen oder wenn du keine Rückfalllösung bauen willst. Die universelle Unterstützung und die schnelle Kodierung sind hier mehr wert als die letzten Kilobyte, während AVIF seine Stärke erst bei großen Bildern ausspielt.

Nimm AVIF, wenn du die Website selbst kontrollierst, die Bilder vorab erzeugst und jedes Kilobyte zählt. Bei großen Hero-Bildern und Fotostrecken ist der Unterschied in der Dateigröße erheblich, und AVIF liefert dabei eine hohe Qualität.

In der Praxis ist eine Kombination am sinnvollsten: AVIF als erste Wahl, WebP als Rückfalllösung, JPG als letzte Ebene.

Was ist mit GIF und SVG?

GIF überlebt aus Gewohnheit. Es kann nur 256 Farben, erzeugt größere Dateien als die Alternativen und sieht dabei schlechter aus. Für Animationen sind WebP und AVIF beide deutlich besser. Behalte GIF nur für die Kompatibilität mit etwas Altem.

SVG ist eine andere Gattung. Es speichert Formen statt Pixel und skaliert vom Favicon bis zum Plakat, ohne unscharf oder größer zu werden. Verwende es für Logos, Icons und Diagramme, die gezeichnet und nicht fotografiert wurden. Für solche Grafiken ist es ideal, weil es auf allen Geräten und in allen Browsern unterstützt wird. Ein Foto kann SVG nicht sinnvoll abbilden.

Warum das Bildformat die Ladezeiten bestimmt

Bilder sind auf den meisten Seiten das Schwerste und gleichzeitig das am wenigsten Optimierte. Genau deshalb wirkt sich die Wahl des Formats erheblich stärker auf die Leistung aus als die meisten anderen technischen Maßnahmen.

Die Rechnung ist einfach. Ein modernes Format mit besserer Komprimierung liefert dieselbe visuelle Qualität bei deutlich kleinerer Dateigröße. Kleinere Dateigrößen bedeuten schnellere Ladezeiten. Seiten, die schnell laden, verbessern sowohl die Core Web Vitals als auch die Absprungrate, und zwar auf allen Geräten.

Ein Beispiel aus der Praxis: Eine Seite mit zehn Fotos à 800 Kilobyte überträgt 8 Megabyte. Dieselben hochwertige Bilder als WebP liegen bei rund 5 Megabyte, als AVIF bei etwa 4. Für mobile Nutzer ist das der Unterschied zwischen einer Seite, die sofort steht, und einer, die ruckelt.

Für Fotografie-Seiten mit großen Galerien ist AVIF daher ideal und liefert eine höhere Qualität pro Kilobyte, während WebP bei vielen kleinen Produktbildern die praktischere Wahl bleibt. Welches Format für deine Website geeignet ist, hängt also vom Einsatz ab. Beide Formate liefern eine höhere Qualität pro Kilobyte als das weit verbreitete JPEG.

Qualitätswerte lassen sich nicht übertragen

Das übersehen fast alle, die anfangen, Bilder stapelweise umzuwandeln. Ein JPG mit Qualität 85 und ein WebP mit Qualität 85 sind nicht dasselbe. Die Zahl bedeutet in jedem Encoder etwas anderes.

In der Praxis sieht WebP bei gleicher Zahl besser aus als JPEG und liefert eine bessere Bildqualität, du kannst den Wert also meist senken und bist trotzdem im Vorteil. Nimm dir die Zeit, ein repräsentatives Bild umzuwandeln, sieh es dir in voller Größe an, und übertrage die Einstellung dann auf den Rest. So kannst du die ganze Bibliothek optimieren, ohne jedes Bild einzeln zu prüfen.

Mindestens genauso wichtig sind die Abmessungen. Ein 4.000 Pixel breites Foto in einer 800 Pixel breiten Spalte verschwendet den größten Teil seiner Dateigröße, egal wie gut der Encoder ist.

Umwandeln ohne Qualitätsverlust

Drei Schritte decken den Großteil der Arbeit ab, und alle laufen im Browser statt auf einem Server.

• Das Format wechseln mit dem Bild-Konverter. Er beherrscht WebP, JPG, PNG und AVIF und sagt dir, wenn dein Browser AVIF nicht schreiben kann.
• Das Ergebnis mit dem Bild-Kompressor weiter verkleinern, falls die Datei noch zu groß ist.
• Vorher das Bild mit dem Bild-Skalierer auf die Größe bringen, in der es wirklich angezeigt wird.

In dieser Reihenfolge verstärkt sich die Ersparnis. Wer zuerst skaliert, gibt dem Encoder weniger zu tun, und genau das ist gewollt.

Kurz beantwortet

Welches Bildformat ist das beste für Webseiten?

WebP für Fotos, PNG für Grafiken mit scharfen Kanten, SVG für Logos. AVIF, wenn die Dateien so klein wie möglich sein sollen und du eine Rückfalllösung lieferst.

Ist WebP besser als JPG?

Fürs Web ja. Kleinere Dateien bei gleicher sichtbarer Bildqualität, dazu Transparenz und Animation. JPG gewinnt nur bei der universellen Kompatibilität außerhalb des Browsers.

Verliert ein Bild beim Umwandeln in WebP an Qualität?

Im verlustbehafteten Modus ja, genau wie bei JPG. Im verlustfreien Modus nicht. Wandelst du ein bestehendes JPG um, wird es zweimal komprimiert, arbeite also möglichst mit dem Original.

Welche Formate unterstützen Transparenz?

PNG, WebP, AVIF, GIF und SVG. JPG nicht, und daran ändert keine Einstellung etwas.

Welches Format nehme ich für ein Logo?

SVG, wenn du die Vektordatei hast. PNG, wenn nur eine Pixelversion vorliegt. Niemals JPG, weil die Kanten verwaschen und die Transparenz fehlt.

Die Regel, die bleibt

Nimm WebP, solange nichts dagegen spricht. Die Gegengründe sind kurz und konkret: Das Bild verlässt das Web Richtung Druck oder E-Mail, dann JPG. Es ist ein gezeichnetes Logo, dann SVG. Du brauchst die kleinste Datei auf einer Seite, die du vollständig kontrollierst, dann AVIF mit Rückfalllösung.

Alles andere sind Details, die du nachschlagen kannst, wenn ein bestimmtes Bild Ärger macht.