Beste Bildformate für das Web: JPEG, PNG, WebP, AVIF, SVG
Vergleiche JPEG, PNG, WebP, AVIF und SVG, um das beste Format für Geschwindigkeit, Qualität und SEO zu wählen. Die Formatwahl beeinflusst nicht nur die Optik, sondern auch Dateigröße, Ladezeit, CDN-Kosten und letztlich Konversionen. Mit dem richtigen Format erreichen Sie eine bessere Balance aus Qualität, Performance und Kompatibilität – auf Desktop wie auf Mobilgeräten.
1. Warum die Wahl des Bildformats wichtig ist
Bilder machen häufig 40–70 % der übertragenen Bytes einer Seite aus. Ein suboptimales Format vergrößert Dateien unnötig, verschlechtert LCP (Largest Contentful Paint) und erhöht Absprünge. Das richtige Format reduziert Bytes ohne sichtbare Qualitätsverluste und verbessert Core Web Vitals, was sich positiv auf SEO und Nutzerzufriedenheit auswirkt.
Zusätzlich spielt die Darstellungsqualität auf hochauflösenden Displays (Retina/4K) eine Rolle. Vektorformate wie SVG bleiben dort gestochen scharf, während Rasterformate sinnvoll skaliert und komprimiert werden sollten.
2. Gängige Bildformate im Web
| Format | Am besten für | Vorteile | Nachteile |
|---|---|---|---|
| JPEG | Fotos | Sehr gute Kompression, enorme Verbreitung, schnelle Dekodierung | Verlustbehaftet, keine Transparenz, Artefakte bei Text/Grafik |
| PNG | Logos, UI-Elemente, Transparenz | Verlustfrei, Alpha-Kanal, scharf für Illustrationen/Text | Deutlich größere Dateien als JPEG/WebP bei Fotos |
| WebP | Fotos & Grafiken | Bis zu ~30–50 % kleiner als JPEG/PNG, Transparenz & Animation möglich | Fallback für sehr alte Browser nötig (selten) |
| AVIF | Next-Gen Fotoqualität | Exzellente Kompression & Qualität, gute Detailtreue auch bei niedriger Bitrate | Langsamere Encodierung, Support in alten Umgebungen eingeschränkt |
| SVG | Icons, Logos, Vektorgrafiken | Pixelunabhängig/skalierbar, winzige Dateien, perfekt für UI | Nicht für Fotos geeignet; komplexe SVGs können groß werden |
3. Praktische Empfehlungen
- Fotos: Bevorzugen Sie WebP oder AVIF für beste Kompression. Fallback auf JPEG, wenn ein alter Browser erkannt wird.
- Transparenz: Nutzen Sie PNG (oder WebP/AVIF mit Alpha), wenn echte Transparenz erforderlich ist.
- Logos & Icons: Verwenden Sie SVG für gestochen scharfe Darstellung auf allen Pixel-Dichten.
- Responsive Images: Arbeiten Sie mit
<picture>,srcsetundsizes, um je nach Viewport die passende Variante auszuliefern. - Progressive JPEGs: Für große Hero-Bilder kann progressives Rendering die wahrgenommene Ladezeit verbessern.
- Pipeline & CDN: Automatisieren Sie Formatkonvertierung (z. B. AVIF/WebP) und Caching am Edge.
4. SEO- & Performance-Auswirkungen
Moderne Formate wie WebP und AVIF reduzieren das LCP, verbessern INP/CLS indirekt durch kleinere Dateien und verringern die gesendeten Bytes. Das führt zu schnellerem Rendering, niedrigeren Bounce-Rates und besseren UX-Signalen – Faktoren, die sich günstig auf die organische Sichtbarkeit auswirken können.
Prüfen Sie Ergebnisse mit Lighthouse, CrUX/Field-Daten und Monitoring in der Google Search Console. Testen Sie Varianten (JPEG vs. WebP vs. AVIF) stichprobenartig, denn je nach Motiv (feine Details, Texturen) kann ein Format besser abschneiden. Achten Sie außerdem auf korrekte Dimensionierung und Lazy-Loading, damit Bilder nicht größer ausgeliefert werden als angezeigt.