Wie Du Bilder für das Web mit Squoosh.app Optimieren Kannst

Du kennst wahrscheinlich bereits die Bildoptimierung.

Es dient dazu, Fotos auf Deiner Website zu komprimieren, damit die Seiten nicht mit einer glazialen Geschwindigkeit laden.

Bisher hast Du die ganze Idee irgendwie ignoriert. Fair play — es macht keinen großen Unterschied, bis Deine Seite vollständig entwickelt ist.

Aber jetzt ist die Zeit gekommen, etwas zu unternehmen. Dein Erzfeind… äh, wir meinen… dein nächster Konkurrent übertrifft deine Seite in den Leistungskriegen absolut. Es ist Zeit zurückzuschlagen.

Squoosh ist eines der besten Werkzeuge, die Dir zur Verfügung stehen. Es ist kostenlos, Open Source und einfach zu bedienen.

In diesem Leitfaden schauen wir uns an, wie Du Squoosh verwenden kannst, um Bilder zu komprimieren und Deine Ladezeiten zu reduzieren. Lass uns starten!

Wie Du Bilder Mit Squoosh In 30 Sekunden Optimierst

Kommen wir direkt zur Sache.

Du kannst sehr schnell damit beginnen, Bilder für Deine Website zu optimieren.

Gehe zu https://squoosh.app.

Klick auf den großen rosa Blob oben auf der Seite und wähle das Bild aus, das du komprimieren möchtest.

Du gelangst dann zu einer Vorschauansicht, mit einem Einstellungsfeld unten rechts.

Hier kannst Du Dein Bild anpassen, die Farbpalette reduzieren, die Qualität ändern und Deinen bevorzugten Ausgabedateityp auswählen.

Darunter zeigt ein Zähler an, wie viel kleiner deine neue Datei sein wird.

Während Du verschiedene Optionen auswählst, kannst Du den Schieberegler in der Mitte Deines Bildschirms bewegen, um den Effekt auf die Bildqualität zu sehen. Links ist eine vergrößerte Ansicht Deines Originalbildes; rechts ist eine Vorschau Deiner komprimierten Version.

Sieht gut aus? Lade dein komprimiertes Bild herunter, indem du auf den blauen Blob unten rechts tippst. Dies ist bereit, zu deiner Website hinzugefügt zu werden.

Boom, fertig.

Profi-Tipp: Möchtest Du die Dinge beim nächsten Bild beschleunigen? Tippe auf das kleine „Zahnrad“-Symbol im Steuerungspanel. Das wird Deine aktuellen Einstellungen als Voreinstellung speichern, die Du später durch Tippen auf das andere Zahnrad-Symbol laden kannst.

Squoosh Ein Wenig Besser Kennenlernen

Das ist die Kurzfassung, aber es gibt noch viel mehr zu Squoosh.

Dieses Open-Source-Bildkomprimierungstool wurde tatsächlich von den Leuten bei Google entwickelt. Es ist sowohl als Web-App als auch als Browser-Add-on für Chrome verfügbar.

Wenn Du Dich technisch fühlst, kannst Du auch Squoosh von GitHub herunterladen und es offline über die Befehlszeile ausführen.

Squoosh unterstützt PNG, JPG, TIFF, GIF und viele weitere Formate. Jede Version ist kostenlos nutzbar, und die App führt die Komprimierung lokal durch. Das ist eine gute Nachricht für den Datenschutz, denn deine Bilder verlassen niemals deinen Rechner.

Lerne Wie Du Squoosh Wie Ein Profi Benutzt

Das andere Tolle an Squoosh ist, dass es jede Menge Kontrolle bietet. Du musst nur wissen, wie man das Kontrollfeld bedient.

Lass uns einen kurzen Rundgang machen.

Wenn Du zum ersten Mal ein Bild in Squoosh lädst, siehst Du nur vier Optionen im Bedienfeld:

Größenänderung

Wenn Du ein Bild für ein Miniaturbild verwenden möchtest, benötigst Du keine vollständige Auflösung. Du kannst diesen Schalter umlegen, um die Bildgröße zu ändern.

