Vergleichsbedingungen und Reproduktionsmethoden
Wählen Sie im Beispiellauf ein zusammengesetztes Bild mit Text und einer festen Mitte oder Textur. Bei den beiden Materialien handelt es sich nicht um Fotoshootings, sondern um von der Website gezeichnete 1600×900-Testbilder. Erstellen Sie zuerst das ursprüngliche PNG, behalten Sie die gleiche Pixelgröße bei und speichern Sie es als JPEG, WebP-Qualität 75, 85 bzw. 95. Sie können die Ausgabedatei auch direkt herunterladen.
Die Anzahl der Bytes in der Tabelle ist die Blob.size der tatsächlich generierten Datei. Der Qualitätswert ist eine Encoder-Einstellung und bedeutet nicht, dass ein Prozentsatz der ursprünglichen Informationen beibehalten wird. Wenn Ihr Browser das Format nicht unterstützt, fälscht er die Ergebnisse mit einer anderen Erweiterung, speichert sie nicht und zeigt einen Ausführungsfehler an.
Versuchen Sie, es direkt ohne Datei auszuführen
Führt den Verarbeitungscode des eigentlichen Tools mit Beispielmaterial aus, das von der Site erstellt wurde. Die Ergebnisse werden derzeit im Browser berechnet und es werden keine Eingabedaten auf den Server hochgeladen.
werden Ergebnisse und Beispieldateien angezeigt.
Bei den Beispielen handelt es sich nicht um tatsächliche Besucherdaten oder -leistungen. Dateigröße und Schriftform können je nach Browser, Gerät und Schriftart variieren.
2026-10-01 Ground-Truth-Beispiel in einer Einzelbrowser-Umgebung
Die folgenden Werte wurden unter Verwendung zweier identischer zusammengesetzter Bilder aus dem obigen laufenden Beispiel gemessen. Sie kann je nach Browser variieren und ist nicht dazu gedacht, die erwartete Dateigröße tatsächlicher Fotos oder die Überlegenheit oder Unterlegenheit der einzelnen Formate zu verallgemeinern. Die Pixelgröße beträgt 1600×900 in jeder Zeile.
| Eingabetyp | Ausgabeformat | Qualität | Tatsächliche Bytes |
|---|---|---|---|
| Monochrom | PNG | — | 57379 |
| Monochrom | JPEG | 75 | 30914 |
| Monochrom | JPEG | 85 | 36131 |
| Monochrom | JPEG | 95 | 48342 |
| Monochrom | WebP | 75 | 10872 |
| Monochrom | WebP | 85 | 13114 |
| Monochrom | WebP | 95 | 18858 |
| Textur | PNG | — | 941654 |
| Textur | JPEG | 75 | 263962 |
| Textur | JPEG | 85 | 321468 |
| Textur | JPEG | 95 | 449142 |
| Textur | WebP | 75 | 213200 |
| Textur | WebP | 85 | 267302 |
| Textur | WebP | 95 | 363228 |
| Textur / 200 KB Ziel | JPEG | 55 | 197656 |
| Textur / 200 KB Ziel | WebP | 65 | 198788 |
Was ist der Unterschied zwischen den 200-KB-Zielergebnissen?
Eine separate 200-KB-Zeile nutzt die Navigationsfunktion zum Reduzieren der tatsächlichen Bildgröße. Die Startqualität beträgt 85, die Mindestqualität 50, die maximale Längsseite 2048 Pixel und eine weitere Reduzierung ist zulässig. 200 KB sind weniger als 200.000 Byte. Ändern Sie zuerst die Qualität und reduzieren Sie die Pixelgröße, wenn sie das Ziel überschreitet. Überprüfen Sie daher die Breite und Höhe des Ergebnisses zusammen.
Die Vergleichsreihe 75·85·95 ist kein Experiment zur Erreichung der Zielkapazität. Dies ist das Ergebnis der Änderung der Qualitätseinstellungen bei gleicher Größe. Wenn Sie durch Mischen mit der Zielzeile feststellen, dass die Komprimierungsrate besser ist, sind die Vergleichsbedingungen unterschiedlich.
Qualitäts- und Bestätigungsauftrag für meine Dateien
- Fotos beginnen bei Qualität 85 und zoomen hinein, um Buchstaben und Umrisse zu überprüfen.
- Wenn die Dateigröße klein genug ist, vergleichen Sie sie mit dem 95-Ergebnis, um festzustellen, ob Unterschiede im Detail erforderlich sind.
- Wenn die Größe zu groß ist, vergleichen Sie 75, überprüfen Sie aber auch die von der Übermittlungsquelle geforderte Mindestpixelgröße.
- Wenn kleiner Text, Diagramme oder Logos wichtig sind, vergleichen Sie das PNG-Original mit den JPEG/WebP-Ergebnissen.
- Ich verwende die Dateigröße aus dem Beispiel nicht als erwartete Größe für mein Foto.
Canvas toBlob-Format/Qualitätsverarbeitungsdokumentbeschreibt Unterschiede in den Qualitätseinstellungen und im Umgang mit nicht unterstützten Formaten.
Häufig gestellte Fragen
Sind bei gleicher Qualität alle Fotos gleich groß?
Nein. Es hängt von der Pixelgröße, dem Bildinhalt, dem Ausgabeformat und dem Browser-Encoder ab.
Wenn ich den Wert von 85 auf 95 erhöhe, verbessert sich dann die Bildqualität um 10 %?
So lässt es sich nicht interpretieren. Es bezieht sich nicht auf ein Verhältnis der Bildqualität im Vergleich zum Original oder auf einen linearen Verbesserungsgrad.