Squoosh – Bilder für das Web optimieren: Anleitung und Vergleich

Bilder sind nach wie vor der größte Performancekiller im Web. Laut Google-Daten entfallen oft 50–70 % des gesamten Seitengewichts auf Bilddateien. Squoosh ist ein kostenloses Tool des Google Chrome Labs, das Bilder direkt im Browser komprimiert – ohne dass auch nur ein Byte die eigene Festplatte verlässt. Wie das funktioniert und wann man WebP statt AVIF einsetzen sollte, erklärt dieser Artikel.

Was ist Squoosh?

Squoosh ist eine Progressive Web App (PWA), die vollständig im Browser läuft. Die Komprimierungsalgorithmen – MozJPEG, WebP-Encoder, AVIF, OxiPNG – werden als WebAssembly-Module direkt auf dem Gerät des Nutzers ausgeführt. Das bedeutet: Bilder werden zu keiner Zeit auf fremde Server hochgeladen. Datenschutzbewusste Nutzer können Squoosh sogar offline nutzen, sobald die App einmal geladen wurde.

Entwickelt wurde das Tool ursprünglich vom Chrome-Team als Demo für WebAssembly-Performance. Mittlerweile ist es ein ernsthaftes Produktivwerkzeug, das Designern, Entwicklern und Content-Managern täglich hilft.

Die Oberfläche: Vorher/Nachher-Schieberegler

Nach dem Öffnen von squoosh.app zieht man ein Bild per Drag-and-Drop in den Browser. Die Oberfläche zeigt das Original auf der linken Seite und das komprimierte Ergebnis auf der rechten. Ein vertikaler Schieberegler erlaubt den direkten visuellen Vergleich. Links oben steht die Originalgröße, rechts oben die komprimierte Größe und die prozentuale Ersparnis.

Rechts im Panel wählt man Format, Qualität und weitere Einstellungen. Jede Änderung wird sofort im Vorschaufenster aktualisiert – kein Speichern und Neuladen nötig.

Bildformate im Vergleich

Squoosh unterstützt alle relevanten Web-Bildformate. Hier ein Vergleich anhand eines typischen Hero-Fotos (2560×1440 Pixel, Ausgangsgröße 4,2 MB TIFF):

Die Zahlen sind Richtwerte – tatsächliche Ergebnisse variieren je nach Bildinhalt. Fotos mit vielen Details profitieren besonders von AVIF, während Grafiken mit flachen Farbflächen mit WebP oder OxiPNG besser fahren.

Einstellungen im Detail

Squoosh bietet für jedes Format individuelle Einstellungsmöglichkeiten:

• Qualität: Der Schieberegler (0–100) steuert das Verhältnis von Dateigröße zu visueller Qualität. Für Web-Fotos ist ein Wert zwischen 75 und 85 ein guter Ausgangspunkt.
• Resize: Bilder können direkt in Squoosh auf die Zielgröße skaliert werden – wichtig, da ein 4K-Foto auf einer 800-Pixel-Spalte unnötig viel Speicher belegt.
• Metadaten entfernen: EXIF-Daten (GPS-Koordinaten, Kameramodell, Aufnahmezeit) werden auf Wunsch automatisch entfernt. Das spart Dateigröße und schützt die Privatsphäre.
• Chroma Subsampling: Bei JPEG und WebP kann das Farb-Subsampling angepasst werden – 4:2:0 spart Platz, 4:4:4 erhält Farbschärfe bei Text auf Bildern.

Wann WebP, wann AVIF?

AVIF erzielt in der Regel kleinere Dateien als WebP bei gleicher oder besserer Qualität. Der Nachteil: Die Kodierung in Squoosh (und auf Servern) ist deutlich langsamer. Für statische Websites, bei denen Bilder einmalig optimiert werden, ist AVIF die erste Wahl. Bei dynamisch generierten Thumbnails oder CMS-Uploads, wo Bilder on-the-fly konvertiert werden müssen, ist WebP wegen der schnelleren Encoder-Geschwindigkeit oft praktikabler.

Einschränkung: Kein Bulk-Export

Ein bekanntes Manko von Squoosh: Die Web-App verarbeitet immer nur ein Bild gleichzeitig. Für Batch-Optimierungen gibt es zwei Alternativen:

• Squoosh CLI: Das Squoosh-Kommandozeilenwerkzeug nutzt dieselben WebAssembly-Encoder und erlaubt die Verarbeitung ganzer Ordner per Skript.
• Build-Integration: In Webpack, Vite oder Astro lässt sich Squoosh als Plugin einbinden, sodass Bilder beim Build automatisch komprimiert werden.

Alternativen im Überblick

Squoosh ist nicht das einzige Tool für Bildoptimierung im Web:

• TinyPNG / TinyJPEG: Einfachere Oberfläche, unterstützt Batch-Upload (bis 20 Bilder), komprimiert JPEG und PNG. Bilder werden auf Server hochgeladen.
• ImageOptim (macOS): Desktop-App mit Batch-Unterstützung, verlustloser Optimierung und EXIF-Entfernung. Sehr beliebt bei Mac-Entwicklern.
• Sharp (Node.js): Hochperformante Bildverarbeitungsbibliothek für serverseitige Konvertierung. Ideal für Express- und Next.js-Projekte.

Integration in den Build-Prozess

Wer moderne Web-Frameworks wie Astro, Next.js oder Nuxt nutzt, kann Bildoptimierung vollständig automatisieren. Astro etwa optimiert Bilder in der <Image />-Komponente automatisch beim Build, erzeugt WebP/AVIF und setzt korrekte srcset-Attribute. Für ältere Setups empfiehlt sich das Squoosh-npm-Paket oder das vite-imagetools-Plugin als Drop-in-Lösung.

Häufige Fragen (FAQ)

Werden meine Bilder bei Squoosh auf einen Server hochgeladen?

Nein. Squoosh verarbeitet alle Bilder lokal im Browser per WebAssembly. Es findet keine Übertragung auf externe Server statt – auch nicht im Hintergrund.

Was ist der Unterschied zwischen verlustloser und verlustbehafteter Komprimierung?

Verlustlose Komprimierung (lossless) reduziert die Dateigröße, ohne sichtbare Qualitätsverluste zu erzeugen – ideal für Logos und Text-Grafiken. Verlustbehaftete Komprimierung (lossy) erreicht kleinere Dateien durch das Weglassen von Details, die das menschliche Auge kaum wahrnimmt – optimal für Fotos.

Welchen Qualitätswert sollte ich für Web-Fotos verwenden?

Für MozJPEG und WebP ist ein Qualitätswert von 75–85 ein guter Richtwert. Bei AVIF reichen oft schon 60–70 für visuell kaum unterscheidbare Ergebnisse, da der Encoder effizienter arbeitet.

Wie binde ich optimierte Bilder korrekt in HTML ein?

Mit dem <picture>-Element lassen sich mehrere Formate mit Browser-Fallback anbieten: AVIF als erstes <source>, WebP als zweites und JPEG im <img>-Tag als universeller Fallback. So profitieren moderne Browser von maximaler Komprimierung, während ältere Browser ein standardkonformes JPEG erhalten.