Bilder im Browser mit Squoosh und WebAssembly optimieren

Beginnen Sie bei einem Foto mit WebP und bei einem Screenshot mit Text mit OxiPNG. Probieren Sie für ein transparentes Logo verlustfreies WebP aus und prüfen Sie die Kanten auf hellen und dunklen Hintergründen. Mit Squoosh⁠ können Sie diese Optionen im Browser vergleichen und ein separates Bild für Ihre Website herunterladen.

Warum Bilder im Browser optimieren?

Squoosh ist eine Open-Source-App von GoogleChromeLabs, mit der Sie jeweils ein Bild manuell komprimieren. Beim Ändern der Encoding-Einstellungen können Sie die Textur eines Fotos oder kleinen Text in einem Screenshot vergleichen. Ein Konto ist nicht erforderlich. Laut der Datenschutzdokumentation⁠ erfolgt die Bildverarbeitung auf Ihrem Gerät. Die App nutzt jedoch Analysedaten, die auch Dateigrößen vor und nach der Verarbeitung umfassen. Lokale Bildverarbeitung bedeutet nicht, dass die Seite keine Netzwerkanfragen sendet.

So nutzen Sie die Squoosh-Web-App

Verwenden Sie einen aktuellen Desktop-Browser und bewahren Sie die Originaldatei auf. Diese Bedienelemente wurden in Chrome 151 unter Linux mit gewöhnlichen 8-Bit-sRGB-Standbildern geprüft. Diese Anleitung behandelt keine animierten Bilder, HDR oder CMYK-Dateien für den Druck.

1. Öffnen Sie squoosh.app⁠, während Sie online sind. Ziehen Sie ein lokales Foto, einen Screenshot oder eine PNG-Datei mit Transparenz hinein oder klicken Sie auf den Bildauswahlbereich, um die Datei auszuwählen.
2. Lassen Sie im linken Menü Compress die Option Original Image ausgewählt. Wählen Sie im rechten Menü Compress einen Encoder aus der Tabelle unten.
3. Lassen Sie Resize und Reduce palette für den ersten Vergleich ausgeschaltet. Eine Größenänderung verändert die Abmessungen; eine Palettenreduzierung kann unabhängig vom Encoder Farben verwerfen.
4. Wenden Sie die unten genannten Anfangseinstellungen an. Warten Sie, bis das Encoding abgeschlossen ist und die Ausgabegröße erscheint. Die angezeigte Größe beschreibt das codierte Ergebnis und ist gerundet. Nutzen Sie für einen exakten Vergleich die Größe der gespeicherten Datei in Bytes.
5. Wenn der Hinweis zur Offline-Nutzung die Zoom-Steuerung verdeckt, wählen Sie DISMISS. Bewegen Sie die Trennlinie über das Bild. Prüfen Sie es bei 100 % Zoom und vergrößern Sie dann kleinen Text, feine Texturen, Farbverläufe und transparente Kanten. Erhöhen Sie die Qualität, wenn die kleinere Variante Details beeinträchtigt, die Sie benötigen.
6. Wählen Sie rechts den Link Download. Der Download links speichert das Original. Speichern Sie die Variante unter einem anderen Namen und öffnen Sie diese Datei, bevor Sie eine Bilddatei auf Ihrer Website ersetzen.

Unterstützte Formate und Optimierungsoptionen

Dies sind Ausgangspunkte, keine Qualitätsgarantien.

JPEG: Wählen Sie MozJPEG, wenn Sie eine JPEG-Ausgabe benötigen. Beginnen Sie mit Quality: 75 und vergleichen Sie die gespeicherte Datei mit dem Original. JPEG kann Transparenz nicht erhalten. Nutzen Sie es daher für Bilder ohne Transparenz. MozJPEG ist der Name des Encoders, kein separates Dateiformat.

