Bildkomprimierung Tools

Bilder komprimieren: Welches Tool ist das beste?

Bildkomprimierungs-Tools im Test

Bilder komprimieren, auf ein möglichst geringes Dateivolumen, aber ohne sichtbaren Qualitätsverlust – das ist eine Herausforderung für jeden Webmaster, denn schnelle Ladezeiten sind die Voraussetzung für eine gute Usability und gute Rankings in Suchmaschinen. Neben Bildbearbeitungsprogrammen wie Fireworks oder Photoshop gibt es Spezialtools, die fast nichts anderes können als Bilddateien so zu schrumpfen, dass sie für das menschliche Auge unverändert vorliegen, aber trotzdem aufgrund des geringeren Dateivolumens schneller geladen werden können und zu besseren Pagespeed-Werten beitragen.

Diese Programme wiederum lassen sich wie folgt unterscheiden:

  • Online-Tools: wer nur wenige Bilder komprimieren möchte, kommt hier am schnellsten zum Ziel: ohne Registrierung, einfach Originalbild hochladen, kompimiertes Bild herunterladen, fertig!
  • Desktop-Tools: hier ist es erforderlich, das Programm auf den eigenen Computer herunterzuladen und dort zu installieren. Vorteil ist, dass es in der Regel die Möglichkeit einer Bulk-Verarbeitung gibt, d. h. mehrere Bilddateien können auf einen Rutsch verkleinert werden.
  • WordPress Plugins: die Installation erfolgt über das WordPress Repository. Der Vorteil ist, dass der Workflow in WordPress integriert ist.

Mich interessierte, welches Tool zur Bildkomprimimierung ist das beste? Genauer: welches liefert mehr oder weniger verlustfrei komprimierte Bilddateien mit geringem Dateivolumen, die dann schnelle Ladezeiten und Pagespeed Richtung 100 ermöglichen?

Wie habe ich die Bildkomprimierungstools getestet?

Ich habe drei Urlaubsbilder (Originalgröße 4608 x 3456 Pixel, jpg-Format), die ich mit meiner Kamera Pentax X-5 geschossen habe, auf eine Breite von 500px verkleinert. Zum Bilder komprimieren habe ich anschließend neben dem Adobe Bildbearbeitungsprogramm Fireworks diverse Online- und Desktop-Tools als auch WordPress-Plugins verwendet.

Verwendet wurde jeweils die Standardeinstellung der kostenlos erhältlichen Variante des Tools. Mit einem Klick auf eines der Bilder, kommt man jeweils auf eine eigene Seite, die für die anschließenden Tests von Pagespeed und Ladezeiten verwendet wurde. Hierbei habe ich – um Verzerrungen zu vermeiden – auf die sonst üblichen Maßnahmen der Optimierung von Ladezeiten (Gzip, Caching, …) verzichtet. Das bedeutet aber auch, dass sich die Werte zu einem späteren Zeitpunkt sehr wahrscheinlich nicht mehr reproduzieren lassen, wenn ich zu einem späteren Zeitpunkt einmal solche Techniken einsetze.

Bildkomprimierungstools in der Übersicht

Komprimierungs­toolLinkScreenshotAnmerkung
Originalbilder (500px)
Originalbilder (500px) 80%, hier komprimiert mit Fireworks CS4aktuelle Version: Fireworks CS6

Fireworks - Software für Bildbearbeitung
Von Adobe Systems IncorporatedAdobe Fireworks, Gemeinfrei, Link
Software für Bildbearbeitung
Riothier bei CHIPBestes BildkomrimierungstoolDesktop-Tool; Einstellung „Progressive Images“ möglich
jpegmini.comhttps://www.jpegmini.com/Bildkomprimierung mit jpegminiDesktop- / Online-Tool
jpegoptimise.comZielseite ist nicht mehr verfügbarOnline-Tool
compressjpg.comhttp://compressjpeg.com/Compress.jpg im TestOnline-Tool
wp-smushhttps://de.wordpress.org/plugins/wp-smushit/WP-Smush: WordPress-Plugin zum Bild verkleinernWordPress-Plugin
EWWW Image Optimizerhttps://de.wordpress.org/plugins/ewww-image-optimizer/ WP-Plugin EWWW Image Optimizer Wordpress-Plugin
jpeg.iohttps://www.jpeg.io/ Jpeg.io online kostenlos bildateien verkleinernOnline-Tool
kraken.iohttps://kraken.io/kraken.io: Online-Tool und WP-Plugin zum Bilder verkleinernDesktop-Tool, aber auch als WordPress-Plugin: https://de.wordpress.org/plugins/kraken-image-optimizer/