Gib die gewünschte Pixelanzahl ein, aber lasse die Standardoptionen ausgewählt, es sei denn, du hast einen guten Grund. Stelle sicher, dass „Maintain Aspect Ratio“ ausgewählt ist, um Verzerrungen zu vermeiden!

Palette Reduzieren

Viele Bilder enthalten tatsächlich nicht so viele Farben. Diese Option ermöglicht es Dir, Farbtöne wegzulassen, um die Dateigröße zu reduzieren.

Der „Dithering“-Regler? Er erzeugt im Wesentlichen ein Rauschmuster, um die reduzierte Farbpalette zu verbergen.

Hinweis: Diese Technik eignet sich am besten für Designs und weniger für Fotos, da Fotos wie schlechte Fotokopien wirken können.

Format

Unter der Bezeichnung „Komprimieren“ kannst Du ein Ausgabeformat für Dein Bild auswählen. Die Optionen unterteilen sich in zwei Hauptkategorien.

• Lossy (z. B. JPG, GIF): Diese Formate verwerfen winzige Teile deines Bildes, um Speicherplatz zu sparen. Normalerweise wirst du keinen Unterschied bemerken, es sei denn, du benötigst etwas mit wirklich hoher Auflösung.
• Lossless (z. B. PNG, AVIF): Im Gegensatz dazu finden verlustfreie Formate Wege, die Dateigröße zu reduzieren, ohne die Qualität deines Bildes zu beeinträchtigen.

Als allgemeine Regel gilt: Lossy ist für einfache Grafiken geeignet, während Lossless besser für scharfe Symbole und detaillierte Fotos ist.

Qualität

Wenn Du ein verlustbehaftetes Format wählst, siehst Du auch diesen Schieberegler. Er reicht von 0 (Dein Bild wird flach gedrückt) bis 100 (keine Änderung).

Bevor Du Dein Bild speicherst, empfehlen wir, diesen Schieberegler zu bewegen und den Effekt im Vorschaubereich zu betrachten. Um eine schöne, kleine Datei zu erhalten, bewege den Schieberegler so weit wie möglich nach links, ohne hässliche Artefakte zu erzeugen.

Wenn Du zu WebP konvertierst, wirst Du auch einen „Effort“-Schieberegler sehen. Dieser regelt, wie gründlich Squoosh Dein Bild analysiert, bevor entschieden wird, wie die Kompression angewendet wird. Wähle eine höhere Zahl, wenn Du Details beibehalten möchtest.

Erweiterte Einstellungen

Je nach dem von dir gewählten Ausgabeformat hast du möglicherweise Zugriff auf weitere Optionen unter dem Tab „Erweiterte Einstellungen“.

Es sei denn, du hast einen Doktortitel im Bildbearbeiten, solltest du diese Einstellungen besser meiden.

Schnelle Tipps, Um Mehr Aus Squoosh Herauszuziehen

Insgesamt ist Squoosh super einfach zu verwenden. Und ehrlich gesagt, enthält der obige Abschnitt alles, was Du wirklich wissen musst über die App.

Aber wir sehen dich, Leser. Du willst ein Gott der Bildkompression werden, nicht wahr?

Hier sind einige Profi-Tipps, die Dir helfen werden, den unsterblichen Status zu erreichen.

• Ziehen und Ablegen: Kümmere Dich nicht um das Dateimenü. Ziehe Dein Bild einfach direkt in Squoosh.
• Kenne Deine Formate: Verwende WebP für moderne Browser, MozJPEG für Fotos und OptiPNG für Grafiken. Denk daran, AVIF ist der Neue; prüfe, welche Browser damit umgehen können.
• Größe ist wichtig: Komprimiere für Qualität, nicht nur für die Dateigröße. Wenn Dein Bild von einem Meisterwerk zu einem Kindergarten-Kunstprojekt wird, geh einen Schritt zurück und passe die Einstellungen an.
• Aufwand zählt: Erhöhe den Aufwand-Regler für PNGs und WebP, um jede letzte Bit aus der Dateigröße herauszuquetschen, ohne die Qualität dramatisch zu beeinflussen. 
• „Farbpalette reduzieren“ ist Dein Freund: Wie viele verschiedene Farben enthält Dein Bild? Wenn es ziemlich einfach ist, kannst Du viel Platz sparen, indem Du den „Farbpalette reduzieren“-Regler nach links verschiebst.

