Bilder optimieren mit TinyPng

Wofür brauche ich das? Im Internet gibt es vielerlei nützliche Werkzeuge für Webseitenbetreiber. Eines dieser Tools ist eben Tinypng. In diesem Blog stelle ich es euch kurz vor und warum ich es lieb gewonnen habe. Einfacher gesagt, Wenn man Bildgrafiken erstellt mittels Kameras oder Software wie Photoshop, werden die Daten standardmäßig mit der höchst- und...

Wofür brauche ich das?

Im Internet gibt es vielerlei nützliche Werkzeuge für Webseitenbetreiber. Eines dieser Tools ist eben Tinypng. In diesem Blog stelle ich es euch kurz vor und warum ich es lieb gewonnen habe.

Einfacher gesagt, Wenn man Bildgrafiken erstellt mittels Kameras oder Software wie Photoshop, werden die Daten standardmäßig mit der höchst- und best möglichsten Auflösung und Farbentreue abgespeichert. Klingt für Prints ziemlich cool, aber in Sachen Web Dev ist es eher nicht so cool. Das hängt mit der Datenmenge zusammen. 

Mit Hilfe der Request – einer Anfrage z.b. auf Webseite XY – werden auf der Webseite alle Elemente inklusive der Bilder «heruntergeladen» als Cache für den Zwischenspeicher. Da gilt der Vorsatz, so schnell wie möglich, damit die Benutzererfahrung zeitnah und «flüssig» wahrgenommen wird. Wenn dabei 30 Bilder à sagen wir 1.2 Mb Speicherplatz auf einer Seite vorhanden sind, sind das schnell mal  36 MB nur für die Bilder die als Payload für den Datenverkehr vorgesehen sind. Der Benutzer muss dann warten, bis alle Elemente heruntergeladen worden sind von der Anfrage, und erst dann sieht er die Webseite überhaupt. 

Andere Seiten unterstützen Lazyload – wir auch – wo die kleinsten Dateninhalte zuerst angezeigt werden und anschließend die Bildmedien. Aber ist auch nicht das wahre, denn die Bilder werden verzögert geladen und die Benutzererfahrung leidet darunter.

Wie funktioniert es?

Tinypng dagegen nimmt die Bildmedien und erkennt an ihrere Kompressionsart, über welche Eigenschaften es verfügt – Beispielsweise PNG wo der Hintergrund transparent verfügbar ist. Anschließend analysiert es die «benachbarten» Pixel und stellt einen Index zusammen. Dieser wird dann wieder in die Datei eingeschrieben. Weniger Daten werden für den Prozess dann benötigt, was die Datengrösse dann ziemlich cool verkleinert. Nachteil dagegen wirkt oftmals dann die DPI – Dots per Inch – also der allgemeinen Auflösung. Mit dem Sweetspot für kleinere Medien wie Webseiten – wie hier in diesem Artikel – fallen diese gar nicht gross auf. Dafür ist Tinypng wirklich der Kracher.

Es gibt eine kostenfreie Variante mit einer Beschränkung von 5 MB mit 20 Bildern gleichzeitig für den Webdienst. Es gibt auch die API Variante, wenn man diese in seiner Lösung/CMS direkt einbinden will. Dann wird beispielsweise direkt der Upload der Benutzer auf die API umgewandelt und die komprimierte Variante im Root gespeichert. Dies kostet dafür was.

Post a comment

Ihre E-Mail-Adresse wird nicht veröffentlicht.