Image Optimierung

losslessly compressing

Bilder stellen meist den größten Teil einer Webseite da. Sie belegen somit einen Großteil des Seiten Inhaltes, ob Slider, Hintergrundbilder oder einfache Thumbnails.
In der Regel stellen diese etwa 70% der gesamten Website Größe dar und der Google PSI merkt gerne diesen Punkt an.

Hier gilt natürlich zu beachten, ob Google anmerkt dass eine losslessly compression nötig ist, oder auch ein resize der Grafik.

Durch die Optimierung von Bildern kann ein Großteil der Bandbreite vom Server und vom Kunden gespart werden, oder für weitere requests genutzt werden. Eine Kompression von Bildern bedeutet nicht immer einen verlustbehafteten Prozess.

Noch wichtiger als die Kompression von Bildern, ist die Wahl des richtigen Bildformats und der richtigen Auflösung. Die Auflösung der Bilder sollte durch Responsive Images immer entsprechend dem Endgerät angepasst werden. Gerade auf mobilen Geräten deren Bandbreite meistens begrenzt ist.

Zur Auswahl des richtigen Datentyps können sie die folgende Tabelle zur Hilfe nehmen:

• Animation: *.gif
• Transparenter Hintergrund: *.png | *.svg
• Ansonsten: *.jpg mit unterschiedlichen Qualitäten | *.svg

Ein weiterer wichtiger Faktor ist die Wahl des richtigen Speicherverfahrens. Bei *.jpg und *.png sollten Bilder immer mit den progressiv (*.jpg) oder interlanced (*.png) gespeichert werden. Diese Verfahren bewirkt, dass die Bilder nicht mehr zeilenweise geladen werden, sondern chaotisch. So erscheint das Bild anfangs unscharf und wird dann immer schärfer gerendert. Dadurch kann der Endnutzer schonmal die ersten Formen erkennen und erahnen was auf dem Bild ist.
SVG als Alterna

Eine Alternative stellt fast immer die SVG da. SVG’s sind Vektorgrafiken die sich dynamisch der Auflösung des Endgerätes anpassen. Die Anpassung erfolgt in der Größe und in der Pixeldichte.

Sie finden auch in immer mehr Icon-Fonts Anwendung. Hinzu kommt das sie durch JavaScript und CSS3 dynamisch modifiziert werden können, von Farbveränderungen bis hin zu kleinen Animationen.

Da SVG’s reine Text Files sind, können sie durch Kompressionen wie Gzip einfach komprimiert werden, und sparen so einen Großteil des traffics ein.

Sie können SVGs wie gewohnt in IMG-Tags als src verwenden, allerdings stehen Ihnen in diesem Fall nicht die Möglichkeit der Modifikation durch CSS oder JavaScript zur Verfügung.

SVG’s sind jedoch HTML ähnliche Datei und der Quellcode der SVG’s kann direkt in das HTML der Seite eingebunden werden. Durch diese Art der Einbindung wird keine zusätzlicher request beim Seitenaufruf benötigt, und die Grafik kann direkt mit der ersten Antwort des Servers gerendert werden. Gerade im Hinblick auf die Above The Fold Optimierung bietet dieses einen deutlichen Vorteil gegenüber klassischen Grafiken

Bereits beim Speichern von Bildern in Photoshop ist es wichtig die Bilder fürs Web zu speichern. Sowie hier die Speicherart interlaced oder progressiv auszuwählen.

Ein weitere Punkt beim Speichern in Photoshop ist die Auswahl der Meta Tags, standardmäßig werden sämtliche Metainformationen im Bild hinterlegt. Dieses sorgt jedoch für unnötigen Speicherplatz und kann einen Großteil der Dateigröße ausmachen. Daher sollten Metainformationen nur bedingt und gezielt den Bildern hinzugefügt werden.
Noch besser wäre sogar, wenn sie keine Metainformationen am Bild anhängen.

Eine weitere Möglichkeit der Bildoptimierung bietet uns NodeJS mit dem Gulp-Taskrunner f und dem Packet gulp-imagemin. Eine Beispielscript können Sie in meiner GitHub Repo Liste finden.

Damit Sie dieses nutzen können, kopieren Sie sich die Repo und rufen anschließend den Befehl

npm i

auf. Damit NodeJS alle nötigen Pakete lädt. Ist dieser Vorgang abgeschlossen können sie alle Pakete die sich innerhalb des Projekts im Ordner “/src” befinden über den Befehl

gulp default

komprimieren lassen.

Anschließend erhalten Sie die Information wieviel speicherplatz gewonnen werden konnte. Die fertig komprimierten Datei befinden sich dann in dem Ordner “/public” und können von dort auf den Server kopiert werden. 

Ein externes Programm für die Komprimierung von Grafiken auf dem Mac ist das Programm Imageopim hier können Sie die gespeicherten Bilder in das Programm ziehen und sie entsprechend komprimieren lassen.

Bei kleineren Icons bringt die Verwendung von CSS Sprites einen großen Vorteil. Da anstelle von vielen kleinen Dateien nur noch eine große geladen werden muss. Dies spart jede menge Zeit beim Verbindungsaufbau. Für die Generierung solcher CSS Sprites gibt es im Web jede menge Generatoren die Ihnen hierbei helfen können.