WebP, AVIF, JPG und PNG: Welches Bildformat verwenden?

JPG, PNG, WebP oder AVIF? Wer Bilder für eine Website vorbereitet, steht schnell vor der Frage, welches Dateiformat die beste Wahl ist.

Eine pauschale Antwort gibt es nicht. Ein Foto stellt andere Anforderungen als ein Logo, ein Screenshot oder eine Grafik mit transparentem Hintergrund. Die Formate unterscheiden sich unter anderem bei Kompression, Transparenz, Dateigröße und ihren typischen Einsatzgebieten.

In diesem Artikel vergleichen wir WebP, AVIF, JPG und PNG und zeigen dir, welches Format sich für welche Art von Website-Bild eignet.

Kurz erklärt: Für Fotos sind WebP und AVIF häufig sehr effiziente Optionen. JPG bleibt ein weit verbreitetes Fotoformat. PNG ist besonders dort sinnvoll, wo verlustfreie Darstellung oder Transparenz benötigt wird. Entscheidend ist aber immer der konkrete Bildinhalt und Einsatzzweck.

Warum spielt das Bildformat überhaupt eine Rolle? #

Ein Bildformat bestimmt nicht nur die Dateiendung. Es legt auch fest, wie Bildinformationen gespeichert und komprimiert werden und welche Funktionen zur Verfügung stehen.

Dasselbe Ausgangsbild kann deshalb je nach Format sehr unterschiedliche Dateigrößen besitzen.

Vereinfacht:

dasselbe Motiv
     ↓
JPG  → Dateigröße A
PNG  → Dateigröße B
WebP → Dateigröße C
AVIF → Dateigröße D

Die kleinste Datei ist allerdings nicht automatisch die beste. Auch Bildqualität, Transparenz, Browserunterstützung und der konkrete Einsatzzweck müssen berücksichtigt werden.

Die vier Bildformate im Überblick #

Format	Typischer Einsatz	Verlustbehaftet möglich?	Verlustfrei möglich?	Transparenz
JPG/JPEG	Fotos	Ja	Nein	Nein
PNG	Grafiken, Screenshots, Transparenz	Nein	Ja	Ja
WebP	Fotos und Grafiken	Ja	Ja	Ja
AVIF	Fotos und moderne Webbilder	Ja	Ja	Ja

Diese Tabelle dient als erste Orientierung. Welches Format tatsächlich die beste Kombination aus Qualität und Dateigröße liefert, hängt vom jeweiligen Bild ab.

Was ist JPG beziehungsweise JPEG? #

JPEG ist eines der bekanntesten Formate für digitale Fotos. Dateien verwenden häufig die Endung .jpg oder .jpeg.

JPG und JPEG bezeichnen dabei grundsätzlich dasselbe Bildformat.

JPEG verwendet verlustbehaftete Kompression. Dabei werden Bildinformationen reduziert, um die Dateigröße zu verkleinern.

Bei einer sinnvoll gewählten Qualitätsstufe können Fotos deutlich komprimiert werden, ohne dass die Qualitätsverluste bei normaler Betrachtung sofort auffallen.

Wann eignet sich JPG? #

JPG eignet sich besonders für fotografische Motive mit vielen Farben, Details und weichen Farbverläufen.

Typische Beispiele sind:

Landschaftsfotos
Produktfotos
Porträts
Reisefotos
Hintergrundfotos

Für solche Motive war JPEG über viele Jahre das klassische Standardformat im Web und wird weiterhin breit unterstützt.

Welche Nachteile hat JPG? #

JPEG unterstützt keine Transparenz. Ein Bildbereich kann also nicht wie bei PNG oder WebP einen transparenten Hintergrund besitzen.

Außerdem kann starke Kompression sichtbare Artefakte verursachen.

Besonders bei Text, feinen Linien, Logos und harten Kanten können solche Kompressionsartefakte störend auffallen.

Deshalb ist JPG nicht für jede Grafik die beste Wahl.

Was ist PNG? #

PNG steht für Portable Network Graphics und verwendet verlustfreie Kompression.

Das bedeutet, dass die Bildinformationen bei der Kompression nicht auf dieselbe Weise verworfen werden wie bei einem verlustbehaftet komprimierten JPEG.

