Bildformate-Ratgeber: Wann JPEG, PNG, WebP oder AVIF nutzen

Du hast ein tolles Foto gemacht. Die Farben stimmen, der Ausschnitt passt. Jetzt willst du es auf deine Website laden. Doch halt: Welches Format nimmst du? JPEG? PNG? Oder doch lieber WebP? Die falsche Wahl kostet dich Ladezeit, Bildqualität oder beides. Und deine Besucher merken das sofort. Eine Seite, die drei Sekunden länger lädt, verliert fast die Hälfte ihrer Nutzer. Oft liegt das Problem nicht am Server oder am Code. Es liegt am Bildformat.

Dieser Bildformat Ratgeber zeigt dir, welches Format wann das richtige ist. Du lernst die Stärken und Schwächen von JPEG, PNG, WebP und AVIF kennen. Am Ende weißt du genau, wie du das beste Bildformat für Web-Projekte findest. Ohne Rätselraten.

Was sind die wichtigsten Bildformate und wie unterscheiden sie sich?

Es gibt vier Bildformate, die heute im Web eine echte Rolle spielen. Jedes hat seinen eigenen Charakter.

JPEG gibt es seit 1992. Das Format komprimiert Fotos stark und macht die Dateien klein. Dafür gehen bei jedem Speichern Details verloren. Man nennt das "verlustbehaftete Komprimierung". JPEG kennt keine Transparenz. Animationen kann es auch nicht.

PNG kam 1996 als Antwort auf Lizenzprobleme mit dem GIF-Format. PNG komprimiert ohne Qualitätsverlust. Das nennt man "verlustfreie Komprimierung". Es unterstützt Transparenz mit einem Alphakanal. Dafür sind die Dateien oft deutlich größer als bei JPEG.

WebP hat Google 2010 entwickelt. Es kann beides: verlustbehaftet und verlustfrei komprimieren. WebP unterstützt Transparenz und sogar Animationen. Die Dateien sind meist 25 bis 35 Prozent kleiner als vergleichbare JPEG- oder PNG-Dateien.

AVIF ist der Neuling. Es basiert auf dem AV1-Videocodec und wurde 2019 veröffentlicht. AVIF liefert die beste Komprimierung von allen vier Formaten. Bei gleicher Qualität sind AVIF-Dateien oft 50 Prozent kleiner als JPEG. Es unterstützt Transparenz, Animationen, HDR und einen erweiterten Farbraum.

Wenn du Bildformate vergleichst, geht es immer um drei Fragen: Wie groß ist die Datei? Wie gut sieht das Bild aus? Und welche Funktionen brauche ich?

Wann sollte man JPEG verwenden?

JPEG ist der Klassiker. Und Klassiker haben ihren Platz.

Nutze JPEG für Fotos und Bilder mit vielen Farben und weichen Übergängen. Ein Landschaftsfoto, ein Porträt, ein Produktbild mit natürlichem Hintergrund: Hier spielt JPEG seine Stärke aus. Das Format reduziert Bilddaten clever. Es entfernt Details, die das menschliche Auge kaum wahrnimmt.

Die Qualitätsstufe lässt sich einstellen. Bei 80 bis 85 Prozent Qualität sehen die meisten Fotos noch sehr gut aus. Die Datei ist dabei um ein Vielfaches kleiner als das Original. Gehst du unter 60 Prozent, werden Artefakte sichtbar. Das sind diese typischen Klötzchen an Kanten und in gleichmäßigen Flächen.

JPEG eignet sich weniger gut für Text, Logos oder Grafiken mit scharfen Kanten. Dort entstehen hässliche Komprimierungsartefakte. Auch wenn du Transparenz brauchst, hilft dir JPEG nicht weiter.

Ein weiterer Punkt: Jedes Mal, wenn du eine JPEG-Datei öffnest, bearbeitest und wieder speicherst, geht Qualität verloren. Das nennt man Generationsverlust. Wenn du ein Bild mehrfach bearbeiten willst, arbeite mit einem verlustfreien Format und exportiere am Ende als JPEG.

Trotz seines Alters bleibt JPEG relevant. Jeder Browser unterstützt es. Jedes Programm kann es öffnen. Jedes CMS kann damit umgehen. Diese universelle Kompatibilität ist ein echtes Argument.

Wann ist PNG die richtige Wahl?

PNG ist dein Format, wenn Qualität und Präzision an erster Stelle stehen.