PNG: OxiPNG erzeugt PNG-Dateien. Der Regler Effort: verändert den Kompressionsaufwand statt der Bildqualität. Der Encoder eignet sich als erste Wahl für Screenshots, bei denen schon kleine Änderungen Text unscharf machen können. Eine höhere Aufwandseinstellung benötigt mehr Zeit zum Encoding; eine kleinere Ausgabe ist nicht garantiert.

WebP: Vergleichen Sie bei Text ohne Transparenz auch WebP mit Lossless und Slight loss: 0. Aktivieren Sie für Transparenz Preserve transparent data. Diese Option erhält verborgene RGB-Daten, die an den Encoder übergeben werden. Sie kann keine Werte wiederherstellen, die beim Decodieren im Browser bereits verändert wurden. Die Implementierung der WebP-Einstellungen⁠ zeigt, dass ein höherer Wert für leichten Verlust eine nahezu verlustfreie Verarbeitung zulässt, selbst wenn der Schalter für verlustfreies Encoding eingeschaltet ist.

AVIF: Probieren Sie AVIF für ein Foto ohne Transparenz aus. Beginnen Sie mit Lossless aus, Quality: 50 und Effort: 4. Vergleichen Sie die heruntergeladene Datei mit Ihrer WebP-Variante. Die Qualitätsskalen unterscheiden sich je nach Encoder: AVIF mit 50 und WebP mit 75 sind keine gleichwertigen Qualitätsziele.

Das Menü enthält auch JPEG XL (beta). Dass ein Encoder in Squoosh vorhanden ist, belegt nicht, dass der Browser oder Bildbetrachter Ihrer Zielgruppe seine Ausgabe unterstützt. Nutzen Sie für diese Anleitung die oben genannten Formate und prüfen Sie das heruntergeladene Bild in den Browsern, für die Sie es bereitstellen möchten.

Bildqualität vor und nach der Optimierung vergleichen

„Visuell akzeptabel“ und „verlustfrei“ beantworten unterschiedliche Fragen. Ein verlustbehaftetes Foto kann in seiner Anzeigegröße akzeptabel aussehen, obwohl seine decodierten Pixel abweichen. Ein verlustfreier Codec erhält die Pixel, die er empfängt. Squoosh zeichnet decodierte Bilder jedoch zuerst auf ein Browser-Canvas⁠. Dieser Schritt kann Farbwerte verändern, besonders bei teilweiser Transparenz. Weder OxiPNG noch der WebP-Schalter für verlustfreies Encoding garantiert, dass die ursprünglichen RGBA-Werte über den gesamten Ablauf in der App exakt erhalten bleiben.

Prüfen Sie bei einem Screenshot dünne Linien und kleinen Text. Achten Sie bei einem Foto auf Texturen, Farbverläufe, Farbverschiebungen und Kompressionsartefakte. Prüfen Sie bei einem Logo transparente Kanten auf dem Hintergrund, auf dem es tatsächlich erscheinen wird. Die Vorschau hilft Ihnen, eine Variante auszuwählen. Durch Prüfen der heruntergeladenen Datei stellen Sie fest, ob Sie das gewünschte Ergebnis gespeichert haben. Wenn exakte Pixelwerte oder ursprüngliche Metadaten erforderlich sind, nutzen Sie einen nativen Workflow und prüfen Sie diese Eigenschaften separat.

Die heruntergeladene Datei prüfen

Öffnen Sie die Variante im vorgesehenen Browser oder Bildbetrachter. Prüfen Sie Format, Abmessungen und Transparenz. Vergleichen Sie dann ihre tatsächliche Größe in Bytes mit dem Original. Behalten Sie die kleinere Datei nur, wenn Aussehen und Kompatibilität Ihren Anforderungen entsprechen. Aus einer bereits komprimierten Quelldatei kann eine größere Variante entstehen. Erneutes Codieren einer JPEG-Datei erzeugt eine weitere verlustbehaftete Generation.