Denke daran, jedes gesparte MB bedeutet weniger Wartezeit für Deine Nutzer!

Wie Du Website-Bilder Für Eine Bessere Leistung Verwaltest

Während Squoosh deine Bilder auf eine handlichere Größe verkleinern kann, ist es keine Universallösung.

Folge diesen Richtlinien, um sicherzustellen, dass deine komprimierten Bilder die erhoffte Leistungssteigerung bringen!

• Benutze ein CDN: Content Delivery Networks (CDNs) sind für Medien optimiert und entlasten die Server Deines Hosts.
• Überlege sorgfältig über Dateitypen nach: Es ist einfach, alle Bilder gleich zu machen. Aber Deine Wahl der Datei sollte den Anforderungen jedes Bildes auf Deiner Webseite entsprechen.
• Entferne unnötige Metadaten: Muss Dein Bild wirklich Standort- und Kamerainformationen mitschleppen? Wahrscheinlich nicht.
• Versuche Sprites zu verwenden: Anstatt ein großes Bild mit einem sich wiederholenden Muster zu verwenden, könntest Du stattdessen mehrmals ein winziges Sprite verwenden. Das könnte die Dinge wirklich beschleunigen!

Wenn Du neugierig auf all die Möglichkeiten bist, Bildoptimierung umzusetzen, ist unser Blog absolut voll mit hilfreichen Tutorials. Hier sind einige der Höhepunkte:

• Tschüss, JPG: So optimierst Du Bilder für das moderne Web (WebP, SVG und mehr)
• Wie Du 16 häufige Bildprobleme in WordPress behebst
• Häufige Probleme beim Hochladen von Bildern in WordPress und wie Du sie beheben kannst (5 Methoden)

Squoosh-Alternativen: Die besten Bildkomprimierungswerkzeuge

Squoosh ist ein großartiger Ausgangspunkt, um Bilder für Deine Website zu komprimieren und zu optimieren. Es gibt jedoch auch andere Optionen:

• TinyPNG: Diese Web-App komprimiert Bilder sofort, während sie beeindruckende Qualität beibehält. Sie ist kostenlos für Batch-Uploads von 20 Bildern oder weniger; mehr kannst Du für 39 $ pro Monat freischalten.
• ShortPixel: Wenn Du eine WordPress-Website besitzt, ermöglicht Dir dieses Plugin das Komprimieren von Bildern direkt in Deinem Admin-Bereich. Es ist kostenlos für bis zu 100 Bilder pro Monat.
• ImageOptim: Für Mac-Besitzer. Diese Open-Source-App ermöglicht es Dir, Batches von Bildern auf Deinem Computer zu komprimieren. Und sie ist völlig kostenlos!
• Kraken.io: Dieses leistungsstarke Werkzeug zur Bildkompression funktioniert ähnlich wie Squoosh, allerdings ohne die schöne Vorschauanzeige. Oh, und es ist nur kostenlos für Dateien bis zu einer Größe von 1MB.
• JPEGmini: Arbeitest Du mit vielen hochwertigen Fotos? Mit einem schnellen Ziehen und Ablegen ermöglicht Dir diese Desktop-App, die Dateigröße von JPGs um bis zu 80% zu reduzieren.

Lass Deine Seite Heute Flüssiger Laufen

Bilder zu optimieren ist eine mühsame Aufgabe. Aber es lohnt sich, wenn Deine Seiten blitzschnell laden. Außerdem ist es nicht allzu viel Mühe, wenn Du ein Werkzeug wie Squoosh hast.

Natürlich sind Bilder nicht die einzige Ursache für langsames Laden von Seiten. Dein Hosting-Plan könnte schuld sein.

Möchtest Du etwas, das eine zuverlässigere Leistung bietet? Bei DreamHost kommen alle unsere Tarife mit 100% garantierte Betriebszeit und unbegrenzter Bandbreite. Das bedeutet, dass Deine Website niemals unter Druck wackeln wird.

Möchtest Du es versuchen? Melde Dich heute an, um den Unterschied zu spüren!