PNG vs JPG vs WebP — Wählen Sie das richtige Format, bevor Ihre Benutzer aufgeben

Sie haben Wochen lang Ihr Site perfektioniert. Das Design ist scharf, der Code ist sauber, und dann fügen Sie eine 3,8 MB große PNG-Hero-Bild auf die Startseite und beobachten, wie sich Ihre Lighthouse-Score plötzlich verschlechtert. Wir haben das alle erlebt.

Die Auswahl des richtigen Bildformats ist keine glamouröse Aufgabe, aber es ist eine der höchsten Leistungsfaktoren, die Sie für die Ladezeit, die Core Web Vitals und die allgemeine Benutzererfahrung optimieren können. Dieses Leitfaden schneidet die Störungen durch, damit Sie genau wissen, wann Sie PNG, JPG, WebP, AVIF oder sogar GIF wählen sollten – und warum eine falsche Auswahl Ihnen mehr kostet, als Sie denken.

Die kurze Antwort (wenn Sie in Eile sind)

• Fotos und komplexe Bilder: Verwenden Sie WebP. Fallback auf JPG.
• Logos, Icons, Screenshots mit Text: Verwenden Sie WebP. Fallback auf PNG.
• Animationen: Verwenden Sie WebP oder Video. GIF ist ein letzter Ausweg.
• Für anspruchsvolle Projekte, die moderne Browser ansprechen: Probieren Sie AVIF aus.

Noch immer lesen? Gut. Hier ist das vollständige Bild.

PNG vs JPG vs WebP: Was ist tatsächlich anders?

JPG (JPEG) — Das Arbeitspferd

JPEG ist seit 1992 auf dem Markt und ist immer noch eine der am häufigsten verwendeten Formate im Web – mit gutem Grund. Es verwendet verlustbehaftete Kompression, was bedeutet, dass Bild-Daten verworfen werden, um die Dateigröße zu verringern. Für Fotografien ist dieser Kompromiss bei Qualitätsstufen von 70–85% für das menschliche Auge fast unsichtbar.

Wo JPG versagt: Text, Linienzeichnungen, Logos und alles, was scharfe Kanten oder flache Farben hat. Diese verlustbehaftete Kompression führt zu sichtbaren Artefakte – blockartige Verwischungen um Text, verschmutzte Kanten auf Icons. Für diese Anwendungsfälle benötigen Sie verlustfreie Kompression.

Typische JPG-Dateigröße für ein 1200×800-Foto: ~150–250 KB bei guter Qualität.

PNG — Verlustfrei, transparent und oft zu groß

PNG verwendet verlustfreie Kompression – jedes Pixel wird genau erhalten. Das macht es die richtige Wahl für Logos, UI-Screenshots, Illustrationen mit flachen Farben und jedes Bild, das einen transparenten Hintergrundbedarf. JPG kann keine Transparenz bieten. PNG kann.

Der Nachteil: Verlustfreie Kompression bedeutet größere Dateien. Ein vollfarbiges Foto gespeichert als PNG kann leicht 3–5-mal die Größe des entsprechenden JPG erreichen. Das ist in Ordnung für ein 200×200-Logo. Es ist ein Katastrophe für ein vollständig überdeckendes Hero-Bild.

Typische PNG-Dateigröße für ein 1200×800-Foto: ~2–4 MB. (Ja, wirklich. Das ist der Grund, warum Ihr Lighthouse-Score weint.)

WebP — Das moderne Standardformat

Entwickelt von Google und nun in allen modernen Browsern unterstützt, liefert WebP 25–35% kleinere Dateien als JPG bei gleicher visueller Qualität und 26% kleiner als PNG für verlustfreie Bilder. Es unterstützt auch Transparenz, sodass es in den meisten Fällen sowohl JPG als auch PNG ersetzen kann.