PNG unterstützt außerdem Transparenz einschließlich unterschiedlicher Transparenzstufen über einen Alphakanal.

Wann eignet sich PNG? #

PNG kann sinnvoll sein für Bilder mit klaren Kanten, bestimmte Screenshots, Grafiken und Inhalte, bei denen verlustfreie Darstellung oder Transparenz benötigt wird.

Ein typisches Beispiel wäre eine freigestellte Grafik mit transparentem Hintergrund.

Logo / Grafik
████████
██    ██
██    ██
████████

Hintergrund:
transparent

Das Bild kann dadurch auf unterschiedlichen Hintergrundfarben eingesetzt werden, ohne einen fest eingebauten weißen oder andersfarbigen Hintergrund zu besitzen.

Warum sind PNG-Dateien manchmal sehr groß? #

Verlustfreie Kompression hat ihren Preis. Insbesondere fotografische Motive können als PNG erheblich mehr Speicherplatz benötigen als in einem geeigneten verlustbehafteten Format.

Ein großes Foto sollte deshalb nicht automatisch als PNG gespeichert werden, nur weil PNG eine hohe Bildqualität ermöglicht.

Praxis-Tipp: Wenn ein mehrere Megabyte großes PNG eigentlich ein normales Foto ist, lohnt sich fast immer die Prüfung, ob ein anderes Format für diesen Einsatzzweck geeigneter ist.

Ist PNG für Screenshots immer die beste Wahl? #

Nicht zwingend.

PNG eignet sich für viele Screenshots sehr gut, weil Text und scharfe Benutzeroberflächen verlustfrei dargestellt werden können.

Ein moderneres Format wie WebP kann je nach Screenshot jedoch eine deutlich kleinere Datei bei weiterhin sehr guter sichtbarer Qualität erzeugen.

Deshalb solltest du insbesondere bei vielen Screenshots nicht allein aufgrund einer allgemeinen Regel immer PNG verwenden.

Was ist WebP? #

WebP ist ein speziell für Webanwendungen entwickeltes Bildformat.

Es unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression sowie Transparenz.

Damit kann WebP verschiedene Anwendungsbereiche abdecken, für die früher häufig unterschiedliche Formate verwendet wurden.

Foto
  ↓
WebP möglich

Grafik
  ↓
WebP möglich

Transparenz
  ↓
WebP möglich

WebP wird von aktuellen verbreiteten Browsern unterstützt und ist für moderne Websites deshalb eine praktische Option.

Welche Vorteile bietet WebP? #

Bei vielen Bildern kann WebP gegenüber älteren Formaten eine kleinere Dateigröße bei vergleichbarer sichtbarer Qualität ermöglichen.

Das ist insbesondere für Websites interessant, weil weniger zu übertragende Bilddaten die Ladeperformance verbessern können.

WebP ist außerdem flexibel, da sowohl verlustbehaftete als auch verlustfreie Kompression und Transparenz unterstützt werden.

Ist WebP immer kleiner als JPG oder PNG? #

Nein.

WebP kann sehr effizient sein, aber das Ergebnis hängt vom Bildinhalt und den gewählten Kodierungseinstellungen ab.

Ein schlecht konfiguriertes WebP kann größer sein als eine bereits sehr gut optimierte JPG-Datei.

Deshalb solltest du Dateiformate nicht ausschließlich anhand ihres Namens beurteilen.

Wichtig: „WebP“ bedeutet nicht automatisch „optimiert“. Auch ein WebP-Bild kann unnötig große Abmessungen, eine zu hohe Qualitätseinstellung oder eine unnötig große Dateigröße besitzen.

Was ist AVIF? #

AVIF ist ein modernes Bildformat, das auf der AV1-Bildkompression basiert.

Das Format unterstützt unter anderem verlustbehaftete und verlustfreie Kompression sowie Transparenz.

AVIF kann insbesondere bei fotografischen Inhalten eine hohe Kompressionseffizienz erreichen.

Dadurch lassen sich bei geeigneten Bildern und Einstellungen häufig sehr kleine Dateien mit guter sichtbarer Qualität erzeugen.