Ein anderer Hash der komprimierten Datei belegt keinen Qualitätsverlust. Umgekehrt belegen übereinstimmende Abmessungen und eine funktionierende Vorschau keine identischen Pixel. Strikte Verlustfreiheit erfordert einen Vergleich der decodierten Pixel bei gleicher Interpretation von Farben und Alpha, einschließlich verborgener Farben in vollständig transparenten Pixeln. Eine visuelle Prüfung kann diese Gleichheit nicht beweisen.

Eine Offline-Sitzung vorbereiten

Squoosh speichert App- und Codec-Dateien mithilfe eines Service Workers⁠ im Cache. Bereiten Sie die Sitzung im selben Browserprofil vor, das Sie offline nutzen werden:

1. Warten Sie bei Ihrem ersten Besuch auf Ready to work offline. Öffnen Sie online ein lokales Bild und führen Sie mit jedem vorgesehenen Codec ein vollständiges Encoding samt Download durch. Die erste Meldung allein bestätigt nicht, dass diese Codecs verfügbar sind.
2. Trennen Sie die Netzwerkverbindung und laden Sie denselben Tab neu. Wählen Sie ein anderes lokales Bild, wiederholen Sie die vorgesehenen Einstellungen und prüfen Sie die neu heruntergeladene Datei. So testen Sie das erneute Laden und nicht einen Codec, der noch im Arbeitsspeicher liegt.
3. Wenn das Encoding oder das erneute Laden fehlschlägt, stellen Sie die Verbindung wieder her, laden Sie Squoosh online neu und wiederholen Sie Encoding und Download. Testen Sie anschließend erneut offline. Nutzen Sie nur einen Codec, der Ihre Offline-Prüfung besteht, oder bleiben Sie für diese Konvertierung online.

In der getesteten Chrome-Konfiguration funktionierte mit WebP der gesamte Offline-Ablauf vom Neuladen bis zum Download. OxiPNG schlug nach dem Neuladen trotz erfolgreicher Online-Vorbereitung fehl. Gehen Sie nicht davon aus, dass jeder Encoder im Menü offline verfügbar ist. Bewahren Sie die gespeicherten Website-Daten auf. Wenn Sie diese löschen oder der Browser die Daten aus dem Cache entfernt, müssen Sie die Vorbereitung und den Test wiederholen.

Grenzen der browserbasierten Optimierung mit Squoosh

Die Weboberfläche verarbeitet jeweils ein Bild. Große Bilder und hohe Aufwandseinstellungen können viel Arbeitsspeicher und CPU-Leistung beanspruchen. Beginnen Sie daher mit einem kleineren Bild und senken Sie den Aufwand, wenn das Encoding stockt. Falls ein Codec fehlschlägt, stellen Sie die Verbindung wieder her, um seine Dateien zu laden, und probieren Sie einen anderen Encoder. Bewahren Sie die Quelldatei auf, statt einen unvollständigen oder ungeprüften Download zu verwenden.

Wie verbessert WebAssembly die Bildoptimierung in Squoosh?

Die Codec-Projekte von Squoosh⁠ erstellen JavaScript-Glue-Code und WebAssembly-Module für Codecs wie MozJPEG und WebP. Dadurch kann die App diese Encoder lokal ausführen. Um die Oberfläche zu nutzen, müssen Sie weder WebAssembly schreiben noch die Codec-Toolchains installieren. Die Encoding-Geschwindigkeit hängt weiterhin vom Bild, den Einstellungen und dem Gerät ab.

Alternative Ansätze zur Bildoptimierung

Für wiederholbare PNG-Verarbeitung erläutert die Anleitung zum nativen Oxipng separate Ausgabedateien und Einstellungen zum Erhalt der Pixelwerte. Zur Verarbeitung von Uploads in einer Anwendung finden Sie weitere Informationen beim Robot 🤖 /image/optimize von Transloadit und bei der API zur Bildverarbeitung.