Inhalte dieser Galerie
Diese Galerie enthält einige Beispielbilder, um zwei neue WebP-Modi zu zeigen: WebP-lossless und WebP-lossy mit Alpha (Transparenzunterstützung).
Paralleler Vergleich
In der folgenden Tabelle werden PNG-Bilder (mit PNGcrush und PNGout komprimiert), WebP-verlustfreie Bilder und WebP-verlustbehaftete Bilder mit Alpha zum Vergleich dargestellt. Die Bilder werden auf einen karierten Hintergrund gelegt, wie es normalerweise in Grafiksoftware der Fall ist.
Beachten Sie, dass wir für WebP-verlustbehaftete Bilder mit Alpha- und Standardqualität für WebP-verlustfreie Bilder die WEBP-Qualität 90 verwendet haben. Weitere Informationen finden Sie im Abschnitt Images reproduzieren.
Wir präsentieren die in PNG konvertierten WebP-Bilder für Browser, die WebP nicht rendern können. Wenn Sie einen kompatiblen Browser haben, finden Sie die Links zu WebP-Dateien unten. Außerdem werden die Bilder auf dieser Seite aus Gründen der besseren Ansicht verkleinert. Klicken Sie auf ein Bild, um es in voller Größe anzuzeigen.
Die Tabelle gibt auch die in den einzelnen Modi ermittelte Bildgröße an.
PNG | WebP-verlustfrei | WebP-verlustbehaftet (mit Alpha) |
|---|---|---|
| „Gelbe Rose“1 | ||
 PNG-optimierte Dateigröße: 110,7 KB |
 WebP-verlustfreie Dateigröße: 79,9 KB |
 WebP-Verlust (mit Alpha) – Dateigröße: 17,7 KB |
| „Baby-Tux für meine Nutzerseite“ 2 | ||
 PNG-optimierte Dateigröße: 38,1 KB |
 WebP-verlustfreie Dateigröße: 27,0 KB |
 WebP-Verlust (mit Alpha) – Dateigröße: 13,8 KB |
| „PNG-Transparenz-Demo“ 3 | ||
 PNG-optimierte Dateigröße: 213,5 KB |
 WebP-verlustfreie Dateigröße: 149,0 KB |
 WebP-verlustfreie Datei (mit Alpha) – Dateigröße: 51,6 KB |
| „189. Geburtstag von Gregor Mendel“ 4 | ||
 PNG-optimierte Dateigröße: 49,2 KB |
 WebP-verlustfreie Dateigröße: 33,2 KB |
 WebP-lossy (mit Alpha) Dateigröße: 18,3 KB |
| „Transparente Kompasskarte für Overlays“ 5 | ||
 PNG-optimierte Dateigröße: 126,8 KB |
 WebP-verlustfreie Dateigröße: 97,1 KB |
 WebP-Verlust (mit Alpha) – Dateigröße: 57,3 KB |
Hier finden Sie die Links zu den WebP-Dateien, die in Chrome 22 und höher angezeigt werden:
| "Gelbe Rose": | WebP-verlustfreie Datei (80,1 KB) | WebP-lossy (mit Alpha)-Datei (18,4 KB) |
| "Baby-Tux für meine Nutzerseite": | WebP-verlustfreie Datei (27,0 KB) | WebP-lossy (mit Alpha)-Datei (14,1 KB) |
| "Demo der PNG-Transperancy": | WebP-verlustfreie Datei (149,1 KB) | WebP-lossy (mit Alpha)-Datei (52,6 KB) |
| "189. Geburtstag von Gregor Mendel": | WebP-verlustfreie Datei (33,3 KB) | WebP-lossy (mit Alpha)-Datei (19,0 KB) |
| „Transparente Kompasskarte für Overlays“: | WebP-verlustfreie Datei (97,1 KB) | WebP-lossy (mit Alpha)-Datei (57,3 KB) |
Bildnachweis
Die Bilder auf dieser Seite stammen aus verschiedenen Quellen. Die Quellen für die oben genannten Bilder sind hier in der angegebenen Reihenfolge aufgeführt.
| 1 |
„Kostenloses Stockfoto in hoher Auflösung – Gelbe Rose 3 – Blumen“ Bildautor: Jon Sullivan Diese Datei ist urheberrechtsfrei. JPEG-Quelle |
| 2 |
„Baby-Tux für meine Nutzerseite“ Bildautor: Fizyplankton Diese Datei ist frei von Urheberrechten. PNG-Quelle |
| 3 |
„PNG-Transparenz-Demo“ Bildautor: POV-Ray-Quellcode Foto lizenziert unter der Creative Commons- Attribution-Share Alike 3.0 Unported-Lizenz. PNG-Quelle |
| 4 |
„189. Geburtstag von Gregor Mendel“ Bildautor: Google Doodle-Team Vielen Dank an das Google Doodle-Team für dieses Bild. PNG-Quelle |
| 5 |
„Transparente Kompasskarte für Overlays“ Bildautor: Denelson83 Diese Datei ist im Rahmen der Creative Commons- Attribution-Share Alike 3.0 Unported-Lizenz lizenziert. PNG-Quelle |
Bilder reproduzieren
Zum Zweck der Reproduzierbarkeit und um die Verwendung einiger WebP-Komprimierungsparameter zu demonstrieren, beschreiben wir hier die genauen Schritte, die zum Generieren der Bilder in dieser Galerie erforderlich sind.
Tools
Für die PNG-Rekomprimierung wird das beste Ergebnis von pngcrush 1.8.13 und ZopfliPNG 1.0.3 verwendet. Folgende Befehlszeilenoptionen werden verwendet:
Pngcrush:
pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem alla -rem text input.png output-candidate.png
ZopfliPNG:
zopflipng --lossy_transparent input.png output-candidate.png
ZopfliPNG mit allen Filtern:
zopflipng --iterations=500 --filters=01234mepb --lossy_8bit --lossy_transparent input.png output-candidate.png
Um einige der größeren Quellbilder (nur für die Anzeige) neu zu skalieren, haben wir eine aktuelle Version des Tools convert von ImageMagick verwendet, die unter https://www.imagemagick.org verfügbar ist. Die genaue Befehlszeile lautete:
convert image.png -resize 240x image_resized.png
Komprimierung auf WebP-verlustfrei
Wir haben die Option "lossless" im cwebp-Tool verwendet, um PNG in verlustfreies WebP zu konvertieren. Um die minimale Ausgabe zu erhalten, wurde die exakte Befehlszeile so verwendet:
cwebp input.png -lossless -m 6 -q 100 -o webp_lossless.webp
WebP-verlustfrei rendern
Wir haben WebP-verlustfreie Bilder mithilfe des dwebp-Tools für das Rendering zurück in das PNG-Format konvertiert. Die genaue Befehlszeile lautete:
dwebp webp_lossless.webp -o output.png
Komprimierung auf WebP-verlustfrei (mit Alpha)
Wir haben das cwebp-Tool verwendet, um PNG in WebP-lossy (mit Alpha) zu konvertieren. Wir haben als WebP-Qualität 90 (verlustbehaftete Komprimierung) und Alphaqualität von 100 (verlustfreie Komprimierung) ausgewählt. Die genaue Befehlszeile lautete:
cwebp input.png -q 90 -alpha_q 100 -m 6 -o webp_alpha.webp
WebP-verlustbehaftet rendern (mit Alpha)
Wir haben WebP-lossy-Bilder (mit Alpha) mithilfe des dwebp-Tools zum Rendern zurück in PNG konvertiert. Die genaue Befehlszeile lautete:
dwebp webp_alpha.webp -o output.png