Welche Vorteile bietet AVIF? #

Der wichtigste Vorteil ist die mögliche hohe Kompressionseffizienz.

Bei einem geeigneten Foto kann eine AVIF-Datei bei vergleichbarer visueller Qualität kleiner ausfallen als eine entsprechende Datei in einem älteren Format.

Das kann insbesondere bei großen, bildlastigen Websites interessant sein.

Welche Nachteile kann AVIF haben? #

Ein modernes Format ist nicht automatisch in jedem Workflow die beste Lösung.

Das Kodieren und Dekodieren komplexer Bildformate kann andere Anforderungen stellen als bei älteren Formaten. Auch die verwendete Software, das CMS, Plugins, Bildbearbeitungsprogramme und der gewünschte Fallback-Workflow spielen eine Rolle.

Bei bestimmten Bildern kann außerdem WebP oder sogar ein gut optimiertes JPG bereits ein sehr gutes Ergebnis liefern.

Du solltest AVIF deshalb als leistungsfähige Option betrachten und nicht als Pflichtformat für jedes Bild.

WebP oder AVIF? #

Diese Frage lässt sich nicht pauschal mit einem einzigen Sieger beantworten.

AVIF kann insbesondere bei Fotos eine sehr hohe Kompressionseffizienz erreichen. WebP ist ebenfalls effizient und in vielen bestehenden Website-Workflows sehr unkompliziert einsetzbar.

Bei einem wichtigen Bild kannst du beide Varianten erzeugen und anschließend vergleichen:

WebP
Dateigröße: ?
Bildqualität: ?

AVIF
Dateigröße: ?
Bildqualität: ?

        ↓

für diesen Einsatzzweck
bessere Variante wählen

Ein realer Vergleich ist aussagekräftiger als die pauschale Aussage, ein bestimmtes Format sei grundsätzlich immer besser.

JPG oder WebP? #

Für ein klassisches Foto kann ein gut optimiertes JPG bereits eine brauchbare Lösung sein.

WebP ermöglicht bei vielen Motiven jedoch eine effizientere Speicherung bei vergleichbarer sichtbarer Qualität und unterstützt zusätzlich Transparenz.

Wenn dein Website-System WebP zuverlässig verarbeitet und ausliefert, ist WebP deshalb für viele fotografische Website-Bilder eine naheliegende Option.

Ein vorhandenes gut optimiertes JPG muss aber nicht allein wegen seiner Dateiendung zwangsläufig problematisch sein.

PNG oder WebP? #

Diese Entscheidung ist besonders bei Grafiken und Screenshots interessant.

Wenn verlustfreie Darstellung und Transparenz benötigt werden, können grundsätzlich sowohl PNG als auch WebP infrage kommen.

Vergleiche die resultierende Dateigröße und kontrolliere die Darstellung sorgfältig.

Bei Screenshots mit kleinen Texten oder feinen UI-Elementen sollte die Lesbarkeit immer erhalten bleiben.

Was bedeutet verlustbehaftete Kompression? #

Bei verlustbehafteter Kompression werden Bildinformationen entfernt beziehungsweise vereinfacht, um die Dateigröße zu reduzieren.

Das ist nicht grundsätzlich schlecht.

Wenn die Kompression sinnvoll gewählt wird, können große Mengen an Daten eingespart werden, ohne dass der Unterschied für einen Besucher bei normaler Betrachtung relevant ist.

Wird zu stark komprimiert, können jedoch sichtbare Qualitätsverluste entstehen.

Was bedeutet verlustfreie Kompression? #

Bei verlustfreier Kompression werden die Bildinformationen so gespeichert, dass die ursprünglichen Daten grundsätzlich ohne die typischen Verluste einer verlustbehafteten Kompression rekonstruiert werden können.

Das ist beispielsweise bei bestimmten Grafiken, technischen Darstellungen oder Screenshots hilfreich.

Verlustfrei bedeutet allerdings nicht automatisch, dass die Datei klein ist.

Was bedeutet Transparenz? #

Ein Bild mit Transparenz besitzt Bereiche, durch die der darunterliegende Hintergrund sichtbar bleibt.

Das ist beispielsweise bei einem freigestellten Logo hilfreich.

