Bilder machen etwa 50–60 % des Datenvolumens einer durchschnittlichen Webseite aus. Die Wahl des richtigen Bildformats ist eine der wirkungsvollsten Optimierungen für die Web-Performance. Hier finden Sie eine praktische Übersicht über alle Formate und deren Anwendungsbereiche.
Die Formate, die Sie kennen sollten
JPG (JPEG)
Der Klassiker. JPG ist seit den 1990er Jahren der Standard für Fotos im Web. Es verwendet eine verlustbehaftete Komprimierung, die für Fotos optimiert ist – natürliche Farbverläufe, Texturen und komplexe Szenen.
Ideal für: Fotos, bei denen WebP oder AVIF nicht praktikabel sind oder Kompatibilität mit älteren Formaten erforderlich ist.
Schwächen: Größer als moderne Formate, keine Transparenz, Kompressionsartefakte bei geringerer Qualität.
PNG
PNG ist ein verlustfreies Format, ideal für Grafiken mit flachen Farben, scharfen Kanten und transparentem Hintergrund.
Ideal für: Logos, Icons, Screenshots, UI-Elemente, Bilder, die Transparenz benötigen.
Schwächen: Deutlich größer als JPG für Fotos, längere Ladezeiten.
WebP
Googles WebP-Format bietet verlustbehaftete und verlustfreie Komprimierung, unterstützt Transparenz und ist sowohl JPG als auch PNG überlegen. Es ist mittlerweile der empfohlene Standard für Webbilder.
Ideal für: Fast alles – Fotos (ersetzen JPG), Logos/Grafiken (ersetzen PNG), Webbilder im Allgemeinen.
Vorteil bei der Dateigröße: 25–35 % kleiner als JPG bei gleicher Bildqualität; ähnlich wie PNG, aber oft kleiner.
Browserunterstützung: 97%+ (Chrome, Firefox, Safari, Edge – alle modernen Browser).
AVIF
AVIF, abgeleitet vom AV1-Videocodec, ist das neueste gängige Bildformat. Es erzielt eine bessere Komprimierung als WebP – oft 20–50 % kleinere Dateigrößen bei gleicher Qualität.
Ideal für: Statische Bilder, bei denen maximale Komprimierung Priorität hat und Sie den Server-/Build-Prozess kontrollieren.
Schwächen: Die Kodierung ist langsamer (nicht ideal für die Echtzeitgenerierung), ältere Browserversionen unterstützen sie möglicherweise nicht.
Browserunterstützung: Chrome 85+, Firefox 93+, Safari 16+, Edge 121+.
SVG
SVG ist ein Vektorformat – Bilder werden als mathematische Pfade und nicht als Pixel beschrieben. SVG-Dateien sind auflösungsunabhängig und typischerweise sehr klein für Logos und Icons.
Ideal für: Logos, Icons, Illustrationen, Diagramme, alle Grafiken, die sich an verschiedene Größen anpassen lassen.
Nicht geeignet für: Fotografien oder Bilder mit komplexen Farbverläufen und Texturen.
Format vs. Anwendungsfallmatrix
| Inhaltstyp | Bestes Format | Ausweichformat |
|---|---|---|
| Foto | AVIF | WebP → JPG |
| Produktfoto | WebP | JPG |
| Logo | SVG | PNG |
| Symbol | SVG | PNG |
| Screenshot | WebP | PNG |
| Illustration | SVG oder WebP | PNG |
| Hintergrundmuster | WebP | JPG |
| Animiert | WebP | GIF |
Leistungsauswirkungen: Konkrete Zahlen
Umwandlung eines typischen Produktfotos in moderne Formate:
| Format | Dateigröße | Qualität |
|---|---|---|
| JPG (Qualität 85) | 340 KB | Baseline |
| PNG | 1,2 MB | Verlustfrei |
| WebP (Qualität 80) | 210 KB | ≈ JPG 85 |
| AVIF (Qualität 60) | 155 KB | ≈ JPG 85 |
Durch den Wechsel von JPG zu WebP lässt sich die Bilddateigröße pro Bild um etwa 38 % reduzieren. Auf einer Seite mit 20 Produktbildern können dadurch potenziell mehrere Megabyte pro Seitenaufruf eingespart werden.
Das <picture> -Element für progressive Verbesserung
Wenn Sie AVIF mit WebP-Fallback und JPG als letztem Fallback bereitstellen möchten:
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Product photo" />
</picture>
Dadurch können moderne Browser AVIF nutzen, ältere moderne Browser WebP und ältere Browser greifen auf JPG zurück – ganz ohne JavaScript.
Was ist mit den Core Web Vitals?
Largest Contentful Paint (LCP) ist eine der wichtigsten Kennzahlen der Google Web Vitals und wird maßgeblich von der Ladezeit von Bildern beeinflusst. Die Verwendung von WebP oder AVIF für Ihr Titelbild und Ihre Produktfotos kann Ihren LCP-Wert, ein wichtiges Ranking-Signal von Google, direkt verbessern.
Weitere Tipps für Webbilder:
- Um Layoutverschiebungen zu vermeiden, fügen Sie die Attribute
width, ,heightund hinzu (CLS). - Verwenden Sie
loading="lazy"für Bilder unterhalb der Falte. - Verwenden Sie
fetchpriority="high"auf Ihrem LCP-Bild (normalerweise dem Hero-Bild)
Konvertierung Ihrer Bilder
Mit dem Bildkonverter von PicsSizer können Sie jedes Bild in WebP, AVIF, PNG oder JPG konvertieren. Für die Optimierung mehrerer Bilder gleichzeitig ermöglicht Ihnen der Bildkomprimierer die präzise Einstellung der Qualitätseinstellungen, um die kleinstmögliche Datei ohne sichtbare Qualitätseinbußen zu erhalten.
Zusammenfassung: Empfohlene Standardeinstellungen im Jahr 2026
- Fotos im Web → WebP (mit JPG-Fallback über
<picture>) - Logos und Icons → SVG (Raster-Fallback: PNG)
- Screenshots und Diagramme → WebP (mit PNG-Fallback)
- Maximale Komprimierung, statische Assets → AVIF (mit WebP-Fallback)
- Veraltete E-Mail-Vorlagen → JPG oder PNG (keine Unterstützung moderner Formate in E-Mail-Clients)
Häufig gestellte Fragen
- Welches ist im Jahr 2026 das beste Bildformat für Webseiten?
- WebP ist 2026 das beste Allzweckformat für Websites. Es bietet 25–35 % kleinere Dateigrößen als JPG bei gleicher Qualität, unterstützt Transparenz wie PNG und wird von allen modernen Browsern vollständig unterstützt. AVIF ist noch effizienter, bietet aber eine etwas weniger einheitliche Browserunterstützung. Verwenden Sie SVG für Icons und Logos.
- Soll ich die Bilder meiner Website in das WebP-Format konvertieren?
- Ja. Durch die Konvertierung von JPG- und PNG-Bildern in WebP lässt sich die Dateigröße um 25–50 % reduzieren – ohne sichtbaren Qualitätsverlust. Kleinere Bilder bedeuten schnellere Ladezeiten, bessere Ergebnisse bei den Core Web Vitals und eine verbesserte Suchmaschinenoptimierung (SEO). Alle gängigen Browser unterstützen WebP.
- Was ist AVIF und ist es besser als WebP?
- AVIF ist ein Bildformat der nächsten Generation, das auf dem AV1-Videocodec basiert. Es bietet eine 20–50 % bessere Komprimierung als WebP bei gleicher Qualität. Die Browserunterstützung ist mittlerweile hervorragend (Chrome, Firefox, Safari 16+, Edge). Der Nachteil ist die längere Kodierungszeit, wodurch sich AVIF am besten für vorgefertigte statische Bilder eignet.
- Wann sollte ich SVG anstelle von Rasterformaten verwenden?
- Verwenden Sie SVG immer für Logos, Icons, Illustrationen und alle Grafiken aus geometrischen Formen. SVG ist auflösungsunabhängig (sieht auf jeder Bildschirmgröße scharf aus), hat winzige Dateigrößen für einfache Grafiken und lässt sich perfekt auf jede Größe skalieren. Für Fotos ist SVG ungeeignet.
- Hat das Bildformat Einfluss auf die Suchmaschinenoptimierung?
- Ja, indirekt. Die Seitenladezeit ist ein Rankingfaktor für Google, und Bildformate beeinflussen direkt die Dateigröße Ihrer Seite. Die Verwendung moderner Formate wie WebP oder AVIF anstelle von JPG/PNG kann die Core Web Vitals (insbesondere LCP) verbessern, was sich wiederum positiv auf Ihr Suchmaschinenranking auswirkt.