Zu oft wundert man sich warum die eigene Web-Anwendung nicht so schnell im Browser geöffnet wird, wie man sich das wünscht.

Der, aus meiner Sicht, mit Abstand häufigste Grund sind nicht optimierte Bilder die in der Anwendung verwendet werden. Das daraus resultierende schlechte Benutzer-Erlebnis führt dazu, dass du potentielle Kunden verlierst.

Bilder, Bilder und nochmal Bilder

image-size.png

Bilder die durch deine Web-Anwendung bereit gestellt werden sollten nicht unnötig groß sein. Wird ein Bild mit einer Breite von sagen wir 400px dargestellt, solltest du es nicht mit einer Auflösung von 6000x6000 zur Verfügung stellen. Das Bild wird dann im Bereich von 50MB liegen und dein Benutzer wird sich nicht darüber freuen das er ewig darauf warten muss oder gar vorzeitig deine Seite verlässt.

Was kann man dagegen machen?

Zuerst sollten wir unterscheiden ob es eigenes oder durch den Benutzer hochgeladenes Bildmaterial ist.

Im Falle des eigenen Bildmaterials kann man sich mit Werkzeugen wie Photoshop oder ImageOptim weiterhelfen. (Ich bin Mac User, es gibt für Windows sicher ähnliche gleichwertige Tools).

Mit "Save for Web" kann man die gewünschte Auflösung angeben und sein Bild so um einiges verkleinern.

save-for-web-png

Anschliessend komprimiert und optimiert ImageOptim das Bild noch weiter.

image-optim.png

Das ist mir viel zu aufwendig!

Natürlich ist dieser Workflow sehr manuell uns als Entwickler möchte man gerne seine Arbeit so automatisiert wie möglich ablaufen lassen. Dafür gibt es ein paar sehr praktische Gulp-Tasks die ihr in euren Build-Prozess einbauen könnt.

https://github.com/mahnunchik/gulp-responsive

Mit Gulp-Responsive kannst du dein Bildmaterial während des Build-Prozesses auf die gewünschte Größe anpassen.

https://github.com/sindresorhus/gulp-imagemin

gulp-Imagemin ermöglicht das Komprimieren von Bildern im Build-Prozess.

Wurde das Bildmaterial durch deine Benutzer hochgeladen, dann kannst du die Bilder entweder direkt nach dem Hochladen verkleinern und komprimieren (zB einen Worker der neue Bilder mittels der oben genannten Tasks bearbeitet) oder diese adaptiv zur Verfügung stellst.

Adapt... was?

Hinter dem Begriff "Adaptive Images" steckt eine schlaue Variante Bilder an den Benutzer/Client auszuliefern. Am Server wird erkannt welches Endgerät die Anfrage gestellt hat und passend dazu wird das Bild geliefert.

Dazu kann man die Bilder für die gebräuchlichen Größen vorrätig halten (zB nach dem Hochladen erzeugen und ablegen).

zB:trigo.at/images/logo@300x300.png

Alternativ dazu kann man Bilder auch on-Demand in der gewünschten Größe erzeugen. Diese Methode hat den Vorteil das man Bilder für die unterschiedlichsten Einsatzzwecke optimiert bereit stellen kann, hat aber den Nachteil das am Server mehr Rechenleistung notwendig ist.

zB: trigo.at/images/logo.png?s=300w

Als Beispiel hier eine Implementation in Node.js (https://github.com/fgnass/adaptive)

Conclusio

Ein einziges schlecht oder gar nicht optimiertes Bild kann alle Bemühungen um eine gute Performance deiner Web-Anwendung zunichte machen. Ich habe ein paar sehr einfache Methoden gezeigt dieses Problem in den Griff zu bekommen.

Wenn du noch weitere Möglichkeiten kennst/einsetzt oder Anregungen hast (zB Links zu Implementierungen in anderen Sprachen/Frameworks) erreicht ihr mich unter @trigo_at auf twitter.