Bilder sind meist das Schwerste auf einer Webseite, daher wirkt sich das gewählte Format spürbar auf die Ladezeit aus — und auf deine Core Web Vitals und dein SEO. So wählst du richtig.
Wir haben das selbst gemessen. Das Ergebnis: Es gibt kein „kleineres Format”. Ein Konverter, Standardeinstellungen, zwei Bilder — das Foto verlor 85% seiner Größe, der UI-Screenshot legte 142% zu. Welches Format gewinnt, hängt weit mehr vom Bildinhalt ab als vom Format selbst. alle Messwerte ansehen
Ein Format gewann bei allen vier Testbildern. PNG → WebP, mit unserem eigenen Konverter gemessen: Foto 1.88 MB → 303.1 KB (-84%), UI-Screenshot 18.0 KB → 7.3 KB (-59%), flache Illustration 34.7 KB → 10.2 KB (-71%), transparentes Logo 28.8 KB → 7.5 KB (-74%) mit erhaltener Transparenz. Kein anderes Zielformat schaffte das über alle vier. Der ehrliche Vorbehalt steht im Umwandlungs-Labor: Aus einer GIF-Quelle wuchs WebP um 27%, „WebP gewinnt immer” ist also eine Abkürzung, kein Gesetz.
Schnelle Antwort nach Einsatzzweck
- Fotos: WebP (mit JPEG-Fallback). WebP ist bei gleicher Qualität ~25–35 % kleiner als JPEG. Greif zu AVIF, wenn du das absolut Kleinste willst und dein Publikum moderne Browser nutzt.
- Logos, Icons, einfache Grafiken: SVG — winzig und in jeder Größe scharf.
- Screenshots, Bilder mit Text, Transparenz: PNG (oder WebP, das auch Transparenz unterstützt).
- Animation: ein kurzes Video (MP4/WebM) schlägt ein schweres GIF; für einfache Fälle animiertes WebP.
Unsere eigenen Messungen stützen diese Tabelle. PNG → WebP bei vier Bildarten: Foto 1.88 MB → 303.1 KB (-84%), UI-Screenshot 18.0 KB → 7.3 KB (-59%), flache Illustration 34.7 KB → 10.2 KB (-71%), transparentes Logo 28.8 KB → 7.5 KB (-74%) mit erhaltenem Alpha. Ein Format gewann bei allen vier — genau deshalb ist die Empfehlung langweilig.
Warum das Format fürs Tempo zählt
Jedes Kilobyte zählt für deinen Largest Contentful Paint. Ein 2-MB-JPEG dort auszuliefern, wo ein 400-KB-WebP genügt, bremst die Seite, schadet mobilen Nutzern und drückt Ranking-Signale. Die Lösung ist meist: richtiges Format + richtige Abmessungen + sinnvolle Kompression.
Die ehrliche Ausnahme sollte man kennen, bevor man eine Pauschalregel aufschreibt. Unser 4,3 KB großes transparentes GIF kam als WebP mit 5.4 KB heraus (+27%) — gegen ein winziges Palettenbild bleibt einem modernen Codec nichts zu holen. „Alles nach WebP” ist im Mittel richtig und bei bereits kleinen, bereits verlustbehafteten Dateien falsch.
Ein einfacher Ablauf
- Format wählen aus der Liste oben.
- Auf die größte tatsächlich angezeigte Größe skalieren — nicht die volle Kameraauflösung.
- Komprimieren, um die letzten Bytes zu sparen.
Format-Details in AVIF vs. WebP vs. JPEG und Was ist WebP.
Kostenlos, im Browser
- In WebP umwandeln — der Alltagsgewinn für Web-Fotos.
- Bild komprimieren und Bild skalieren — weitere Bytes sparen.
- PNG in SVG — ein Logo vektorisieren, damit es nie verpixelt.
Kurzfassung: WebP für Fotos, SVG für Logos, PNG für Transparenz — und vor dem Veröffentlichen immer skalieren + komprimieren.
Format-Spickzettel
| Format | Am besten für | Transparenz | Animation | Kompression |
|---|---|---|---|---|
| JPEG | Fotos | Nein | Nein | Verlustbehaftet |
| PNG | Screenshots, flache Grafiken | Ja | Nein | Verlustfrei |
| WebP | Fotos wie Grafiken | Ja | Ja | Beides |
| AVIF | kleinste Fotos | Ja | Ja | Beides |
| SVG | Logos, Icons, Strichgrafik | Ja | Ja (CSS) | Vektor |
| GIF | nur Alt-Animationen | 1-Bit | Ja | Palette |
Lies die Tabelle danach, was das Bild enthält, nicht nach Gewohnheit. Ein flaches Logo als PNG kann 40 KB wiegen; dasselbe Logo als SVG liegt oft unter 5 KB und bleibt in jeder Größe gestochen scharf. Ein Foto als PNG dagegen wird schnell mehrfach größer als die JPEG- oder WebP-Version, weil verlustfreie Kompression die feinen Tonwertabstufungen eines Fotos nicht wegwerfen kann. Bist du zwischen den beiden Klassikern unsicher, hilft PNG vs. JPG weiter.
Der Kompatibilitäts-Kompromiss
Neuere Formate gewinnen bei der Größe, kosten dich aber Reichweite. AVIF liefert die kleinsten Dateien, doch ältere Browser und manche E-Mail-Programme zeigen es noch nicht an. WebP ist heute fast überall sicher. Der professionelle Zug ist nicht, global ein Format zu wählen, sondern das moderne Format mit Fallback anzubieten und jeden Browser das Beste nehmen zu lassen, das er versteht.
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Produktbild" width="1200" height="800" />
</picture>Der Browser probiert erst AVIF, dann WebP und fällt sonst auf das JPEG zurück. Die Attribute width und height reservieren Platz, damit das Layout beim Laden nicht springt — ein weiterer Core-Web-Vitals-Gewinn.
Der Kompatibilitäts-Kompromiss hat ein Preisschild, und das ist der Preis des Fallbacks, den man neben dem modernen Format ausliefert. Unsere WebP-Illustration zurück in die älteren Formate:
| Konvertierung | WebP ein | Ergebnis | Änderung |
|---|---|---|---|
| WebP → JPG | 10.8 KB | 23.7 KB | +119% |
| WebP → PNG | 10.8 KB | 94.0 KB | +769% |
| WebP → JPG | 7.6 KB | 16.5 KB | +118% |
Der JPG-Fallback kostet 23.7 KB (+119%) und der PNG-Fallback 94.0 KB (+769%) für dasselbe Bild. So viel wiegt ein <picture> mit zwei Quellen tatsächlich, wenn der Browser den falschen Zweig wählt — die ehrliche Frage ist also nicht „wird WebP unterstützt”, sondern „was kostet mein Fallback die Besucher, die ihn bekommen”.
Wenn die Wahl nicht eindeutig ist
- Foto mit Transparenz? WebP oder AVIF — die einzigen Rasterformate mit starker Kompression und Alphakanal.
- Icon, das skalieren muss? Erst SVG; nur auf PNG ausweichen, wenn die Grafik zu detailliert zum sauberen Vektorisieren ist.
- Animation? Lieber ein MP4/WebM-Video. Ein 10-Sekunden-Clip als GIF kann mehrere Megabyte wiegen, als Video oft nur zweistellige Kilobyte.
FAQ
Ist WebP immer kleiner als JPEG?
Bei Fotos fast immer — grob 25–35 % bei gleicher sichtbarer Qualität. Bei sehr kleinen Bildern schrumpft der Abstand, und ein stark optimiertes JPEG kann gelegentlich mithalten; teste also, wenn jedes Byte zählt.
Soll ich meine JPEGs und PNGs löschen?
Nein. Behalte sie als Fallback und als Master. Nach WebP aus der Originalquelle zu konvertieren ergibt ein saubereres Resultat als aus einem bereits verlustbehafteten JPEG.