Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

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.

AusgangsbildJPEGminiPunyPNGSmush.it
336 KB (*.jpg)119 KBUpload nur bis 150 KB324 KB
270 KB (*.jpg)57 KBUpload nur bis 150 KB258 KB
78 KB (*.jpg)23 KB71 KB69 KB
115 KB (*.jpg)25 KB106 KB106 KB
561 KB (*.png)Upload nur von JPG-DateienUpload nur bis 150 KB516 KB
147 KB (*.png)Upload nur von JPG-Dateien135 KB135 KB
49 KB (*.png)Upload nur von JPG-Dateien45 KB45 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:

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-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.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 25 Kommentare

  1. tom
    schrieb am 08.09.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

    Antworten
  2. Paul
    schrieb am 03.09.2014 um 14:24 Uhr:

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

    Antworten
  3. Gary
    schrieb am 03.08.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.

    Antworten
  4. pixelsophie
    schrieb am 23.03.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.

    Antworten
  5. ioCron
    schrieb am 24.01.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).

    Antworten
  6. Manuel
    schrieb am 30.10.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.

    Antworten
  7. Felix
    schrieb am 28.07.2012 um 08: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/

    Antworten
  8. Nep-Rec
    schrieb am 10.05.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…

    Antworten
  9. Ladegeschwindigkeit von Webseiten optimieren « SquadWuschel's Blog
    schrieb am 05.05.2012 um 18:00 Uhr:

    […] 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 […]

    Antworten
  10. Image Optim – Mac App für Bildkomprimierung » iNoob - Apple, Mac, Iphone, Ipad
    schrieb am 16.04.2012 um 17:18 Uhr:

    […] 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 […]

    Antworten
  11. Jörg
    schrieb am 15.02.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.

    Antworten
  12. Oliver
    schrieb am 06.01.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.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 06.01.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 :)

      Antworten
    • Pol
      schrieb am 06.03.2013 um 06:14 Uhr:

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

      Antworten
  13. Holzspielzeug-Discount.de
    schrieb am 02.11.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

    Antworten
  14. Pon
    schrieb am 04.10.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 :)

    Antworten
  15. Andreas Greif
    schrieb am 07.09.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! :)

    Antworten
  16. Jonas
    schrieb am 07.09.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,

    Antworten
  17. ines
    schrieb am 07.09.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???

    Antworten
  18. Möv
    schrieb am 07.09.2011 um 15:46 Uhr:

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

    Antworten
  19. Felix
    schrieb am 07.09.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!

    Antworten
  20. Mathias
    schrieb am 07.09.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.

    Antworten
  21. Jens Bayer
    schrieb am 07.09.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? ;)

    Antworten
  22. Moritz
    schrieb am 07.09.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.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 07.09.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

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →