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.

Sie haben Interesse an unseren Lösungen? Toll! Unser Experten-Team freut sich schon auf Ihren Anruf!
Callcenter
WinLocal Team

Rufen Sie uns an:

069 97784590

Oder nennen Sie uns jetzt einen Wunschtermin für einen Rückruf von einem unserer Experten.

TeamviewerWir beraten Sie gerne in einer Live Demo an Ihrem PC!

Wenn Sie mögen, können wir Ihnen an Ihrem heimischen PC demonstrieren, was wir für Ihr Unternehmen oder Ihren Betrieb umsetzen können. Ganz einfach und unkompliziert per Bildschirmpräsentation.

Klicken Sie auf den Button Ihres Betriebssystems und laden Sie das kleine Programm für die Bildschirmpräsentation herunter. Installieren Sie anschließend das Programm per Doppelklick und starten Sie es. Geben Sie nun den Code für das Online-Meeting ein, den Sie von Ihrem Berater am Telefon erhalten haben, um die Bildschirmpräsentation zu starten.

Vereinbaren Sie jetzt ein unverbindliches Beratungsgespräch an Ihrem Wunschtermin:

Datum (Rückruf)

Uhrzeit (Rückruf)

Ich interessiere mich für folgende Lösung:

Wir bereiten uns auf das Beratungsgespräch mit Ihnen detailliert vor und führen vorab eine Online-Analyse für Ihr Unternehmen durch. Planen Sie dafür bitte etwa 30 Minuten Ihrer Zeit ein. Diese Beratung ist für Sie selbstverständlich 100% kostenlos und unverbindlich.

Cookie-Einwilligung mit Real Cookie Banner