Die richtige Bildkomprimierung fürs Web: Verschiedene Tools im Test

Wer sich mit Bildern für das Web beschäftigt hat, kennt das vielleicht: entweder ist die Datei zu groß und verursacht lange Ladezeiten oder sie hat eine schlechte Qualität. Dieser Artikel setzt sich erst mit den unterschiedlichen Dateiformaten und deren Komprimierungsarten auseinander, schließlich werden verschiedene Komprimierungstools vorgestellt und miteinander verglichen.

Noch bei meinem alten Artikel über die richtige Bildauswahl habe ich sehr strikt unterschieden, wann JPGs und wann PNGs verwendet werden sollen. Nachdem wir aber unseren Webseiten-Relaunch von winlocal.de über die Bühne gebracht haben und viele neue Bilder hinzugekommen sind, sehe ich das ein bisschen anders. Aber fangen wir erstmal bei Altbekanntem an.

Die 2 wichtigsten Bildformate

Das JPG oder auch JPEG  (Joint Photographic Experts Group) ist die absolut richtige Wahl, wenn Fotos komprimiert werden sollen. JPGs werden in Digitalkameras verwendet, in E-Mails verschickt und sind das meistbenutzte Bildformat im Internet. Es stellt 16,7 Mio Farben dar, d.h. es hat die volle Farbtiefe eines 24bit-Bildes.
Die Komprimierung gilt als verlustbehaftet: Es wird versucht, Farben und Übergänge so zu verringern, dass es für das menschliche Auge kaum bemerkbar ist. Dies geschieht allerdings mehr intuitiv. JPGs komprimieren kann man auf jpgoptimiser.com .

I-only-do-jpg

Nun sind wir keine Fashion-Blogger sondern bewegen uns im lokalen Online-Vertriebs-Marketing – hier sind eher Grafiken und auch vor allem Screenshots zu Hause. Da aber ein JPG nicht verlustfrei komprimieren kann, kommt hier oftmals nur „Matsch“ heraus: Gerade bei Grafiken mit harten Kanten oder Schriften innerhalb des Bildes sollte daher ein anderes Format verwendet werden.

Das PNG (Portable Network Graphics) hingegen unterstützt Transparenzen und komprimiert im Gegensatz zu seinem populären Konkurrenten verlustfrei. Hier werden bestimmte Redundanzen erkannt, sodass die Daten einfach anders organisiert werden können anstatt Qualität einzubüßen. So sagt man zumindest, dazu später mehr. Dieses Bildformat hat dadurch aber eben auch die größeren Datenpakete auf dem Buckel. Daher gibt es viele Stimmen die behaupten, JPGs seien im Web das einzig Wahre.

jpg_vs_png (2)

In der oberen Abbildung sieht man schön, wo das Problem liegt. Bei dem JPG auf der rechten Seite wird es durch die Kompression um die Schrift herum pixelig, bei dem PNG nicht.

Soweit die Theorie. Der Rest ist etwas ernüchternd.

Es gibt zahlreiche PNG-Komprimierungstools im Internet, ich habe mir die drei meist umworbensten herausgepickt und sie mal ausprobiert. Tatsächlich wurden hier Komprimierungen von bis zu 70% versprochen, ohne Qualität einzubüßen. Bei meiner Recherche stieß ich unter anderem auf einen Artikel von t3n, welcher das Online-Tool TinyPNG anpreist. Ich habe mir also eins unserer Grafikbilder gepackt und in die Maschine geworfen.

png-komprimieren

Tatsächlich verringerte die Wunderwaffe meine Dateigröße um 72%. Sah danach aber so aus (links Original, rechts Komprimierung):

individuelle-loesungenK

 

compress png

Auch bei dem Hoffnungskandidaten compresspng verhielt es sich gleich. Zwar wurden 62% der Daten gespart, das Ergebnis war das Gleiche wie bei dem Vorgängertool.

Bei PNG Crush verhielt es sich anders: Hier sah man tatsächlich keinen Unterschied zu vorher und nachher, zumindest was die Optik betraf war das erfreulich. Die Dateigröße hatte sich aber nicht nennenswert verändert.

Nun ist gerad dieses Bild eine harte Nuss für die PNG-Komprimierung: Es gibt sehr viele kontrastreiche Details, das Rendering beinhaltet viele Verläufe, da ist nicht so viel Spielraum. Anders verhält es sich bei PNGs mit Transparenzen oder mehr einfarbigen Flächen. Ich versuchte also die Komprimierung einmal mit unserem Goldwertlogo, was im Hintergrund transparent ist.

Goldwert Logo

Hier brauche ich keine vergleichenden Screenshot zu zeigen, da die Ergebnisse bei den 3 Komprimierungstools identisch zum Original sind. Nur die Dateigrößen sind anders:

Original: 205 kb
tinypng: 43 kb
compresspng: 43 kb
pngcrush: 119 kb

Die Gewinner hier sind also die beiden ersten vorgestellten Tools.

Da wir auf unserer Webseite überwiegend Abbildungen wie in unserem ersten Beispiel hatten, komprimierten wir die Bilder bestmöglich nach der „goldenen Regel“ als PNG-Dateien mit qualitativ hochwertigen Resultaten. Als wir allerdings fertig waren, schlugen sich die neuen Abbildungen extrem auf die Ladezeiten nieder. So stark, dass man es nicht lassen konnte.

Die Lösung kam von überraschender Seite:
Photoshop und JPG. Vergessen Sie die Regel.

Zugegeben, das hätte auch vorher mal probiert werden können, aber mir war die JPG/PNG-Regel eingebläut worden und so gab ich es weiter. Die Ergebnisse aber ließen mich verstummen.

Für Web speichern in Photoshop

