Eine schnelle Ladezeit Ihrer Webseite spielt aus verschiedenen Gründen eine wichtige Rolle. Die zwei wichtigsten Motiviations sind mit Sicherheit dem Nutzer bzw. Webseiten-Besucher die bestmögliche Usability zu bieten (auch mit geringer Bandbreite – z.B. im mobilen Datennetz) und auch Google mit kurzen Ladezeiten zu überzeugen.
Bilder, die Sie auf Ihrer Webseite eingebunden haben, fallen bei einer Performance-Optimierung enorm ins Gewicht. Am Beispiel der Startseite von Go Innovative sieht man, das Verhältnis deutlich: Die reine HTML-Seite hat eine Größe von 7.7 Kb und die zu ladenden Bilder haben eine Größe von 2.119 Kb.
Wie sieht das optimale Bild-Szenario aus?
Ziel bei der Optimierung von Bilder in einem Laravel System ist es, die Bilder genau in der Größe auszuliefern, in der dieses später auf dem Gerät auch angezeigt wird. Allerdings kann das gleiche Bild an verschiedenen Stellen, in verschiedenen Größen angezeigt werden.
Beispiel aus der Praxis:
Auf der Plattform unseres Kunden Nannio können Eltern und Babysitter eigene Benutzerbilder in beliebiger Größe hochladen. Die Avatare werden an verschiedenen Stellen der Plattform angezeigt: In der Vorschau-Liste der Babysitter, in den Profilen der Babysitter, im eigenen Dashboard der Nutzer und als Mini-Avatar im seiten-eigenen Chat. Wenn man nun davon ausgeht, dass das hochgeladene Bild eine Abmessung von 1000x1000 Pixel aufweist, das Chat-Avatar aber durch CSS-Formatierung nur in 32x32 Pixel angezeigt wird, wird schnell klar, das es eine enorme Verschwendung wäre, an dieser Stelle das Original-Bild anzuzeigen.
Die Lösung: Skalierung der Bilder
Um dieses Problem in den Begriff zu bekommen, legt man während der Entwicklung in der Laravel-Konfiguration für die verschiedenen Bild-Felder (z.B. Benutzer-Avatar) die später benötigten Größen an.
Beispiel-Größen: Chat-Avatar (32x32 Pixel), Forum-Avatar (64x64 Pixel), Babysitter-Profil (128x128 Pixel)
Beim Hochladen des Bildes werden alle definierten Formate des Bildes generiert und auf einem Speicherplatz Ihrer Wahl abgelegt.
Tipp: Turbo durch die Auslagerung der Bilder
Dank dem flexiblen Dateisystem von Laravel ist es mit geringem Entwicklungsaufwand möglich, Dateien wie z.B. Bilder auf externen Speichern abzulegen um den Webserver zu entlasten. Mögliche Dateisysteme, die an Ihre Larevel-Lösung angebunden werden können sind beispielsweise ein SFTP-Zugang, Amazon S3 oder Rackspace. Die Liste der Filesyste-Integration ist lang.
Automatisches Skalieren, Beschneiden und verlustfreies Komprimieren mit Laravel ImageUp
Laravel-Lösungen lassen sich durch sogenannten Packages sehr einfach erweitern. Die Auswahl an Erweiterungen ist riesig. Eines dieser Erweiterung ist laravel-imageup. Nach der Installation und Konfiguration von ImageUp übernimmt die Erweiterung alle oben genannten Aufgaben automatisch. Es erspart den Administratoren viele Arbeit und das Rad hinsichtlich der Erstellung der verschiedenen Bild-Größen muss während der Entwicklung nicht neu erfunden werden.