Bilder
WebP, JPG oder PNG: welches Format wofür
Welches Bildformat für Fotos, Screenshots und Logos: gemessene Dateigrößen in jedem Format, Kompatibilität von WebP und AVIF und praktische Qualitätseinstellungen.
Von TooleemVeröffentlicht Fakten geprüft
Kurz gesagt
Für Fotos ist WebP bei gleicher Qualitätseinstellung meist rund ein Viertel kleiner als JPG: In unserem Test war ein Foto mit 1.600 Pixeln Breite als JPG 306 KB und als WebP 222 KB groß (−27 %). Für Screenshots, Logos und alles mit Text oder Flächenfarben nehmen Sie PNG oder verlustfreies WebP, nie JPG mit niedriger Qualität; verlustfreies WebP war 42 % kleiner als ein optimiertes PNG. AVIF ist noch kleiner, lässt sich in Chrome aber nicht aus einer Webseite heraus erzeugen. JPG bleibt die Wahl, wenn die Datei überall aufgehen muss, auch in alten Programmen, E-Mail-Clients und Upload-Formularen.
Selbst nachrechnen
WebP in JPG umwandeln
Wandeln Sie ein WebP-Bild im Browser in JPG um, wählen Sie die Qualität und laden Sie eine Datei herunter, die überall aufgeht.
Auf dieser Seite
Welches Format für welches Bild
| Bild | Beste Wahl | Warum |
|---|---|---|
| Foto auf einer Website | WebP (verlustbehaftet), oder AVIF mit Fallback | Kleinste Dateien bei gleicher sichtbarer Qualität; alle aktuellen Browser zeigen beide an |
| Foto für E-Mail, Druck oder beliebigen Upload | JPG | Öffnet sich in jeder App, Kamera, jedem Drucker und Formular |
| Screenshot, Diagramm, Text, Oberfläche | PNG oder verlustfreies WebP | Scharfe Kanten bleiben scharf; JPG erzeugt Unschärfe und Säume um Text |
| Logo oder Icon mit Transparenz | SVG, wenn es eine Vektorgrafik ist; sonst PNG oder WebP | JPG kennt keine Transparenz |
| Animation | WebP oder AVIF statt GIF | Bei gleichen Einzelbildern viel kleiner als GIF |
Gemessen: ein Foto in jedem Format
| Format und Einstellung | Dateigröße | Im Vergleich zu JPG Qualität 80 |
|---|---|---|
| PNG | 3,75 MB | 12,5-mal größer |
| JPG, Qualität 92 | 503 KB | +64 % |
| JPG, Qualität 80 | 306 KB | Bezugswert |
| WebP, Qualität 92 | 423 KB | +38 % |
| WebP, Qualität 80 | 222 KB | −27 % |
Mit einem spezialisierten Encoder wird der Abstand größer: AVIF mit Qualität 65 kam auf 218 KB gegenüber 455 KB für JPG mit Qualität 90, bei fast gleichem gemessenem Fehler (PSNR 39,1 dB gegenüber 39,4 dB), also rund die Hälfte. Google nennt für verlustbehaftetes WebP 25 % bis 34 % kleinere Dateien als vergleichbare JPGs; unsere −27 % liegen in diesem Bereich.
Gemessen: ein Screenshot
| Format und Einstellung | Dateigröße | Verlustfrei? |
|---|---|---|
| PNG aus dem Browser (schnelle Kompression) | 117 KB | ja |
| PNG, optimiert (maximale Kompression) | 61 KB | ja |
| WebP verlustfrei | 35 KB | ja |
| JPG, Qualität 80 (Browser) | 56 KB | nein, Textkanten verschwimmen |
| WebP, Qualität 80 (Browser) | 27 KB | nein |
| AVIF, Qualität 50 | 15 KB | nein |
Gemessen: ein Logo mit Transparenz
| Format und Einstellung | Dateigröße | Transparenz |
|---|---|---|
| PNG, optimiert | 110 KB | ja |
| WebP verlustfrei | 60 KB | ja |
| WebP, Qualität 80 | 24 KB | ja |
| AVIF, Qualität 50 | 8,6 KB | ja |
| JPG, Qualität 80 (weißer Hintergrund) | 18 KB | nein, der Hintergrund wird weiß |
Kompatibilität: wo WebP noch Ärger macht
- Chrome, Edge, Firefox, Opera und Safari zeigen laut MDN-Leitfaden zu Bildformaten sowohl WebP als auch AVIF an.
- Probleme entstehen meist außerhalb des Browsers: ältere Bildbearbeitungen, manche Office-Programme, E-Mail-Clients und Upload-Formulare, die nur JPG oder PNG annehmen.
- Anzeigen ist nicht Erzeugen. Auf die Bitte um AVIF lieferte der Canvas-Encoder von Chromium 148 (der Engine von Chrome und Edge) in unserem Test ein PNG; ein Konverter im Browser kann AVIF also nicht zusagen.
- Wer ein verlustbehaftetes WebP in PNG umwandelt, holt keine Details zurück, die Datei wird nur größer. In PNG umwandeln lohnt sich nur, wenn ein Programm ein verlustfreies Format verlangt.
Praktische Einstellungen
- Erst die Größe ändern. Ein Foto mit 4.000 Pixeln, das mit 1.200 Pixeln angezeigt wird, verschwendet die meisten seiner Bytes; verkleinern Sie es, bevor Sie das Format wählen.
- Für Fotos mit Qualität 75 bis 85 beginnen und das Ergebnis in 100-%-Ansicht prüfen.
- Für Screenshots PNG oder verlustfreies WebP wählen und einen Optimierer darüberlaufen lassen.
- WebP-Dateien für eine Website erzeugen Sie mit dem Bild-zu-WebP-Konverter; für jemanden, dessen Programm WebP nicht öffnet, wandeln Sie zurück in JPG.
Hinweis
So haben wir gemessen
Die Browser-Größen stammen aus den Canvas-Encodern von Chromium 148, demselben Weg, den Konverter im Browser nutzen. Optimiertes PNG, verlustfreies WebP und AVIF wurden mit libvips 8.17 (sharp 0.34.5) erzeugt. Der Fehler ist der PSNR gegenüber dem verkleinerten Original. Ihre Werte hängen vom Bild ab: Verrauschte Fotos lassen sich schlechter komprimieren, flache Grafiken besser.
Selbst nachrechnen
WebP in JPG umwandeln
Wandeln Sie ein WebP-Bild im Browser in JPG um, wählen Sie die Qualität und laden Sie eine Datei herunter, die überall aufgeht.
Tools aus diesem Ratgeber
Quellen
Die Zahlen und Regeln in diesem Ratgeber stammen aus diesen Dokumenten.
- An image format for the Web (WebP)Google for DevelopersVerlustfreies WebP 26 % kleiner als PNG; verlustbehaftetes WebP 25 % bis 34 % kleiner als vergleichbares JPG.
- Leitfaden zu Bilddateitypen und -formatenMDN Web DocsBrowserunterstützung und empfohlene Einsatzzwecke von WebP, AVIF, PNG und JPG.
- KSC-2009-3194: aerial view of the Rocket GardenNASA Image and Video LibraryTestfoto der Messungen (Foto: NASA/Kim Shiflett).
Fakten geprüft