Nutzt man in Photoshop die Funktion „Für Web speichern“ und komprimiert als JPG, egal wie viele harte Kanten und Schriften im Bild vorhanden sind bekommt man sehr gute Ergebnisse. Je nach Schärfe des Originals kann das Ergebnis ein bisschen verschwommener werden, ist aber auf dem Monitor kaum wahrzunehmen wie ich finde.
Die Komprimierung schlägt hingegen mit über 2/3 Datenreduzierung zu Buche.

Für das Web speichern mit Photoshop

Dieser Screenshot ist ein solch komprimiertes JPG. Hätten Sie’s gedacht? 

Bei den Komprimierungseinstellungen sollten bei der Qualität 60% eingetragen werden, setzt man den Haken auf „progressiv“ spart man noch ein paar Kilobyte ein. Das Bild wird dann noch schneller geladen, ist im ersten Moment allerdings noch verpixelt.

Für das Web speichern

Vergleicht man nun den linken Teil des Screenshots (PNG) mit dem rechten Teil (JPG) fällt eigentlich kein Unterschied auf.

PNG gegen JPG

Geht man mit der Lupe heran, sieht man das altbekannte Problem. Anscheinend hat Photoshop einen Weg gefunden um die JPG-Schwäche weitgehend unsichtbar zu machen.

pngvsjpggross

 

Fazit

Bei Fotos kann man sich auf die JPG-Komprimierung verlassen. Bei PNGs ist es also komplizierter. Falls man Photoshop besitzt, braucht man sich nicht viele Gedanken zu machen und kann einfach fröhlich die obige Funktion nutzen. Falls man das Programm nicht hat, sollte man bei grafischen Bildern mit Transparenzen und größeren Flächen gleicher Farben arbeiten, wenn man auf Ladezeiten wert legt. Dann bieten sich die beiden oben beschriebenen Gewinnertools an. Ob andere Bildbearbeitungsprogramme auch so gut komprimieren, entzieht sich leider meiner Kenntnis.

Zu guter Letzt

Das GIF (Graphics Interchange Format) im Übrigen wollte ich auf keinen Fall mit Nichtbeachtung strafen, es hatte nur mit unserem Thema nichts zu tun. Es ist in der Komprimierung nicht verlustfrei, können hier doch nur 256 Farben angezeigt werden. Allerdings ist es hier das einzige Format, was Bilder hintereinander abspielen, also Animationen anzeigen kann. Wegen der schlechten Qualität war es daher gern verschrien. Aber: auch hier gibt es anscheinend einen Generationswechsel, wie man im unteren Bild sehen kann. Lesen Sie dazu gern meinen Artikel über die Wiedergeburt des GIF Formats.

Ein schickes GIF.

Quelle: Cinemagraphs

Sollten Sie Fragen oder Anregungen haben bzw. DAS Komprimierungstool kennen, was sich bisher meiner Kenntnis entzogen hat, lassen Sie es mich bitte gerne wissen und verwenden Sie dafür den Kommentarbereich.

7 Kommentare zu „Die richtige Bildkomprimierung fürs Web: Verschiedene Tools im Test

  1. Dominik Horn

    tingPNG ist super, für JPGs nutze ich JPGmini. Wenn WordPress zum Einsatz kommt, setze ich auf OptimusHQ von Sergej Müller, das die Bilder beim Upload automatisch in der Größe reduziert. Ich nutze die Programme auch IMMER zusätzlich zu der „Für Web speichern“-Funktion in Photoshop.

    Nachtrag Hier habe ich die drei genannten Tools vorgestellt: http://www.media-affin.de/3-moeglichkeiten-dateigrose-von-bildern-zu-reduzieren PS: Können die beiden Kommentare zusammengeführt werden?

    Antworten
  2. andreas

    Bilder klein halten / machen – ein Klassiker in der Mediengestalter-Ausbildung, aber immer wieder gern gesehen…

    Online-Tools denen ich Bildmaterial zusenden muss kommen mir eigentlich nicht ins Haus. Man weiß ja nie, was mit dem Material sonst noch so angestellt wird.

    Wer Photoshop hat, benutze die von dir beschriebene Funktion. Ein feinere Methode kenn ich nicht.
    Wer sich Photoshop nicht leisten kann / besitzt und an einem Mac arbeitet, dem sein die spartanische, allerdings funktionierende Komprimierung mit dem Vorschau-Programm empfohlen. Bild in Vorschau öffnen -> Ablage | Exportieren -> Bildformat .jpeg wählen -> Qualitätsstufe auswählen. Von maximaler Qualität aus betrachtet, die dritt bis viertschlechtere Qualitätsstufe ist meine bevorzugte Komprimierungsstufe.
    Gutes Gelingen

    Antworten
  3. Pingback: PR Wochenrückblick KW28 – Die Highlights der Woche

  4. Pingback: Pagespeed – Optimierung der Ladezeit einer Webseite - SEO-united.de Blog

  5. Thomas Kujawa

    Das kleine, aber feine und zudem kostenfreie Grafikprogramm Irfanview kennt auch ein ‚Speichern fürs Web‘ und zeigt vor dem Speichern sogar den Unterschied zwischen Original und ‚Kopie‘.

    Antworten

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Social Media & Kontakt

Rufen Sie uns an!

069/97784590

WinLocal Produkte für KMU

Online Marketing-Maßnahmen für Unternehmen, Dienstleister und Betriebe mit lokalen Standorten.

  AdWordsEXPERTE
  EmpfehlungsEXPERTE
  Google+EXPERTE

>> Mehr über WinLocal erfahren!

WinLocal ist Premium-Partner von Google™

WinLocal wird von namhaften SEO-Experten empfohlen

Kategorien im Blog