How-To: Einfaches und Schnelles Optimieren von Bildern im Deployprozess

Posted by in Allgemein, Debian, Performance, Webdesign

Auch wenn die Bandbreiten im Internet immer größer werden und die meisten eine Flatrate haben, so ist die Seitenladezeit nach wie vor einer der wichtigsten und kritischsten Punkte für eine Webseite. KissMetrics hat eine gute Infografik erstellt, wie die Seitenladezeit die Conversion beeinflusst.

Aus meiner Sicht macht es aber keinen Sinn, während der Entwicklung permanent alle Bildchen zu minifizieren, wenn man einen sauberen Deployprozess hat. Sprich, wenn man seine Seite nicht einfach per FTP auf einen Server hoch lädt, sondern mit einem Deployscript sauber installiert. Dann reicht es, die Bildoptimierung als Deployschritt durchzuführen.

Wie Optimiert man Bilder am besten? Natürlich hat die Kompression bereits einen großen Einfluss, ebenso auf die Farbtiefe. Trotzdem landen meist noch unnötige Meta-Daten in den Bildern. Diese kann man problemlos entfernen. Ebenso gibt es auch noch Möglichkeiten Farbtabellen zu optimieren. Diese Optimierungen sind Verlustfrei, sprich das Ausgabebild am Bildschirm ist 1:1 das gleiche, nur das die Datei kleiner ist.

Nachdem ich nun erklärt habe, wieso das so toll ist, möchte ich nun auch zeigen, wie man das auf einem Ubuntu einfach bewerkstelligt:

Rekusrives Crunshen der Bilder mit jpegoptim und optipng

Zuerst installieren wir jpegoptim und optipng: sudo apt-get install jpegoptim optipng

Mit folgendem Script könnt ihr nun rekursiv durch Euer Projekt die Bilder optimieren lassen:

#!/bin/bash
 
# optimize jpegs
find . -name \*.jpg -exec jpegoptim --strip-all {} \;
 
# optimize png
find . -name \*.png -exec optipng {} \;
 
# optimize gif
find . -name \*.gif -exec optipng {} \;