kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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.

JPEGmini

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.

PunyPNG

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 Yahoo YSlow

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.

Responsive Webdesign - Fehldarstellung nach Bildkompression

Noch mehr Tools zur Bildkompression

Wenn ihr noch weitere Tools zum Komprimieren von Bildern sucht, schaut in folgende Liste:

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

23 Kommentare

  1. Moritz

    Verfasst am 7. September 2011 um 12:27 Uhr.

    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.

    • Jonas Hellwig

      Verfasst am 7. September 2011 um 13:53 Uhr.

      @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

  2. Jens Bayer

    Verfasst am 7. September 2011 um 12:29 Uhr.

    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? ;)

  3. Mathias

    Verfasst am 7. September 2011 um 12:39 Uhr.

    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.

  4. Felix

    Verfasst am 7. September 2011 um 13:48 Uhr.

    Bisher habe ich wirklich gedacht, dass die “ für Web optimiert abspeichern “ Option einfach hervorragend ist.
    Danke für die Aufklärung!

  5. Möv

    Verfasst am 7. September 2011 um 15:46 Uhr.

    Sehr cool. Habe vorher PunyPNG benutzt. Werde aber glaube ich dann mal umsteigen :D

  6. ines

    Verfasst am 7. September 2011 um 17:25 Uhr.

    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???

  7. Jonas

    Verfasst am 7. September 2011 um 20:10 Uhr.

    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,

  8. Andreas Greif

    Verfasst am 7. September 2011 um 22:26 Uhr.

    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! :)

  9. Pon

    Verfasst am 4. Oktober 2011 um 12:54 Uhr.

    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 :)

  10. Holzspielzeug-Discount.de

    Verfasst am 2. November 2011 um 23:26 Uhr.

    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

  11. Oliver

    Verfasst am 6. Januar 2012 um 14:52 Uhr.

    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.

    • Jonas Hellwig

      Verfasst am 6. Januar 2012 um 15:24 Uhr.

      @Oliver: Vielen Dank für deinen Kommentar! Leider habe ich die Testdateien nichtmehr. Ich habe mich auch selbst schon darüber geärgert :)

    • Pol

      Verfasst am 6. März 2013 um 6:14 Uhr.

      Die effektivste Online-Tool für PNG-Bilder ist http://compresspng.com
      Es reduziert Ihr Bild auf 38.872 Byte.

  12. Jörg

    Verfasst am 15. Februar 2012 um 20:01 Uhr.

    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.

  13. Nep-Rec

    Verfasst am 10. Mai 2012 um 13:37 Uhr.

    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…

  14. Felix

    Verfasst am 28. Juli 2012 um 8:35 Uhr.

    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/

  15. Manuel

    Verfasst am 30. Oktober 2012 um 19:07 Uhr.

    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.

  16. ioCron

    Verfasst am 24. Januar 2014 um 19:55 Uhr.

    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).

  17. pixelsophie

    Verfasst am 23. März 2014 um 15:54 Uhr.

    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.

  18. Gary

    Verfasst am 3. August 2014 um 20:41 Uhr.

    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.

  19. Paul

    Verfasst am 3. September 2014 um 14:24 Uhr.

    Ich schwöre ja auf tinypng.com für PNG Komprimierungen. Bekommt die Dateien super klein und sauber hin!

  20. tom

    Verfasst am 8. September 2014 um 10:35 Uhr.

    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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.