WebP, PNG oder JPEG? Das richtige Bildformat wählen
|6 Minuten Lesezeit|
Kaum eine Entscheidung beim Erstellen einer Website wird so oft unterschätzt wie die Wahl des richtigen Bildformats. Dabei entscheidet genau das mit darüber, wie schnell deine Seite lädt, wie gut sie bei Google rankt und wie professionell deine Bilder am Ende aussehen.
WebP, PNG oder JPEG: warum das Bildformat über mehr entscheidet als du denkst
Wenn du Bilder für deine Website exportierst, stehst du fast immer vor derselben Entscheidung: WebP, PNG oder JPEG? Was auf den ersten Blick nach einem technischen Detail aussieht, wirkt sich direkt auf Ladezeiten, Core Web Vitals und damit auf dein Google-Ranking aus.
JPEG: Der Klassiker für Fotos
JPEG (Joint Photographic Experts Group) ist seit Jahrzehnten das Standardformat für Fotos im Web. Es nutzt eine verlustbehaftete Komprimierung: Je stärker du komprimierst, desto kleiner wird die Datei, aber auch desto mehr Bildinformationen gehen verloren.
Für Fotos mit vielen Farbverläufen ist JPEG nach wie vor eine solide Wahl, da das Auge kleine Kompressionsartefakte kaum wahrnimmt. Für Grafiken mit klaren Kanten, Text oder Transparenz stößt das Format aber schnell an seine Grenzen.
- ✅ Vorteile: kleine Dateigröße, breite Unterstützung, gut für Fotos
- ❌ Nachteile: keine Transparenz, Qualitätsverlust bei starker Komprimierung, ungeeignet für Grafiken mit scharfen Kanten
PNG: Verlustfrei mit Transparenz
PNG (Portable Network Graphics) komprimiert verlustfrei: Jedes Pixel bleibt exakt erhalten. Das macht das Format ideal für Logos, Icons, Screenshots und Grafiken mit Text oder klaren Kanten. Zusätzlich unterstützt PNG einen transparenten Hintergrund, was bei JPEG nicht möglich ist.
Der Nachteil: Ohne Kompression werden PNG-Dateien schnell deutlich größer als vergleichbare JPEGs oder WebPs, besonders bei Fotos. Für großflächige Bildergalerien oder viele Produktfotos ist PNG deshalb selten die beste Wahl.
- ✅ Vorteile: verlustfreie Qualität, Transparenz möglich, scharfe Kanten bei Grafiken und Text
- ❌ Nachteile: deutlich größere Dateien als JPEG oder WebP, vor allem bei Fotos
WebP: Das moderne Allround-Format
WebP wurde von Google speziell für das Web entwickelt und vereint die Vorteile von JPEG und PNG in einem Format: Es beherrscht sowohl verlustbehaftete als auch verlustfreie Kompression und unterstützt zusätzlich Transparenz.
Für die meisten Anwendungsfälle ist WebP heute die beste Wahl, da es Fotos und Grafiken bei gleicher Qualität deutlich kleiner speichert als JPEG oder PNG. Google selbst empfiehlt WebP explizit zur Verbesserung der Ladezeit.
Inzwischen unterstützen alle modernen Browser WebP. Für ältere Systeme lohnt sich trotzdem ein Fallback auf JPEG oder PNG, etwa über das HTML-Element picture mit mehreren Quellformaten.
- ✅ Vorteile: deutlich kleinere Dateien, Transparenz möglich, verlustfrei und verlustbehaftet nutzbar
- ❌ Nachteile: ältere Software und Systeme können WebP teils nicht öffnen, Fallback empfehlenswert
| Format | Kompression | Transparenz | Idealer Einsatzzweck |
|---|---|---|---|
JPEG | verlustbehaftet | Nein | Fotos, komplexe Farbverläufe |
PNG | verlustfrei | Ja | Logos, Icons, Screenshots, Grafiken mit Text |
WebP | verlustbehaftet oder verlustfrei | Ja | Fast alle Web-Bilder: Fotos & Grafiken |
Tipp: Nutze WebP als Standard und JPEG oder PNG als Fallback für maximale Kompatibilität.
Welches Format solltest du wählen?
Als Faustregel gilt: Nutze WebP, wo immer möglich. Für Fotos ohne Transparenzbedarf ist auch JPEG eine gute Alternative, wenn WebP aus technischen Gründen nicht infrage kommt. PNG lohnt sich vor allem dann, wenn du auf verlustfreie Qualität oder Transparenz angewiesen bist und die Dateigröße zweitrangig ist, etwa bei Logos oder Icons.
Die Core Web Vitals von Google bewerten unter anderem, wie schnell das größte sichtbare Element einer Seite lädt. Bilder sind dabei meist der größte Hebel, den du selbst in der Hand hast.
Egal für welches Format du dich entscheidest: Ohne zusätzliche Bildkompression, passende Bildgrößen und Lazy Loading bleibt viel Potenzial ungenutzt. Wie du deine Ladezeiten insgesamt in den Griff bekommst, erfährst du in unserem Beitrag zum Thema Pagespeed optimieren.
0561 47396410 
