Bei unseren Softwareprojekten im avega Solution Atelier verfolgen wir konsequent die Strategie ‘buy before make’: Für Dienste und Produkte, die standardisiert und möglichst in der Cloud bezogen werden können, wollen wir weder Entwicklungs- noch Wartungsaufwand betreiben und steigern somit die Effizienz unseres Entwicklerteams massiv.
Dies widerspricht erstmal diametral der typischen Ingenieur-Mentalität, die in jedem Problem eine spannende Herausforderung sieht und eher nach dem Motto geht: “Vieles wurde bereits erfunden, aber nicht von mir”.
Ist diese initiale Hürde aber erstmal überwunden, lassen sich Lösungen häufig deutlich schneller und mit erweitertem Funktionsumfang realisieren. Auf ein Beispiel gehe ich im folgenden Abschnitt ein.
Bild-Transformation
Für die kesabi App können Betreiber:innen von Freizeitanlagen das Bild für ihre Anlage selbst verwalten. Dies stellt uns vor die Herausforderung sicherzustellen, dass die Bilder im korrekten Seitenverhältnis sowie mit einer angemessenen Auflösung (ergo Dateigrösse) ausgeliefert werden. Zusätzlich soll für die Anlagenübersicht vom jeweiligen Bild ein Thumbnail (reduzierte Bildgrösse) angeboten werden. Um diese Anforderungen abzudecken, ergeben sich verschiedene Strategien:
-
Die Applikation selbst speichert die Bilder und bedient die Endgeräte. Sämtliche Arbeiten wie die Transformation der Bilder, das Abspeichern und optimierte Ausliefern müssen selbst umgesetzt werden.
-
Ein beliebiges CDN (Content Delivery Network) speichert die Bilder und liefert sie an die Endgeräte aus. Die Transformation der Bilder geschieht nach wie vor durch die Applikation und muss selbst programmiert werden. Die Verteilung der Daten übernimmt das CDN.
-
Ein spezialisiertes Image-CDN wird verwendet. Dieses übernimmt sowohl Transformation wie auch Speicherung und Verteilung der Bilder.
Entsprechend dem ‘buy before make’-Mantra haben wir uns für Variante 3 entschieden. Durch den Einsatz von imagekit.io muss unser Backend die Anlagebilder lediglich an die API weiterreichen. Die Endgeräte können dann mittels URL-Parameter die gewünschte Bildgrösse sowie das erforderliche Seitenverhältnis angeben und erhalten direkt von imagekit die optimale Bilddatei. Unsere eigene Applikation bleibt dabei komplett aussen vor, Transformation und Auslieferung werden vom CDN übernommen. Nachfolgend ein paar Beispiele, wie dies aussehen kann:
Beispieldatei auf imagekit: https://ik.imagekit.io/kesabi/default-image.jpg (91.5 kB)
Seitenverhältnis 2:1, Breite 500px: https://ik.imagekit.io/kesabi/default-image.jpg?tr=ar-2-1,w-500 (17 kB)
Vorschaubild mit deutlich reduzierter Dateigrösse, als Platzhalter während das richtige Bild geladen wird: https://ik.imagekit.io/kesabi/default-image.jpg?tr=ar-16-9,w-500,bl-10 (3.6 kB)
Overlay mit Logo: https://ik.imagekit.io/kesabi/default-image.jpg?tr=ar-16-9,w-500,oi-kesabi_logo_weiss_xt16a5Cqc.png,ow-0.25,ox-N20,oy-20
Mit dieser Lösung konnten wir also nicht nur die Kernanforderung (Anlagebild speichern und in 2 Auflösungen zur Verfügung stellen) deutlich schneller umsetzen, wir können nun zudem viel mehr als nur 2 Bildgrössen anbieten. Somit sind wir in der Lage, für jedes Smartphone-Modell die auf die Bildschirmgrösse optimierte Datei zu beziehen. Weitere Funktionen, wie etwa das Logo-Overlay, gibt’s gratis obendrauf.
Selbstverständlich existieren zahlreiche andere Anbieter solcher Image-CDNs. Imagekit dient hier als Beispiel für den attraktiven Funktionsumfang, der ‘as a service’ bezogen werden kann.