Website-Hintergrund
████████████████████

transparentes Logo
      CURIAWEB

Ergebnis:
Logo ohne eingebauten
rechteckigen Hintergrund

PNG, WebP und AVIF können Transparenz unterstützen. Klassisches JPEG unterstützt sie nicht.

Welches Format für Fotos? #

Für normale Fotografien würde ich heute in erster Linie WebP und AVIF prüfen.

JPG bleibt eine mögliche und breit kompatible Alternative.

Entscheidend ist das tatsächliche Ergebnis:

Foto
 ↓
WebP testen
 ↓
AVIF testen
 ↓
optional JPG vergleichen
 ↓
Dateigröße + Qualität beurteilen

Bei vielen alltäglichen Websites ist ein sauber optimierter WebP-Workflow bereits eine sehr gute Lösung.

Welches Format für Produktbilder? #

Produktbilder müssen häufig feine Details zeigen und gleichzeitig schnell geladen werden.

Bei fotografischen Produktbildern kommen deshalb insbesondere WebP und AVIF infrage. Auch ein gut optimiertes JPG kann verwendet werden.

Zu starke Kompression solltest du vermeiden, wenn dadurch wichtige Produktdetails verloren gehen.

Bei einem Online-Shop ist nicht die kleinstmögliche Datei das Ziel, sondern eine sinnvolle Balance zwischen Ladezeit und ausreichend guter Produktdarstellung.

Welches Format für Logos? #

Wenn ein Logo als echte Vektorgrafik vorliegt, kann SVG häufig geeigneter sein als sämtliche hier verglichenen Rasterformate.

SVG lässt sich ohne den typischen Qualitätsverlust eines Pixelbildes skalieren.

Liegt das Logo dagegen nur als Rastergrafik vor und benötigt Transparenz, kommen beispielsweise PNG oder WebP infrage.

Hinweis: SVG ist ein eigenes Vektorformat und deshalb nicht direkt mit JPG, PNG, WebP und AVIF als Rasterbildformaten vergleichbar.

Welches Format für Icons? #

Auch für Icons kann SVG häufig eine gute Lösung sein, sofern die Grafik tatsächlich als Vektor vorliegt und die technische Umgebung den Einsatz erlaubt.

Bei Raster-Icons mit Transparenz können beispielsweise WebP oder PNG verwendet werden.

Sehr kleine Icons sollten außerdem nicht unnötig in riesigen Pixelabmessungen bereitgestellt werden.

Welches Format für Screenshots? #

Bei Screenshots ist die Lesbarkeit besonders wichtig.

PNG eignet sich aufgrund der verlustfreien Darstellung häufig sehr gut für Benutzeroberflächen und kleine Texte.

WebP kann jedoch ebenfalls sehr gute Ergebnisse bei deutlich geringerer Dateigröße liefern.

Für einen Knowledgebase-Screenshot würde ich deshalb praktisch vergleichen:

PNG
 ↓
Text scharf?
Dateigröße?

WebP
 ↓
Text scharf?
Dateigröße?

        ↓

kleinere Variante wählen,
wenn die Lesbarkeit gleich gut bleibt

Genau deshalb verwenden wir auch für Knowledgebase-Screenshots keinen starren Zwang zu einem bestimmten Format.

Welches Format für Bilder mit transparentem Hintergrund? #

Wenn Transparenz erforderlich ist, scheidet klassisches JPEG aus.

Geeignete Kandidaten sind unter anderem:

PNG
WebP
AVIF
SVG bei geeigneten Vektorgrafiken

Welches davon sinnvoll ist, hängt wiederum vom Bildtyp und dem technischen Workflow ab.

Welches Format für Hero-Bilder? #

Große Hero-Bilder können einen erheblichen Einfluss auf die übertragene Datenmenge und die wahrgenommene Ladegeschwindigkeit haben.

Bei fotografischen Hero-Bildern sind WebP und AVIF deshalb besonders interessant.

Wichtig sind zusätzlich passende Pixelabmessungen und eine sinnvolle Qualitätsstufe.

Ein Hero-Bild wird nicht allein dadurch optimiert, dass du eine Datei von .jpg in .webp umwandelst.