Logos, Icons, Screenshots, Infografiken, Diagramme: Überall dort, wo scharfe Kanten und exakte Farben wichtig sind, ist PNG die richtige Wahl. Das Format komprimiert ohne Qualitätsverlust. Du kannst eine PNG-Datei hundertmal öffnen und speichern. Sie sieht immer gleich aus.

Der große Vorteil von PNG ist der Alphakanal. Damit kannst du Teile des Bildes transparent machen. Nicht nur ganz durchsichtig oder ganz undurchsichtig. Sondern auch halbtransparent. Das ist perfekt für Logos auf wechselnden Hintergründen oder für Overlay-Effekte.

PNG gibt es in zwei Varianten. PNG-8 nutzt eine Palette mit maximal 256 Farben. Das reicht für einfache Grafiken und hält die Datei klein. PNG-24 unterstützt über 16 Millionen Farben und eignet sich für komplexe Bilder.

Der Nachteil? Die Dateigröße. Ein Foto als PNG gespeichert ist oft drei- bis fünfmal so groß wie das gleiche Bild als JPEG. Für einen Online-Shop mit hunderten Produktfotos macht das einen gewaltigen Unterschied bei der Ladezeit.

Nutze PNG also gezielt. Für Grafiken mit Transparenz und scharfen Kanten ist es perfekt. Für Fotos gibt es bessere Optionen.

Warum sollte man auf WebP umsteigen?

WebP ist der praktische Kompromiss. Es vereint die Vorteile von JPEG und PNG in einem Format.

Google hat WebP mit einem klaren Ziel entwickelt: das Web schneller machen. Und das funktioniert. WebP-Dateien mit verlustbehafteter Komprimierung sind im Schnitt 30 Prozent kleiner als JPEG bei vergleichbarer Qualität. Verlustfreie WebP-Dateien sind rund 26 Prozent kleiner als PNG.

Dazu kommt: WebP kann Transparenz. Und zwar auch bei verlustbehafteter Komprimierung. Das konnte vorher kein Format. Du bekommst also ein Bild mit transparentem Hintergrund, das trotzdem klein ist. Perfekt für Produktbilder im Online-Shop.

WebP unterstützt auch Animationen. Du kannst damit animierte GIFs ersetzen und sparst dabei massiv Dateigröße. Ein animiertes GIF mit 2 MB wird als WebP oft nur 300 bis 400 KB groß.

Die Browser-Unterstützung ist mittlerweile hervorragend. Chrome, Firefox, Safari, Edge und Opera unterstützen WebP. Laut aktuellen Zahlen können über 97 Prozent aller Browser weltweit WebP anzeigen. Das Argument "Mein Browser kann das nicht" zählt praktisch nicht mehr.

Wenn du heute ein Bildformat konvertieren willst, ist der Wechsel von JPEG und PNG zu WebP der einfachste Weg zu schnelleren Ladezeiten. Du musst nicht alles auf einmal umstellen. Fang mit den größten Bildern an. Dort ist der Effekt am größten.

Ein kleiner Wermutstropfen: Manche ältere Bildbearbeitungsprogramme können WebP nicht öffnen. Photoshop unterstützt es erst seit Version 23.2. GIMP kann es schon länger. Für die Arbeit im Team solltest du prüfen, ob alle Werkzeuge WebP beherrschen.

Lohnt sich AVIF schon jetzt?

AVIF ist technisch das beste Bildformat. Die Frage ist nur: Ist die Welt schon bereit dafür?

Bei der Komprimierung schlägt AVIF alle anderen Formate deutlich. Vergleichsstudien zeigen: Bei gleicher visueller Qualität ist eine AVIF-Datei rund 50 Prozent kleiner als JPEG und 20 Prozent kleiner als WebP. Das sind keine kleinen Unterschiede. Das ist ein Sprung.

AVIF unterstützt HDR-Inhalte und einen erweiterten Farbraum (Wide Color Gamut). Für Fotografen und Designer, die Wert auf exakte Farbdarstellung legen, ist das ein echtes Argument. Auch Transparenz und Animationen sind mit an Bord.

Die Browser-Unterstützung wächst stetig. Chrome, Firefox und Safari unterstützen AVIF. Edge zog nach. Aktuell können etwa 93 bis 95 Prozent der Browser AVIF darstellen. Das ist gut, aber nicht perfekt. Du brauchst also noch einen Fallback für ältere Browser.

Es gibt aber auch Nachteile. Das Kodieren von AVIF-Dateien dauert deutlich länger als bei JPEG oder WebP. Wenn du tausende Bilder auf einmal umwandeln willst, merkst du das. Die Dekodierung im Browser ist ebenfalls etwas langsamer. Bei sehr großen Bildern kann das zu einem kurzen Flackern führen.