WebP bietet sowohl verlustbehaftete als auch verlustfreie Modi und unterstützt Animationen – was es zu einem zulässigen Ersatz für GIF macht. Die Browserunterstützung ist hervorragend: Chrome, Firefox, Safari (seit Version 14), Edge und Opera unterstützen es nativ.

Typische WebP-Dateigröße für ein 1200×800-Foto: ~100–180 KB. Gleiches Qualitätsniveau, deutlich kleiner.

AVIF — Die Spitzenkraft

AVIF leitet sich aus dem AV1-Video-Codec ab und bietet Kompressionseffizienz, die selbst WebP übertrifft – oft 50% kleiner als JPG bei gleicher Qualitätsebene. Es behandelt HDR und breite Farbpalette besser als alle anderen Webformate.

Der Nachteil: Die Browserunterstützung wächst zwar, ist jedoch noch nicht universell (kein Safari auf iOS 15 und früher). Die Kodierung ist langsam. Für die meisten Projekte im Jahr 2025 bleibt WebP der sicherere Standard. Verwenden Sie AVIF, wenn Sie eine Zielgruppe mit modernen Browsern haben oder wenn Sie die Infrastruktur haben, um es effizient zu generieren.

GIF — Das Zombie-Format

GIF ist auf 256 Farben beschränkt, erzeugt große Dateien für Animationen und ist seit Jahren technisch veraltet. Doch hier ist es immer noch, das beflügelt Slack-Chatkanäle und Produkt-Start-Verkündungen überall.

Wenn Sie etwas animieren müssen, verwenden Sie eine WebP-Animation oder – besser noch – eine schließende MP4-Video-Datei. Eine animierte GIF kann durch eine 10-fach kleinere Video-Datei ersetzt werden, die genauso gut läuft. Der einzige gültige Grund, noch auf GIF zu setzen, ist die Kompatibilität mit Plattformen, die Video oder WebP nicht unterstützen (einige E-Mail-Client, ältere CMS).

Vergleichstabelle der Formate

Hier ist das vollständige Bild im Überblick:

Format	Kompression	Transparenz	Animation	Am besten für	Browserunterstützung
JPG	Verlustbehaftet	NEIN	NEIN	Fotos, realistische Bilder	Universal
PNG	Verlustfrei	Ja (Alpha)	NEIN	Logos, UI, textreiche Bilder	Universal
WebP	Verlustbehaftet & verlustfrei	Ja	Ja	Fast alles	Alle modernen Browser
AVIF	Verlustbehaftet & verlustfrei	Ja	Ja	Hochwertige Fotos, HDR	Chrome, Firefox, Safari 16+
GIF	Verlustfrei (256 Farben)	Ja (1-Bit)	Ja	Einfache Animationen (Legacy)	Universal
SVG	Vektor (skalierbar)	Ja	Ja (CSS)	Symbole, Logos, Illustrationen	Universal

Realer Einfluss auf Core Web Vitals

Das Bildformat beeinflusst zwei Core Web Vitals-Metriken direkt:

Largest Contentful Paint (LCP)

LCP misst, wie lange es dauert, bis das größte sichtbare Element – normalerweise ein Hero-Bild – geladen wird. Ein 3 MB großes PNG-Hero-Bild bei Mobilverbindung kann Ihr LCP-Budget komplett ausnutzen. Das gleiche Bild als WebP mit 300 KB lädt in einem Bruchteil der Zeit. Googles Rang-Signale achten auf diese Zahl.

Praktische Regel: Ihr LCP-Bild sollte bei den meisten Anwendungsfällen unter 200 KB sein. Wenn es sich um ein vollbreiten Hero-Bild auf einer modernen Seite handelt, streben Sie unter 150 KB an. Verwenden Sie WebP. Wenn Sie ein besonders komplexes Foto haben, kombinieren Sie WebP mit srcset um verschiedene Größen an verschiedene Ansichten zu liefern.

Cumulative Layout Shift (CLS)

