Einfach und dynamisch Bildgrößen anpassen – mit Glide

Bildbearbeitung mit der Library Glide
Kommentare

Man stelle sich vor, dass man ein großes, hochaufgelöstes Foto als Profilbild für seine Social-Media-Seite des Vertrauens gewählt hat. Das sieht sicher super aus und macht auch keine Probleme – zumindest solange nicht, bis man die Seite mit dem Bild auf einem mobilen Device öffnen möchte. Über eine mobile Verbindung ein rund 10 MB großes Bild herunterzuladen, ist nicht nur Verschwendung von Kapazitäten, sondern auch eine potenziell ziemlich langwierige Angelegenheit. An dieser Stelle kommt die Library Glide ins Spiel.

Um solche großen Bilder vor dem Download herunterzuskalieren, könnte man beispielsweise ein Media-Query in CSS einfügen, das die Größe des Bildes beschränkt. Zum Beispiel lässt sich so festlegen, dass anstelle des Originalbilds auf Geräten mit einer maximalen Breite von unter 400 Pixeln auf ein kleineres Profilbild zurückgegriffen wird. Auf diese Weise wird das Bild dann schneller geladen. Allerdings ist es recht aufwändig, jedes einzelne Bild – etwa für eine App – manuell anzupassen. Und genau bei diesem Problem setzt Glide an.

Features von Glide

Bei Glide handelt es sich um eine Bildbearbeitungsbibliothek, die in PHP geschrieben ist. Das zugehörige API lässt sich – ähnlich wie bei Bildverarbeitungsdiensten in der Cloud – via HTTP ansteuern. Glide selbst nutzt mächtige Bibliotheken wie Intervention Image (für das Image-Handling und die Bearbeitung) und Flysystem (für Dateisystem-Abstraktionen) wirkungsvoll für seine eigenen Zwecke.

Glide kann so konfiguriert werden, dass es auf fehlende Bildanfragen antwortet, indem das Tool das Bild aus einer vorher festgelegten Quelle erstellt. Zusammenfassend gesprochen: Existiert das angeforderte Bild in einer kleinen Auflösung nicht, die Quelle aber schon, wird das angefragte Bild aus der Quelle erstellt. Zudem kann das Bild in einem Cache gespeichert werden, sodass in Zukunft weitere Requests nicht extra die Bibliothek aufrufen müssen und wertvolle CPU-Ressourcen beim Re-Rendering verschwendet werden.

Glide, an image manipulation package which can generate modified images on-demand, saving you the trouble of having to generate them before deploying your application.

Weitere Vorteile von Glide liegen in der HTTP-Struktur: Bilder können nicht nur verkleinert, sondern auch angepasst und mit weiteren Effekten versehen werden. Außerdem lassen sich die URLs von Bildern durch HTTP-Signaturen sichern. Glide kann über den Composer $ composer require league/glide installiert werden. Zudem gibt es eine PHPUnit Test Suite, in der die Library in einer Testumgebung gestartet werden kann. Auf Sitepoint findet sich übrigens ein hilfreiches Tutorial zum Einsatz von Glide.

Name Glide
Hersteller Jonathan Reinink
Projektwebsite http://glide.thephpleague.com/
GitHub https://github.com/thephpleague/glide

 

Aufmacherbild: Duo paragliding flight von Shutterstock / Urheberrecht: Aurelien Laforet

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -