Bilder komprimieren - Stets beste Ergebnisse mit Squoosh?
Bestimmt hast du dir schon Gedanken darüber gemacht, wie du Bilder für deine Website am besten komprimieren kannst, um deren Ladezeit zu verbessern. Eine Ladezeit von mehr als 3 Sekunden wird von Benutzer*innen bereits als störend empfunden, optimal sind Ladezeiten von 1 bis 1,5 Sekunden. Je länger die Ladezeit deiner Website dauert, desto höher ist die Gefahr, dass Benutzer*innen deine Website verlassen, bevor sie vollständig angezeigt wird.
Die Qualität von Handyfotos nimmt stetig zu, der benötigte Speicherplatz ebenfalls. Ein Foto mit 12 Megapixeln liegt bei durchschnittlich 5 MB. Eine Datei dieser Größe verursacht selbst bei besten Bedingungen für die Datenübertragungen, spürbare Verzögerungen beim Laden deiner Website. Abgesehen davon erzeugts du mit nicht optimierten Bildern einen höheren CO2-Fußabdruck, den du mit einfachen Maßnahmen reduzieren kannst.
In meinem Artikel zeige ich dir, mit welchen Anwendungen du deine Bilder komprimieren kannst. Neben bekannten Desktop Grafikprogrammen stelle ich dir eine Entdeckung vor. In einem Vergleichstest, den ich dazu durchführe, erfährst du, mit welchen Programmen du die besten Ergebnisse erzielst.
Photoshop - der "Platzhirsch" unter den Desktop Grafikprogrammen - schneidet bei der JPEG-Komprimierung im Vergleich zur Konkurrenz bekanntlich schlecht ab.
Aber auch viele Online-Tools halten nicht, was sie versprechen. Meistens musst du deine Bilder vor dem Komprimieren auf einen Server hochladen und danach die komprimierten Bilder wieder herunterladen. Das ist umständlich und kostet unnötig Zeit.
hej, ich bin Ralf, freiberuflicher Webdesigner und Konzepter. Ich kann dich bei vielen Themen rund um deine Website unterstützen. Nachhaltigkeit und nachhaltiges Webdesign liegen mir besonders am Herzen. Hypes, die gerade im Internet kursieren, nehme ich kritisch unter die Lupe. Mein Motto lautet: "Ich muss nicht jede Welle reiten".
Ich freue mich auf unsere Zusammenarbeit.
1. Die Entdeckung
Als ich im Internet nach einem Online-Tool für die Bildkomprimierung suchte, bin ich auf die Seite https://squoosh.app/ gestoßen. Das ungewöhnliche Design gefiel mir und animierte mich, die Komprimierungsfähigkeiten dieser App auszuprobieren. Interessant fand ich vor allem die unterschiedlichen Komprimierungsformate. Neben JPEG und PNG wurden zusätzlich MozJPEG und OxiPNG angeboten. Als weitere Formate standen zur Verfügung:
- AVIF
- JPEG XL (beta)
- WebP
- WebP v2 (unstable)
Angenehm an der Squoosh-App fand ich darüber hinaus, dass die Komprimierungsoptionen auf das Wesentliche reduziert und die Advanced Settings standardmäßig ausgeblendet waren. Auch musste ich meine Bilder nicht auf einen Server hochladen. Das Ganze lief lokal auf meinem Rechner.
Was glaubst du? Kann Squoosh mit den Desktop-Programmen mithalten?
2. Der Testaufbau
Die Kandidaten für den Vergleichstest mit Squoosh sind:
 |
Adobe Photoshop (Desktop) |
 |
Affinity Photo (Desktop) |
 |
Gimp (Desktop) |
 |
Paint.net (Desktop) |
 |