Nur das Dateiformat zu ändern reicht nicht #

Angenommen, ein Foto besitzt:

6000 × 4000 Pixel

und wird lediglich von JPG nach WebP konvertiert.

Die Datei kann dadurch kleiner werden. Wenn das Bild auf der Website aber nur in wesentlich geringeren Abmessungen benötigt wird, werden weiterhin unnötig viele Bildinformationen bereitgestellt.

Eine vollständige Bildoptimierung berücksichtigt deshalb mehrere Faktoren:

Bildabmessungen
+
Dateiformat
+
Kompression
+
Bildqualität
+
technische Auslieferung

Den gesamten Workflow erklären wir unter Bilder für das Web optimieren: Dateigröße, Format und SEO.

Dateiendung einfach umbenennen funktioniert nicht #

Ein Bildformat wird nicht dadurch geändert, dass du lediglich die Dateiendung umbenennst.

Aus:

foto.jpg

kannst du nicht durch bloßes Umbenennen:

foto.webp

machen.

Die Bilddaten müssen tatsächlich in das neue Format kodiert beziehungsweise konvertiert werden.

Wichtig: Ändere eine Dateiendung nicht manuell, um ein anderes Bildformat vorzutäuschen. Verwende ein Bildbearbeitungs- oder Konvertierungswerkzeug, das das gewünschte Format tatsächlich erzeugt.

Was passiert beim Konvertieren? #

Beim Konvertieren wird das Ausgangsbild eingelesen und anschließend mit einem Encoder im neuen Dateiformat gespeichert.

Originalbild
    ↓
dekodieren
    ↓
Bilddaten
    ↓
mit neuem Format kodieren
    ↓
neue Bilddatei

Bei verlustbehafteter Ausgabe spielt dabei auch die gewählte Qualitäts- beziehungsweise Kompressionsstufe eine wichtige Rolle.

Ein bereits stark komprimiertes JPG nicht unnötig weiter komprimieren #

Wenn ein JPEG bereits deutlich verlustbehaftet komprimiert wurde, stellt eine spätere Konvertierung in WebP oder AVIF die zuvor verlorenen Bildinformationen nicht wieder her.

Nach Möglichkeit solltest du neue Webversionen deshalb aus einer hochwertigen Ausgangsdatei erzeugen.

hochwertiges Original
       ↓
WebP / AVIF / JPG erzeugen

besser als:

stark komprimiertes JPG
       ↓
erneut verlustbehaftet konvertieren
       ↓
weitere mögliche Qualitätsverluste

Browserunterstützung berücksichtigen #

Bei einem Webformat muss der Browser des Besuchers die Datei darstellen können.

WebP und AVIF werden von aktuellen verbreiteten Browsern unterstützt. Bei sehr alten Browsern kann die Situation anders aussehen.

Ob du dafür Fallback-Dateien benötigst, hängt von deiner Zielgruppe, dem eingesetzten Website-System und den Browsern ab, die du tatsächlich unterstützen möchtest.

Moderne Websites können unterschiedliche Bildquellen anbieten und den Browser eine unterstützte Variante auswählen lassen.

Mehrere Formate mit dem picture-Element anbieten #

HTML ermöglicht es, unterschiedliche Bildquellen bereitzustellen.

Vereinfacht kann das beispielsweise so aussehen:

<picture>
  <source srcset="bild.avif" type="image/avif">
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" alt="Beschreibung des Bildes">
</picture>

Ein kompatibler Browser kann dadurch ein unterstütztes Format auswählen.

Du musst eine solche Struktur allerdings nicht zwingend manuell erstellen. Moderne CMS, Optimierungswerkzeuge oder Content-Delivery-Systeme können solche Aufgaben teilweise automatisch übernehmen.

Bildformat und responsive Bilder sind unterschiedliche Dinge #

Das Bildformat beantwortet die Frage, wie die Bilddaten gespeichert werden.

Responsive Images beantworten dagegen unter anderem die Frage, welche Bildgröße beziehungsweise Variante für eine bestimmte Darstellung geladen werden soll.

Beide Techniken können kombiniert werden.

Format:
AVIF / WebP / JPG

+

Abmessung:
klein / mittel / groß

