Einer der einfachsten Wege, eine Website in der Ladezeit performanter zu machen, liegt in der (automatischen) Reduzierung der Dateigrößen aller verwendeten Pixelbilder.
In der Regel gilt, zwischen Qualität und Dateigröße sowie ggf. Format einen Kompromiss zu schließen. Bei der üblichen Komprimierung mit gängiger Bildbearbeitungssoftware gehen jedoch oft wichtige Details eines Bildes verloren. Ein durchgehend optimales Verhältnis zwischen Qualität und Performance ist ohne Automatisierung oder hilfreichen Tools schwer umzusetzen. Besonders bei der Verwendung des beliebten .jpg Formats.
Die Website Optimizilla.com bietet (nahezu) losless Compression für bis zu 20 Bilder der Formate .jpg und .png gleichzeitig an. Zusätzlich lassen sich die komprimierten Bilder Seite an Seite mit den hochgeladenen Originalen vergleichen, um zu überprüfen, ob die automatische Kompression das gewünschte Ergebnis liefert.
Wer seinen Workflow mit Gulp handhabt, erhält mit den beiden Modulen gulp-image oder gulp-imagemin vergleichbar gute Resultate, mit dem zusätzlichen Vorteilen der geschickten Automatisierung, die Gulp möglich macht. Für Grunt gibt es vergleichbare Lösungen.
Beim Bildformat .png (welches standardmäßig losless ist, aber in der Regel nicht so komprimierbar ist wie andere Formate und daher im Web relativ unbeliebt ist) werden alle im Bild verwendeten Farben indexiert und die Dateigröße deutlich verringert, bei geringem optischem Qualitätsverlust:
„[…] eine Methode zur Speicherung einer Rastergrafik. Bei indizierten Farben enthält die Datenstruktur jedes Pixels nicht direkt die einzelnen Farbwerte, sondern nur einen Index auf einen Eintrag einer sogenannten Farbtabelle oder Farbpalette, die die im Bild verwendeten Farben auflistet. Ein Pixel speichert hierbei – anstelle des Farbwerts – die Nummer des Tabelleneintrags, die diesen Farbwert enthält. Bilder, die nur wenige unterschiedliche Farben enthalten, sparen durch die geringe Größe des Farbindex Speicherplatz ein.“ - Indizierte Farben auf Wikipedia
Diese Lösung eignet sich hervorragend für kleine Bilder und Ikonografie.
Beispiele:
Großes Motiv:
Icon:
Es zeigt sich, JPG eignet sich deutlich besser zur Anzeige großer Motive als PNG, auch in unoptimiertem Zustand. Doch gerade bei kleinen Bildern und besonders bei Icons mit Alpha-Channel (Transparenz) lässt sich so automatisch optimieren und minifizieren. Dabei spielt es keine Rolle, wie die Bilder ursprünglich abgespeichert wurden.
Mit der Implementierung solcher Prozesse und der Gewohnheit, Bilder automatisch (mindestens aber regelmäßig manuell) zu optimieren, ist schon ein wichtiger Schritt Richtung durchgehend gute Webperformance getan.
Mögliche nächste Schritte der Bildoptimierung könnten aus Lazyloading und der Implementierung von Sourcesets bestehen. Für erfahrene Entwickler auch die Verwendung von Googles innovativem Bildformat WebP.
Bildmaterial von Unsplash:Photo by Gabriel Gurrola on UnsplashPhoto by Rodan Can on UnsplashPhoto by Kace Rodriguez on UnsplashPickup icon made by Freepik.com
Zurück zur Übersicht