Bilder machen etwa 50–60 % der Datenübertragung einer durchschnittlichen Webseite aus. Die Wahl des richtigen Bildformats ist eine der wirkungsvollsten Optimierungen für die Web-Performance. Hier ist eine praktische Übersicht über jedes Format und wann Sie es einsetzen sollten.
Die Formate, die Sie kennen sollten
JPG (JPEG)
Der Veteran. JPG ist seit den 1990er-Jahren der Standard für Fotos im Web. Es nutzt verlustbehaftete Kompression, die auf Fotos optimiert ist — natürliche Farbverläufe, Texturen und komplexe Szenen.
Am besten für: Fotos, wenn WebP oder AVIF nicht infrage kommen, oder wenn Kompatibilität mit älteren Systemen nötig ist. Schwächen: Größer als moderne Formate, keine Transparenz, Kompressionsartefakte bei niedrigerer Qualität.
PNG
PNG ist ein verlustfreies Format, ideal für Grafiken mit flachen Farben, scharfen Kanten und transparenten Hintergründen.
Am besten für: Logos, Icons, Screenshots, UI-Elemente, Bilder mit Transparenz. Schwächen: Bei Fotos deutlich größer als JPG, langsamere Ladezeiten.
WebP
Googles WebP-Format bietet verlustbehaftete und verlustfreie Kompression, unterstützt Transparenz und übertrifft sowohl JPG als auch PNG. Es ist mittlerweile der empfohlene Standard für Webbilder.
Am besten für: Fast alles — Fotos (als Ersatz für JPG), Logos/Grafiken (als Ersatz für PNG), Webbilder im Allgemeinen. Dateigrößen-Vorteil: 25–35 % kleiner als JPG bei gleicher visueller Qualität; ähnlich wie PNG, aber oft kleiner. Browser-Unterstützung: über 97 % (Chrome, Firefox, Safari, Edge — alle modernen Browser).
AVIF
Abgeleitet vom AV1-Videocodec ist AVIF das neueste weit verbreitete Bildformat. Es erreicht bessere Kompression als WebP — oft 20–50 % kleiner bei gleicher Qualität.
Am besten für: Statische Bilder, bei denen maximale Kompression Priorität hat und Sie den Server- bzw. Build-Prozess selbst steuern. Schwächen: Die Kodierung ist langsamer (nicht ideal für Echtzeit-Erzeugung), ältere Browser-Versionen unterstützen es möglicherweise nicht. Browser-Unterstützung: Chrome 85+, Firefox 93+, Safari 16+, Edge 121+.
SVG
SVG ist ein Vektorformat — Bilder werden als mathematische Pfade beschrieben, nicht als Pixel. SVG-Dateien sind auflösungsunabhängig und für Logos und Icons meist winzig.
Am besten für: Logos, Icons, Illustrationen, Diagramme, jede Grafik, die auf unterschiedliche Größen skaliert werden muss. Nicht geeignet für: Fotos oder Bilder mit komplexen Farbverläufen und Texturen.
Matrix: Format vs. Anwendungsfall
| Inhaltstyp | Bestes Format | Fallback |
|---|---|---|
| Foto | AVIF | WebP → JPG |
| Produktfoto | WebP | JPG |
| Logo | SVG | PNG |
| Icon | SVG | PNG |
| Screenshot | WebP | PNG |
| Illustration | SVG oder WebP | PNG |
| Hintergrundmuster | WebP | JPG |
| Animiert | WebP | GIF |
Auswirkung auf die Performance: Reale Zahlen
Konvertierung 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 |
Der Wechsel von JPG zu WebP spart pro Bild etwa 38 % an Datenmenge. Bei einer Seite mit 20 Produktbildern sind das möglicherweise mehrere Megabyte Ersparnis pro Seitenaufruf.
Das <picture>-Element für Progressive Enhancement
Wenn Sie AVIF mit WebP-Fallback und JPG als letzten Fallback ausliefern 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>
So können moderne Browser AVIF nutzen, ältere moderne Browser WebP, und Legacy-Browser greifen auf JPG zurück — ganz ohne JavaScript.
Was ist mit den Core Web Vitals?
Largest Contentful Paint (LCP) ist eine der Core-Web-Vitals-Kennzahlen von Google und wird stark von der Ladezeit von Bildern beeinflusst. Wenn Sie WebP oder AVIF für Ihr Hero-Bild und Ihre Produktfotos verwenden, kann das Ihren LCP-Wert direkt verbessern — und der ist ein Ranking-Signal für Google.
Weitere Tipps für Webbilder:
- Fügen Sie
width- undheight-Attribute hinzu, um Layout-Verschiebungen (CLS) zu vermeiden - Nutzen Sie
loading="lazy"für Bilder unterhalb des sichtbaren Bereichs - Nutzen Sie
fetchpriority="high"für Ihr LCP-Bild (meist das Hero-Bild)
Ihre Bilder konvertieren
Sie können jedes Bild mit dem Image Converter von PicsSizer in WebP, AVIF, PNG oder JPG umwandeln. Für die Optimierung mehrerer Bilder auf einmal lässt Sie der Image Compressor die Qualitätsstufe so einstellen, dass Sie die kleinstmögliche Dateigröße ohne sichtbaren Qualitätsverlust erhalten.
Zusammenfassung: Empfohlene Standards 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 Kompression, statische Assets → AVIF (mit WebP-Fallback)
- Legacy-E-Mail-Vorlagen → JPG oder PNG (keine Unterstützung moderner Formate in E-Mail-Clients)
Häufig gestellte Fragen
- Welches ist 2026 das beste Bildformat für Websites?
- WebP ist 2026 das beste Allzweckformat für Websites. Es bietet bei gleicher Qualität 25–35 % kleinere Dateien als JPG, unterstützt wie PNG Transparenz und wird von allen modernen Browsern vollständig unterstützt. AVIF ist noch effizienter, wird aber etwas weniger einheitlich von Browsern unterstützt. Verwenden Sie SVG für Icons und Logos.
- Sollte ich die Bilder meiner Website in WebP konvertieren?
- Ja. Wenn Sie JPG- und PNG-Bilder in WebP konvertieren, lässt sich die Datenmenge Ihrer Bilder ohne sichtbaren Qualitätsverlust um 25–50 % reduzieren. Kleinere Bilder bedeuten schnellere Ladezeiten, bessere Core-Web-Vitals-Werte und eine verbesserte SEO. Alle gängigen Browser unterstützen inzwischen WebP.
- Was ist AVIF und ist es besser als WebP?
- AVIF ist ein Bildformat der nächsten Generation, das auf dem Videocodec AV1 basiert. Es erzielt bei gleicher Qualität eine um 20–50 % bessere Komprimierung als WebP. Die Browserunterstützung ist inzwischen hervorragend (Chrome, Firefox, Safari 16+, Edge). Der Nachteil ist die längere Kodierungszeit – daher eignet es sich am besten für vorab erzeugte statische Bilder.
- Wann sollte ich SVG statt Rasterformaten verwenden?
- Verwenden Sie SVG immer für Logos, Icons, Illustrationen und alle Grafiken, die aus geometrischen Formen bestehen. SVG ist auflösungsunabhängig (wirkt auf jeder Bildschirmgröße scharf), erzeugt bei einfachen Grafiken sehr kleine Dateien und lässt sich verlustfrei auf jede Größe skalieren. Für Fotos ist SVG ungeeignet.
- Beeinflusst das Bildformat die SEO?
- Ja, indirekt. Die Ladegeschwindigkeit einer Seite ist ein Google-Rankingfaktor, und Bildformate wirken sich direkt darauf aus, wie groß Ihre Seite ist. Moderne Formate wie WebP oder AVIF anstelle von JPG/PNG können Ihre Core Web Vitals verbessern (insbesondere den LCP), was sich auf Ihre Suchmaschinen-Rankings auswirkt.