=

passende Bildvariante
für das jeweilige Gerät

Welches Format ist am besten für SEO? #

Es gibt kein Bildformat, das allein aufgrund seiner Dateiendung automatisch bessere Rankings erzeugt.

Für SEO ist vielmehr relevant, dass Bilder technisch sinnvoll eingebunden werden und die Website insgesamt gut funktioniert.

Dazu gehören unter anderem angemessene Dateigrößen, passende Abmessungen, gute Ladeperformance, sinnvolle Alternativtexte und ein inhaltlicher Zusammenhang mit der Seite.

Wichtig für SEO: Eine Datei wird nicht allein deshalb „SEO-optimiert“, weil sie im WebP- oder AVIF-Format vorliegt.

Bildformate und Ladezeit #

Ein effizienteres Bildformat kann die zu übertragende Datenmenge reduzieren.

Wie stark sich das auf die tatsächliche Ladezeit auswirkt, hängt jedoch von der gesamten Seite ab.

Eine Website kann beispielsweise bereits kleine Bilder besitzen, aber durch JavaScript, externe Dienste oder andere Ressourcen langsam sein.

Wie du die Ladezeit einer Website sinnvoll misst, erklären wir unter Website-Ladezeit messen und richtig beurteilen.

Bildformate und Core Web Vitals #

Effiziente Bilder können insbesondere dann relevant sein, wenn ein großes Bild einen wichtigen sichtbaren Seiteninhalt darstellt.

Das Dateiformat ist dabei aber nur ein Faktor. Auch Ladepriorität, Abmessungen, Serverantwort, Caching und die übrige Seitenstruktur können eine Rolle spielen.

Die entsprechenden Messwerte erklären wir unter Core Web Vitals erklärt: LCP, INP und CLS.

Was sagt Google PageSpeed Insights zu Bildformaten? #

Performance-Werkzeuge können darauf hinweisen, dass Bilder effizienter kodiert oder in besser geeigneten Formaten ausgeliefert werden könnten.

Solche Hinweise sind nützlich, sollten aber nicht isoliert betrachtet werden.

Wenn die Einsparung sehr klein ist, während eine Konvertierung sichtbare Qualitätsprobleme verursacht oder den Workflow unnötig kompliziert, muss die Maßnahme nicht automatisch höchste Priorität haben.

Wie du solche Hinweise einordnest, behandeln wir unter Google PageSpeed Insights richtig verwenden.

Kann ich alle PNG-Dateien automatisch in WebP umwandeln? #

Technisch können viele Systeme Bilder automatisiert konvertieren. Trotzdem solltest du nicht davon ausgehen, dass jede automatische Konvertierung in jedem Fall ein besseres Ergebnis liefert.

Kontrolliere insbesondere:

Transparenz
Bildqualität
feine Texte
scharfe Kanten
Dateigröße
Darstellung im Browser

Bei einer großen Bildbibliothek empfiehlt sich deshalb zunächst ein Test mit unterschiedlichen Bildtypen.

Soll ich bestehende JPG-Bilder alle ersetzen? #

Nicht zwangsläufig.

Wenn eine vorhandene JPG-Datei bereits gut dimensioniert und effizient komprimiert ist, kann der praktische Nutzen einer nachträglichen Umstellung gering sein.

Priorisiere zunächst Bilder, die tatsächlich auffällig groß sind oder auf wichtigen Seiten einen relevanten Anteil der übertragenen Daten verursachen.

Welches Format sollte ich für neue Bilder verwenden? #

Für viele moderne Websites kann folgende Orientierung sinnvoll sein:

Anwendungsfall	Erste Wahl zum Testen	Alternative
Foto	WebP oder AVIF	JPG
Hero-Foto	WebP oder AVIF	JPG
Produktfotografie	WebP oder AVIF	JPG
Screenshot	WebP oder PNG	je nach Qualitätsvergleich
Grafik mit Transparenz	WebP	PNG oder AVIF
Logo als Vektor	SVG	WebP oder PNG bei Rastergrafik

Auch diese Tabelle ist keine starre Vorschrift. Das konkrete Ergebnis sollte immer geprüft werden.