Meine Empfehlung: Ja, AVIF lohnt sich jetzt. Aber nutze es klug. Setze AVIF als bevorzugtes Format ein und liefere WebP oder JPEG als Fallback. So profitierst du von der besseren Komprimierung, ohne Besucher mit älteren Browsern auszuschließen.

Wie wählt man das richtige Format für sein Projekt?

Die Wahl des Formats hängt von deinem Inhalt ab. Hier ist ein klarer Entscheidungsweg.

Hast du ein Foto oder ein Bild mit vielen Farben und Verläufen? Dann nimm AVIF als erste Wahl, WebP als Fallback und JPEG als letzten Fallback. Diese Kombination gibt dir die beste Balance aus Qualität und Dateigröße.

Brauchst du Transparenz? Dann kommen nur PNG, WebP oder AVIF in Frage. JPEG fällt raus. Wenn die Datei möglichst klein sein soll, nimm WebP oder AVIF mit Transparenz. PNG nur, wenn du verlustfreie Qualität brauchst.

Hast du ein Logo, ein Icon oder eine Grafik mit wenigen Farben? SVG wäre hier eigentlich die beste Wahl. Wenn es ein Pixelformat sein muss, nimm PNG-8 für einfache Grafiken oder WebP verlustfrei.

Ist es eine Animation? Vergiss GIF. Nimm WebP oder AVIF. Die Dateien sind um ein Vielfaches kleiner. Die Qualität ist besser.

Geht es um einen E-Commerce-Shop? Produktfotos profitieren enorm von modernen Formaten. Stell dir einen Shop mit 500 Produktbildern vor. Wechselst du von JPEG zu WebP, sparst du vielleicht 30 Prozent Datenvolumen. Bei AVIF sind es 50 Prozent. Deine Seite lädt schneller, deine Kunden bleiben länger, dein Google-Ranking steigt.

Dieser JPEG PNG WebP AVIF Vergleich zeigt: Es gibt kein universell bestes Format. Es gibt nur das beste Format für deinen konkreten Anwendungsfall.

Was passiert beim Konvertieren zwischen Formaten?

Wenn du ein Bildformat konvertieren willst, solltest du wissen, was dabei unter der Haube passiert.

Von JPEG zu WebP oder AVIF: Das Bild wurde schon einmal verlustbehaftet komprimiert. Die verlorenen Details kommen nicht zurück. Du komprimierst also ein bereits komprimiertes Bild erneut. Das kann zu weiteren Qualitätsverlusten führen. Am besten konvertierst du vom Original (RAW, TIFF oder PNG) direkt ins Zielformat.

Von PNG zu WebP oder AVIF verlustfrei: Hier verlierst du keine Qualität. Du bekommst ein kleineres Bild, das identisch aussieht. Das ist der ideale Fall.

Von PNG zu JPEG: Du verlierst die Transparenz. Transparente Bereiche werden durch eine Hintergrundfarbe ersetzt, meistens Weiß. Und die Komprimierung ist verlustbehaftet. Mach das nur, wenn du die Transparenz nicht brauchst.

Von WebP oder AVIF zurück zu JPEG oder PNG: Das funktioniert technisch problemlos. Aber die Datei wird größer, nicht kleiner. Und verlorene Details kommen nicht zurück. Konvertieren in ein älteres Format macht die Qualität nicht besser.

Ein wichtiger Tipp: Behalte immer deine Originaldateien. Konvertiere immer vom Original ins Zielformat. Nicht von einem komprimierten Format ins nächste. So bewahrst du die bestmögliche Qualität.

Wenn du regelmäßig Bilder umwandeln musst, hilft ein gutes Tool. Es sollte verschiedene Qualitätsstufen anbieten und eine Vorschau zeigen. So siehst du sofort, wie das Ergebnis aussieht, bevor du dich festlegst.

Wie liefert man verschiedene Formate an verschiedene Browser?

Die Theorie ist klar: AVIF für moderne Browser, WebP als Fallback, JPEG als Notlösung. Aber wie setzt man das technisch um?

Das HTML Picture-Element ist der sauberste Weg. Du definierst mehrere Quellen und der Browser wählt die beste, die er unterstützt:

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

Der Browser prüft die Quellen von oben nach unten. Kann er AVIF, nimmt er das. Kann er nur WebP, nimmt er das. Kann er keins von beiden, nimmt er das JPEG im img-Tag. So einfach ist das.