Squoosh (Online - Bilder werden nicht hochgeladen, sondern lokal optimiert) |
Von mir getestet werden jeweils die in den Programmen integrierten Komprimierungsroutinen für PNG, JPEG und WebP. Das "Zukunftsformat" AVIF klammere ich aus, da es in Photoshop und Affinity-Photo keine integrierte Komprimierungsroutine dafür gibt, und Paint.net fehlerhafte AVIF-Dateien erzeugt.
Bei dem zu komprimierenden Foto handelt es sich um eine detailreiche, 480 x 640 Pixel große Nahaufnahme einer Wollgraswiese.
In der Praxis würde ich für die Komprimierung eines Fotos nur das JPEG-, das WebP-, oder das AVIF-Format verwenden. Das PNG-Format wird vor allem für die Komprimierung von Grafiken verwendet. Bei meinem Test geht es mir aber in erster Linie um die grundsätzlichen Komprimierungsfähigkeiten der einzelnen Programme. Ausgangsformat für den Komprimierungstest ist eine BMP-Datei mit einer Größe von 901 KB. Das BMP-Format habe ich aus Kompatibilitätsgründen gewählt. Es ist verlustfrei und kann von allen am Test beteiligten Programmen geöffnet werden. Darüber hinaus scheint es mit dem BMP-Format möglich zu sein, kleinere Dateigrößen zu erzeugen, was ein Vergleich mit TIFF und vor allem mit proprietären Formaten wie PSD, AFPHOTO oder PDN zeigte. Die Verwendung des BMP-Formats als Ausgangsformat führt durchweg zu besseren Komprimierungsergebnissen.
Eine weitere Voraussetzung für den Test, ist eine einfache, schnelle und alltagstaugliche Handhabung. Das optimale Komprimierungsergebnis soll bestenfalls mit den Standardeinstellungen der jeweiligen Software erzielt werden können. Zwecks Vergleichbarkeit musste ich die Komprimierungsqualität teilweise - doch abweichend von den jeweiligen Standardeinstellungen - anpassen:
- PNG-Qualität: keine Anpassung
- JPEG-Qualität: 60
- WebP-Qualität: 60
3. Die Testergebnisse
Die Dateigrößen sind in KB angegeben.
4. Fazit
Die App Squoosh erzielt bei der Komprimierung der Formate PNG und JPG die besten Ergebnisse, das heißt die kleinste Dateigröße. Beim Format WebP liefert Gimp das beste Ergebnis.
Mit bloßem Auge ist fast kein Qualitätsunterschied bei den einzelnen Bildern erkennbar. Das von Squoosh erzeugte JPG wirkt ein wenig flauer als die JPGs der anderen Programme. Das beste Ergebnis bei der Dateigröße geht hier etwas auf Kosten des Kontrasts und der farblichen Brillanz.
Die Ergebnisse dieses Tests zeigen zudem, dass sich die schlanke Desktop Software paint.net vor der Konkurrenz nicht verstecken muss. Die Komprimierungsergebnisse sind durchweg gut. Das Programm reiht sich vor Photoshop und Serif Affinity-Photo unter die 3 Bestplatzierten ein. Während Photoshop und Serif Affinity-Photo kostenpflichtig sind, kann paint.net wie Gimp und Squoosh kostenlos genutzt werden.
5. Wie es weitergehen kann
Ich freue mich, wenn dir mein Vergleichstest geholfen hat und hoffe, dass du bei deiner Suche nach der besten Möglichkeit, Bilder zu komprimieren, vorangekommen bist. Vielleicht hast du selbst Ideen und Anregungen zu diesem Thema, die du mit mir teilen möchtest. Möglicherweise habe ich auch ein Desktop Programm oder ein Online-Tool vergessen, das auf jeden Fall getestet werden sollte.
Neben der Bildkomprimierung gibt es weitere Maßnahmen, die dazu beitragen, die Ladezeit und damit den CO2-Fußabdruck deiner Website zu reduzieren. Du könntest zum Beispiel Fotos durch Vektorgrafiken ersetzen, die per se wesentlich geringere Dateigrößen aufweisen.
TIPP: Zum Thema Vektorgrafiken empfehle ich dir meine beiden Artikel
Wenn du wissen willst, welche Optimierungsmöglichkeiten speziell bei deiner Website bestehen, kann ich diese im Rahmen eines individuellen Website-Checks für dich ermitteln. Du kannst mich jederzeit gerne mit einer Inspektion deiner Website beauftragen.
Wie wäre es mit einem persönlichen Gespräch?
