Maximale Bildkompression: JPEGmini vs. Smush.it vs. PunyPNG
Geringe Dateigrößen sind nach wie vor ein wichtiger Anhaltspunkt um die Qualität einer Website zu beurteilen. Zwar wird das lokale Internet immer schneller und verkraftet auch größere Dateien, doch das mobile Web erreicht diese Übertragungsgeschwindigkeiten längst nicht. Und auch die Suchmaschinen berücksichtigen die Ladezeit einer Website und listen schnelle Seiten weiter vorne.
Eine von vielen Möglichkeit um die Ladezeit zu reduzieren, sind optimal komprimierte Grafiken. Wer jetzt glaubt, der „Für Web speichern“-Dialog von Photoshop würde ausreichen, der irrt. Photoshop erzeugt außergewöhnlich große Dateien und ist selbst innerhalb der Creative Suite nicht die erste Wahl. Fireworks komprimiert Bilder bei identischen Exporteinstellungen deutlich besser.
Wer Fireworks nicht besitzt, oder wem der Umweg vom Photoshop-Layout über den Fireworks-Export zu lästig ist, kann auf Online-Tools zur Bildkompression zurückgreifen. Ich habe mir drei gängige Dienste angeschaut und möchte euch zeigen welches Tool für welches Bild am besten geeignet ist.
Wie wurde getestet?
Ich habe mir für meinen Test drei prominente Dienste ausgesucht: JPEGmini, PunyPNG und Yahoo Smush.it. Bei allen Diensten habe ich mir die Standard-Funktionalität ohne Benutzeraccount angeschaut. Es ging mir in erster Linie darum, die Dateigröße der optimierten Grafik zu beurteilen. Erweitere Funktionen wie die Verwaltung von Alben, der Upload zu Online-Bilddatenbanken etc. waren für mich nebensächlich.
Ich habe für meinen Test vier JPG-Dateien und drei PNGs erstellt und bei allen Diensten hochgeladen. Bei diesen Dateien handelt es sich um typische Grafiken die ich im Web verwende. GIF-Dateien kommen aufgrund ihrer schlechten Kompression generell nicht in Frage.
Das Ergebnis: JPEGmini für JPGs, Smush.it als Allrounder
Das Ergebnis hat mich ehrlich gesagt selbst überrascht. JPEGmini erzeugte bei JPG-Grafiken die mit Abstand kleinsten Dateien. Allerdings muss erwähnt werden, dass bei JPEGmini sehr geringe optische Unterschiede erkennbar sind. Diese sichtbare Kompression ist vor allem bei scharfen Kanten erkennbar – kann meiner Meinung nach allerdings vernachlässig werden.
PunyPNG und Smush.it erzeugten bei der JPG-Kompression etwa gleich große Dateien. Ein großer Nachteil von PunyPNG ist jedoch die Upload-Begrenzung auf 150KB. Mit einem Pro-Account kann die erlaubte Dateigröße auf 500KB erhöht werden.
Bei der Kompression von PNG-Files scheidet JPEGmini aus. Hier können nur JPG-Dateien komprimiert werden. PunyPNG und Smush.it erlauben die Kompression von PNG und erzeugten erneut vergleichbare Ergebnisse. Ärgerlich ist allerdings auch hier der geringe Upload von PunyPNG.
| Ausgangsbild | JPEGmini | PunyPNG | Smush.it |
|---|---|---|---|
| 336 KB (*.jpg) | 119 KB | Upload nur bis 150 KB | 324 KB |
| 270 KB (*.jpg) | 57 KB | Upload nur bis 150 KB | 258 KB |
| 78 KB (*.jpg) | 23 KB | 71 KB | 69 KB |
| 115 KB (*.jpg) | 25 KB | 106 KB | 106 KB |
| 561 KB (*.png) | Upload nur von JPG-Dateien | Upload nur bis 150 KB | 516 KB |
| 147 KB (*.png) | Upload nur von JPG-Dateien | 135 KB | 135 KB |
| 49 KB (*.png) | Upload nur von JPG-Dateien | 45 KB | 45 KB |
Benutzerfreundlichkeit
Neben der reinen Qualität der Ergebnisse spielt auch die Benutzerfreundlichkeit eines Dienstes eine große Rolle.
Bei PunyPNG und bei Smush.it können auch ohne Benutzeraccount mehrere Dateien parallel hochgeladen und komprimiert werden. PunyPNG begrenzt diese Zahl jedoch auf 15 Dateien. JPEGmini erlaubt ohne Account nur den Upload von einzelnen Dateien, was den Workflow durchaus behindert.
Der Download der komprimierten Dateien sieht ebenfalls sehr unterschiedlich aus. Sofern nur eine Datei hochgeladen wird, stellt PunyPNG die Datei unter dem Original-Dateinamen zur Verfügung. Die Ursprungsdateien können also einfach überschrieben werden. Smush.it stellt immer ein ZIP-Dokument zur Verfügung und JPEGmini ergänzt den Dateinamen um den Suffix „_mini“. Insbesondere der Suffix ist natürlich sehr unpraktisch, da die Dokumente manuell umbenannt werden müssen.
Fazit
Tja – welcher Dienst soll es nun sein? PunyPNG scheidet für mich ganz klar aus. Zwar war ich bisher ein großer Fan dieses Dienstes, habe aber jetzt die Grenzen kennengelernt. PunyPNG schränkt den Benutzer einfach an zu vielen Stellen ein: Maximal 15 Dateien im Upload bei maximal 150 KB Dateigröße sind zu schwach. Vor allem, da die optimierten Dateien ähnlich groß sind wie bei Smush.it.
Smush.it lässt sich hingegen optimal in meinen Workflow integrieren. Es können beliebige Grafikformate hochgeladen werden, es existiert keine wirkliche Begrenzung in der Upload-Größe und es ist auch möglich mehrere Dateien parallel hochzuladen. Die Ausgabe erfolgt zwar als ZIP-Archiv, innerhalb des Archivs werden allerdings die ursprünglichen Dateinamen beibehalten. Für Smush.it existiert sogar ein WordPress-Plugin das Dokumente beim Upload in die Mediathek automatisch komprimiert. Praktischer geht es kaum noch.
JPEGmini hat mich überrascht. Zwar ist das Tool nicht besonders komfortabel, die Dateigröße ist allerdings unschlagbar gering. Ich werde mit Sicherheit in Zukunft meine JPG-Layout-Grafiken mit JPEGmini manuell komprimieren.
Update: Fehlerhafte Skalierung im Responsive Webdesign
Ich habe noch einen schweren Bug im mobilen Safari entdeckt. Nachdem ich die Hintergrundgrafik meiner Seite mit JPEGmini komprimiert hatte, wurde die dem body zugewiesene Grafik auf dem iPad falsch skaliert. Ich gehe davon aus, dass es mit dem nach der Kompression fehlenden Datei-Header und dem im Responsive Design festgelegten Skalierungsfaktor zu tun hat. Ihr solltet diesen Fehler im Hinterkopf behalten und nach einer Optimierung kontrollieren. Bei Elementen mit einer zugewiesenen Breite (wie dem Footer-div) trat dieses Problem nicht auf.
Noch mehr Tools zur Bildkompression
Wenn ihr noch weitere Tools zum Komprimieren von Bildern sucht, schaut in folgende Liste:
Geschrieben von Jonas
Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.
Mich würde mal interessieren was mit den daten passiert die auf die server von yahoo und jpegmini zum komprimieren hochgeladen wurden. verbleiben die da, kann yahoo (als suchmaschine) diese für eigene zwecke verwenden?
konnte da nichts wirklich passendes zu finden.
grüsse tom
Ich schwöre ja auf tinypng.com für PNG Komprimierungen. Bekommt die Dateien super klein und sauber hin!
hi,
ich bin auch ein image compression developer und versuche seit einiger zeit das jpg format welches in ehren gealtert ist, durch ein besseres zu ersetzen.
aktuell habe ich die letzte Entwicklung auf einer webweite präsentiert.
unter hevcp.com zeige ich was derzeit mit html(5) und image compression möglich ist.
die demo läuft noch nicht auf allen Endgeräten und der IE macht mal wieder nicht 100% mit. firefox,safari,chrome sowie iphone5 und ipad>3 Geräte spielen schon mit.
Vielen Dank für diesen hilfreichen Artikel. Habe ihn gerade via Google gefunden und werde nun mal das WP-Plugin für Smush.in installieren.
Wieso wird vom Autor auf einen optischen Vergleich verzichtet wenn andere User selbst das Resultat auf objektive Art und Weise bewerten möchten? Ich kann einen optischen Unterschied der Bilder erkennen die mit JPEGMini komprimiert wurden. Teilweise werden sogar minimalistisch die Farben abgewandelt (hatte den Fall bei rosa Lippen), bei dem gewisse Farbwerte nach der Optimierung durch JPEGMini ein wenig blasser geworden sind und manch Buchstabenkanten teilweise zu soft (Anti-Aliasing) wurden. Ich bin teilweise eher negativ überrascht. Aber durch irgend etwas muss ja die Komprimierung schließlich geholt werden (alleine die Entfernung von Meta-Daten, etc. machen nicht genug aus).
Hey,
für mich führte kein Weg an Smush.it vorbei – das WordPress Plugin hat mich einfach überzeugt. Wäre interessant zu wissen ob jemand schon einmal die Dienste auf ihre Kompatibilität bezüglich „Einbindung“ getestet hat. Jegliche Files manuell zu „minimizen“ kann irgendwie nicht die Lösung sein.
Für PNG gibt es auch das folgende Werkzeug: http://tinypng.org/
zusätzliche Infos dazu gibt es hier: http://www.drweb.de/magazin/tiny-png-verkleinert-pngs-mit-uber-60-ersparnis-bei-voller-transparenz/
Ich schwöre auf smushit, da es sich optimal in meinen Workflow einbinden lässt. Toll ist auch die Möglichkeit ganze Bilderpakete hochzuladen.
Leider ist die Seite sehr oft off…
[…] ohne das diese an Qualität verlieren. Dazu gibt es einige Onlinetools und auch einen Vergleich – Link – der Tools. Ich persönlich habe bisher erst kraken.io verwenden und smushit.com. Die höhere […]
[…] die Bildkomprimierung gibt es einige gute und weniger gute Tools. Sowohl offline als auch online. Sowohl Systemunabhängig oder eben only Mac, Windows oder Linux. Ich habe schon einige getest. Das […]
Gute Tipp, mir hat neben kraken.io bislang auch smush.it am besten gefallen. Gleichwohl: Die Einsparungen sind meiner Erfahrung nach oftmals sehr gering (0,2 – 2%), wenn man die Bilder vorher in PS mit „Für Web speichern“ gespeichert hat.
Könntest Du die Originaldateien posten? Ich schreibe gerade an einem Artikel (oder eher an mehreren Artikeln) und ich wüsste gern, ob ich die Ergebnisse hier toppen kann. :-)
Als Beispiel:
http://cdn1.iconfinder.com/data/icons/Birdies_by_arrioch/png%20512/twitter%20follow%20me.png
Original: 140,34 kb
Smush.it: 137,69 kb (-1,89 %)
Optipng: 140,34 kb (-0%)
PNGout: 128,11 kb (-8,71 %)
Mein eigenes System:
verlustfrei: 128,10 kb (-8,72 %)
verlustbehaftet: 42,04 kb (-70,04 %)
Bei kleineren Icons – also im Bereich von 16 bis 128 Pixel Kantenlänge bekommt man teilweise noch bessere Ergebnisse. So habe ich bis zu 90 % von den Originalgrafiken runter bekommen. Teilweise sogar verlustfrei!
Einen Nachteil muss ich allerdings auch erwähnen. Die Berechnungen sind sehr rechenintensiv und dauern natürlich viel viel länger als die Dateien einfach bei smush.it hochzuladen.
@Oliver: Vielen Dank für deinen Kommentar! Leider habe ich die Testdateien nichtmehr. Ich habe mich auch selbst schon darüber geärgert :)
Die effektivste Online-Tool für PNG-Bilder ist http://compresspng.com
Es reduziert Ihr Bild auf 38.872 Byte.
Hallo, ich hatte gerade auf Websiteboosting über smush.it gelesen und wie wichtig es ist, dass die Bilder schnell geladen werden. JEPG Mini habe ich gerade getestet und finde das Tool klasse. Werde demnächst mal versuchen einen ganzen Ordner hochzuladen. Danke für den Tipp. LG Sabine
PunyPNG and smush.it sucks. All you need is the awersome Kraken.io. It optimizes images far better and much faster than punypng. Besides of that it has a really nice UI :)
Smush.it kannte ich zwar schon, hab es auch regelmäßig eingesetzt. JPEGmini ist für mich gänzlich neu und werde ich in den nächsten Tagen mal testen. Danke für den Tipp – und natürlich auch für den Blogeintrag! :)
Ich empfehle auch http://imageoptim.pornel.net/. Des Weiteren bei diesem Thema eine Pfllichtlektüre: http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
Viele Grüße,
Für das Komprimieren von PNGs benutze ich PNGOUT. Allerdings läuft das Tool über Kommandozeile. Es gibt aber auch eine GUI für Windows (als Shareware).
Vielleicht eine Alternative zu PunyPNG???
Sehr cool. Habe vorher PunyPNG benutzt. Werde aber glaube ich dann mal umsteigen :D
Bisher habe ich wirklich gedacht, dass die “ für Web optimiert abspeichern “ Option einfach hervorragend ist.
Danke für die Aufklärung!
Zwar keine Web-App und nur für Mac, kann aber dafür ebenfalls alle Formate bedienen: ImageOptim http://imageoptim.pornel.net/
Vor allem bei PNG-24 mit Transparenzen habe ich damit sehr gute Erfahrungen gemacht. Bei JPGʼs aber weit von JPEGmini entfernt. Würde mich interessieren, wie es im Vergleich zu den oben genannten abschneidet.
Sehr gut. Gerade noch mit einem Kollegen aus Düsseldorf drüber gesprochen und schon gibs den Blogbeitrag von Dir dazu. Sag mal riechst Du sowas? ;)
Coole Sache! In dem Beiträg hätte ich mich jedoch über eine kleine Gegenüberstellung der reinen Bilddaten gefreut, also ob „sichtbar“ komprimiert wird.
@Moritz: PunyPNG und Smush.it komprimieren verlustfrei. Hier werden die Dateiheader und EXIF-Daten etc. entfernt. Bei JPEGmini ist der Unterschied absolut minimal und so gut wie gar nicht erkennbar. Daher habe ich auf den optischen Vergleich verzichtet. Die Ergebnisse bezeichne ich als identisch :D