Content Negotiation auf dem Server ist die zweite Möglichkeit. Der Browser sendet bei jeder Anfrage einen Accept-Header. Darin steht, welche Formate er versteht. Dein Server kann dann automatisch das beste Format ausliefern. Apache und Nginx lassen sich dafür konfigurieren. CDNs wie Cloudflare oder Fastly machen das sogar automatisch.

Build-Tools und Frameworks helfen dir bei der Automatisierung. Next.js zum Beispiel hat eine eingebaute Bildoptimierung. Du lädst ein JPEG hoch und das Framework liefert automatisch WebP oder AVIF aus. Ähnliche Funktionen gibt es in Nuxt, Gatsby und anderen modernen Frameworks.

WordPress-Plugins übernehmen die Arbeit, wenn du kein eigenes Frontend baust. Plugins wie ShortPixel oder Imagify konvertieren deine Bilder automatisch und liefern das passende Format aus.

Der Aufwand lohnt sich. Jedes Kilobyte, das du einsparst, macht deine Seite schneller. Und schnellere Seiten ranken besser bei Google.

Welche Format-Fehler bremsen deine Website aus?

Viele Websites verschenken Performance durch vermeidbare Fehler bei der Bildoptimierung. Hier sind die häufigsten Stolperfallen.

Fehler 1: Nur ein Format für alles. Manche Entwickler speichern alles als PNG. Produktfotos, Hintergrundbilder, Icons. Die Seite wird dadurch unnötig langsam. Jeder Bildtyp verdient sein passendes Format.

Fehler 2: Maximale Qualität bei JPEG. Qualitätsstufe 100 bei JPEG bringt kaum sichtbare Verbesserung gegenüber 85. Aber die Datei ist doppelt so groß. Finde den Sweet Spot. Meist liegt er zwischen 75 und 85.

Fehler 3: Bilder in falscher Größe ausliefern. Du lädst ein Bild mit 4000 x 3000 Pixeln hoch und zeigst es mit 400 x 300 Pixeln an. Der Browser lädt die volle Datei und skaliert sie dann herunter. Das ist Verschwendung. Erstelle Bilder in der Größe, in der sie angezeigt werden. Nutze srcset für verschiedene Bildschirmgrößen.

Fehler 4: Keine modernen Formate nutzen. Wenn deine Website nur JPEG und PNG ausliefert, verschenkst du 30 bis 50 Prozent Einsparpotenzial. Der Umstieg auf WebP und AVIF ist kein Hexenwerk. Die Tools sind da. Die Browser sind bereit.

Fehler 5: Bilder nicht lazy laden. Bilder, die erst beim Scrollen sichtbar werden, sollten auch erst dann geladen werden. Das Attribut loading="lazy" auf dem img-Tag reicht dafür aus. Einfach, aber wirkungsvoll.

Fehler 6: Kein Fallback definieren. Du lieferst nur AVIF aus und vergisst den Fallback. Fünf Prozent deiner Besucher sehen gar kein Bild. Das ist vermeidbar. Nutze immer das picture-Element mit mehreren Quellen.

Fehler 7: Metadaten nicht entfernen. Fotos von Smartphones enthalten oft umfangreiche EXIF-Daten: GPS-Koordinaten, Kameraeinstellungen, Zeitstempel. Das sind schnell 50 bis 100 KB pro Bild. Für die Anzeige im Web brauchst du diese Daten nicht. Entferne sie beim Export.

Prüfe deine Website mit Google PageSpeed Insights oder Lighthouse. Dort siehst du sofort, welche Bilder Optimierungspotenzial haben.

Deine Bilder verdienen das richtige Format

Die Wahl des richtigen Bildformats ist keine Nebensache. Sie beeinflusst die Ladezeit deiner Website, das Nutzererlebnis und dein Suchmaschinenranking. Jetzt kennst du die Unterschiede zwischen JPEG, PNG, WebP und AVIF. Du weißt, wann welches Format passt und welche Fehler du vermeiden solltest.

Der nächste Schritt? Setz dein Wissen um. Schau dir die Bilder auf deiner Website an. Prüfe die Formate und Dateigrößen. Und dann optimiere.

Mit ConvertIMG kannst du deine Bilder schnell und einfach zwischen allen gängigen Formaten konvertieren. Lade deine Bilder hoch, wähle das Zielformat und lade das Ergebnis herunter. Direkt im Browser, ohne Installation, ohne Anmeldung. Probier es aus und mach deine Website schneller.