CLS ist nicht direkt mit dem Format verbunden, aber es lohnt sich hier zu erwähnen: Wenn Ihre Bilder ohne explizite width und height Attribute geladen werden, verändert sich die Seite beim Eintreffen. Legen Sie immer die Dimensionen auf Ihre <img> Tags – unabhängig davon, welches Format Sie wählen.

Wann Sie jedes Format verwenden: Entscheidungsleitfaden

Verwenden Sie JPG, wenn:

• Sie universelle Kompatibilität benötigen (ältere Browser, E-Mail, ältere CMS)
• Sie Fotografien an eine breite Zielgruppe liefern und WebP nicht bereitstellen können
• Sie einen zuverlässigen Fallback innerhalb eines <picture> Elements benötigen

Verwenden Sie PNG, wenn:

• Sie pixelgenaue verlustfreie Qualität benötigen (Screenshots für Dokumentation, UI-Mockups)
• Sie Transparenz benötigen und WebP nicht bereitstellen können
• Das Bild hat scharfe Kanten, flache Farben oder Text, bei dem JPG-Artefakte offensichtlich wären

Verwenden Sie WebP, wenn:

• Sie ein modernes Web-Projekt erstellen (dies sollte Ihr Standard in 2025 sein)
• Sie kleinere Dateien als JPG oder PNG benötigen, ohne sichtbare Qualitätsverluste
• Sie Transparenz benötigen, ohne das Gewicht von PNG
• Sie GIF durch animierte Inhalte ersetzen möchten

Verwenden Sie AVIF, wenn:

• Ihre Zielgruppe verwendet moderne Browser und Sie maximale Kompression benötigen
• Sie HDR oder breite Farbpalette fotografieren
• Sie eine Bild-CDN-Infrastruktur haben, die AVIF auf der Stelle kodieren kann

Verwenden Sie SVG, wenn:

• Das Bild ein Icon, Logo oder Illustration ist, die sich bei jeder Größe skalieren muss
• Sie Elemente mit CSS animieren oder stilisieren möchten
• Dateigröße spielt eine Rolle und das Bild besteht aus Pfaden, nicht aus Pixeln

Wie Sie mehrere Formate mit

Sie müssen nicht nur ein Format wählen – das <picture> Element ermöglicht es, das beste verfügbare Format jedem Browser anzubieten:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

Die Browser wählen das erste unterstützte Format. Moderne Browser erhalten AVIF; etwas ältere erhalten WebP; alle anderen erhalten JPG. Kein JavaScript erforderlich.

Konvertieren Sie Formate online

Wenn Sie Bilder zwischen Formaten konvertieren müssen, ohne etwas zu installieren, verfügt das Image Converter Tool auf iotools.cloud über PNG, JPG, WebP, AVIF, GIF und mehr – direkt im Browser. Hochladen, Format wählen, herunterladen. Keine Konten, keine Wasserzeichen.

Es ist besonders nützlich für schnelle, einzelne Konvertierungen: das Logo eines Kunden von PNG in WebP zu konvertieren, bevor es in eine Seite eingefügt wird, oder Screenshots für eine Dokumentationsseite in Bulk zu konvertieren.

Das Fazit

Die Ära, in der man PNG oder JPG für alles standardmäßig wählt, ist vorbei. WebP bietet die beste Kombination aus Kompression, Qualität und Kompatibilität für fast jedes Web-Verwendungsfall – und es sollte Ihr Ausgangspunkt in 2025 sein. Halten Sie JPG und PNG als Rückfalloptionen bei Bedarf und achten Sie auf AVIF, während die Browserunterstützung reift.

Ihre Benutzer werden das Format nicht bemerken. Sie werden bemerken, ob Ihre Seite in zwei Sekunden oder acht Sekunden lädt. Machen Sie die richtige Entscheidung, bevor sie sich verärgern.

Das könnte Ihnen auch gefallen