Unsere Empfehlung für Knowledgebase-Screenshots #

Für Screenshots von Benutzeroberflächen ist eine hohe Lesbarkeit wichtiger als die kleinstmögliche Dateigröße.

Ein sinnvoller Workflow lautet deshalb:

relevanten Bereich ausschneiden
        ↓
sinnvolle Pixelbreite wählen
        ↓
WebP erzeugen
        ↓
Lesbarkeit kontrollieren
        ↓
mit PNG vergleichen, falls nötig
        ↓
kleinere geeignete Variante verwenden

Wenn WebP sichtbare Nachteile bei kleinen Schriften oder feinen UI-Elementen verursacht, kann PNG die bessere Wahl sein.

Entscheidungshilfe: Welches Bildformat soll ich nehmen? #

Ist das Bild eine Vektorgrafik?
        │
        ├── JA → SVG prüfen
        │
        └── NEIN
             ↓
        Ist es ein Foto?
             │
             ├── JA → WebP / AVIF testen
             │          ↓
             │        JPG als Alternative
             │
             └── NEIN
                  ↓
            Transparenz nötig?
                  │
                  ├── JA → WebP / PNG / AVIF
                  │
                  └── NEIN
                       ↓
                  Screenshot oder Grafik?
                       │
                       └── WebP / PNG vergleichen

Qualität und Dateigröße immer gemeinsam beurteilen #

Angenommen, du erzeugst aus demselben Foto mehrere Varianten:

JPG
380 KB

WebP
260 KB

AVIF
190 KB

Aus diesen Zahlen allein solltest du noch nicht automatisch AVIF auswählen.

Öffne die Dateien und vergleiche die sichtbare Qualität.

Wenn die AVIF-Version gleichwertig aussieht, ist die kleinere Datei attraktiv. Zeigt sie dagegen störende Artefakte, kann die etwas größere WebP-Version das bessere Ergebnis sein.

Grundregel: Vergleiche nicht nur Kilobytes. Vergleiche immer Kilobytes und sichtbare Qualität.

Häufige Fehler bei der Wahl des Bildformats #

jedes Bild automatisch als PNG speichern

jedes JPG ungeprüft durch WebP ersetzen

AVIF allein wegen der möglichen Dateigröße verwenden

Dateiendung nur umbenennen statt konvertieren

Transparenz nicht berücksichtigen

Screenshots so stark komprimieren, dass Text unscharf wird

riesige Pixelabmessungen trotz modernem Format beibehalten

Format mit vollständiger Bildoptimierung verwechseln

Praktischer Workflow #

Bildtyp bestimmen
        ↓
Einsatzzweck bestimmen
        ↓
passende Abmessungen festlegen
        ↓
geeignete Formate auswählen
        ↓
Varianten erzeugen
        ↓
Dateigröße vergleichen
        ↓
Bildqualität vergleichen
        ↓
Transparenz prüfen
        ↓
beste geeignete Variante verwenden
        ↓
Darstellung auf der Website testen

Zusammenfassung #

WebP, AVIF, JPG und PNG besitzen unterschiedliche Stärken. Deshalb gibt es kein einzelnes Format, das für jedes Website-Bild automatisch die beste Wahl ist.

JPG eignet sich weiterhin für fotografische Inhalte und besitzt eine sehr breite Unterstützung. PNG ist besonders für verlustfreie Grafiken, Screenshots und Transparenz relevant. WebP kombiniert effiziente Kompression mit Unterstützung für Transparenz und eignet sich dadurch für viele moderne Website-Bilder. AVIF kann insbesondere bei Fotos eine sehr hohe Kompressionseffizienz erreichen.

Für Logos und Icons kann zusätzlich SVG sinnvoll sein, wenn das Ausgangsmaterial als Vektorgrafik vorliegt.

Bei der Entscheidung solltest du nicht nur das Format betrachten. Pixelabmessungen, Kompression, sichtbare Qualität und die technische Einbindung sind mindestens ebenso wichtig.

Das beste Bildformat ist nicht automatisch das modernste oder das mit der kleinsten Datei – sondern das Format, das für den konkreten Einsatzzweck die beste Kombination aus Qualität, Dateigröße und technischer Eignung liefert.