Bilder im Vergleich

Hier sehen wir die drei verschiedenen Bilder in der Vorschau. Mit einem Klick auf das jeweilige Bild kommt man auf das komprimierte Bild im Originalformat.

Art der KomprimierungBild 1Bild 2Bild 3
Original­bilderbild-1bild-2bild-3
Originalbilder 80%bild-1abild-2abild-3a
riotbild-1bbild-2bbild-3b
jpegmini.combild-1cbild-2cbild-3c
compressjpg.combild-1ebild-2ebild-3e
wp-smushbild-1gbild-2fbild-3f
EWWW Image Optimizerbild-1gbild-2gbild-3g
jpeg.iobild-1hbild-2hbild-3h
kraken.iobild-1ibild-2ibild-3i

Ergebnisse Pagespeed (Mobile / Desktop)

gemessen mit https://developers.google.com/speed/pagespeed/insights/; da die Unterschiede zwischen den Bildern marginal waren, wurde hier auf eine differenzierte Darstellung verzichtet.

Art der Komprimierung
Bild 1, 2 und 3
Originalbilder
72 / 84
Originalbilder (500px) 80%
75 / 87
Riot
75 / 89
jpegmini.com
72 / 84
jpegoptimise.com
72 / 84
compressjpg.com
75 / 89
wp-smush
75 / 88
EWWW Image Optimizer
75 / 89
jpeg.io
75 / 89
kraken.io
75 / 89

Pagespeed Insights ist offensichtlich ab einer gewissen Komprimierung „zufrieden“ und honoriert eine weitere Reduzierung des Dateivolumens nicht. Dennoch kann diese sinnvoll sein, denn je geringer das Dateivolumen, umso schneller lädt die Website und umso besser ist die Usability.

Ergebnisse Ladezeit in ms (Bild / gesamte Seite)

gemessen mit https://www.webpagetest.org/; Einstellung: Frankfurt, DE – Chrome – Cable

Art der KomprimierungBild 1Bild 2Bild 3
Originalbilder (500px)269 / 1.660303 / 1.580263 / 1.653
Originalbilder (500px) 80%184 / 1.583173 / 1.630149 / 1.639
Riot99 / 1.541119 / 1.607101 / 1.620
jpegmini.com211 / 3.951262 / 1.635126 / 1.609
jpegoptimise.com259 / 1.620199 / 1.566199 / 1.620
compressjpg.com124 / 2.731157 / 1.903139 / 1.561
wp-smush157 / 1.771191 / 1.629175 / 1.551
ewww171 / 1.671191 / 1.629175 / 1.551
jpeg.io154 / 1.674193 / 1.692158 / 1.602
kraken.io142 /2.601190 / 1.606155 / 1.861

Fazit

Die Testreihe zeigt nicht ganz widerspruchsfreie Ergebnisse. Nicht in jedem Fall bewirkt ein geringeres Dateivolumen gleich schnellere Ladezeiten und mehr Pagespeed. Das liegt wahrscheinlich daran, dass die Serverausnutzung variieren kann. Dennoch hat RIOT, das Radical Image Optimization Tool – seinem Namen alle Ehre gemacht und für alle Bilddateien die beste Komprimierung und die schnellsten Ladezeiten geliefert. Generell wäre noch zu überprüfen, ob die komprimierten Bilder am Ende brauchbar oder doch zu stark verpixelt sind. Interessant wäre es ebenfalls, die Tests unter veränderten Rahmenbedingungen (Bilder komprimieren mit kostenpflichtigen Tools, Verwendung von Progressive Images, Löschung von EXIF-Daten) fortzuführen. Auch mit dem neuen Bildformat webp, auch „weppy“, lassen sich scharfe Bilder mit wenigen KB darstellen. Allerdings wird dieses noch nicht von allen Browsern unterstützt.

Anfrage Optimierung Ladezeiten
Ich freue mich über Kommentare zum Thema „Bilder komprimieren“ mit Meinungen zu den Tools.

Nachtrag 11.01.2018:
Zur Nachkorrektur können optimierte Bilder auch nach der Analyse bei Google Page Speed Insights heruntergeladen werden. Der Download-Link befindet sich relativ weit unten im Text „Laden Sie hier optimierte Bild-, JavaScript- und CSS-Ressourcen für diese Seite herunter.“ Relativ neu ist auch ein Tool von Google namens Guetzli (Schwyzerdütsch für „Keks“), das ich aber noch nicht selbst ausprobiert habe. Dieses gibt es in zwei Varianten:
Desktop-Tool: https://github.com/google/guetzli
Online-Tool:http://www.guetzli.it/