Think

Optimierte Medienauslieferung mit Cloudinary und Optimizely CMS

Autor

Jörg Seibert
Principal Architect
bei SYZYGY Techsolutions

Lesedauer
6 Minuten

Publiziert
03. Mai 2023

Bilder und Videos schnell, effizient auszuliefern ist wichtig. Wenn dies nicht von Anfang an in einer Software vorgesehen wird, kann es schwierig werden dies im Nachhinein zu integrieren.

Content Management Systeme haben in der Regel eine eigene Medienverwaltung, dort einzugreifen gestaltet sich unter Umständen nicht so einfach. Ein externer Dienst wie Cloudinary bietet mit geringem Aufwand vielfältige Möglichkeiten Medien zu transformieren und zu optimieren.

Ein konkreter Anwendungsfall hierfür hat sich uns gestellt, als in wichtigen Teilen einer großen Markenwebpräsenz Bilder optimiert und in anderen Bildverhältnissen dargestellt werden sollten, ohne bestehende Medien zu verändern und erneut im Optimizely hochzuladen.

Optimierte Medienauslieferung mit Cloudinary und Optimizely CMS

Am Anfang war die Indirection

In Optimizely werden Medien in Ordnern strukturiert, wobei sowohl die Namen der Ordner als auch der der Dateien Globally Unique Identifier (GUID) sind. Die ursprünglichen Dateinamen werden in der Optimizely-Datenbank verwaltet.

Normalerweise werden Medien über spezielle Routen im Optimizely ausgeliefert, die Abbildung Route zu GUID-Pfad werden vom System aufgelöst. Bei der ursprünglichen Version der Site war dies auch noch so, was aber zu hoher Last und zu hohem Netzwerkverkehr auf den Systemen geführt hat, so dass eine Lösung implementiert wurde, die die in der Cloud gespeicherten Daten direkt ausliefern kann. Dies hat in diesem Fall aber auch bedeutet, dass nicht die mehr oder weniger aussagekräftigen Dateinamen verwendet werden, sondern die GUIDs.

Beispiel:

https://cloudprovider.host/f5abec578f3e432c820a4f1ce39ad092/4467e9368b79442bbd1a36bad927fdd6.jpg

statt

/globalassets/sample/homepage_hero/im4_herolarge_homepage_1800x900px.jpg

Use the Indirection, Luke

Diese Indirection können wir uns nun für die Integration von Cloudinary zu Nutze machen.

In der Regel speichert man Medien direkt in Cloudinary und kann dann die entsprechenden Derivate vorbereiten oder on Demand mittels Url-Manipulation erzeugen und anfragen.

Die bestehenden Optimizely verwalteten Medien im Ganzen nun zu den Cloudinary Servern zu transferieren, stellte sich als nicht trivial umsetzbar dar.

Allerdings kann Cloudinary auch mit dem Feature ‚Auto upload mapping ‘ genutzt werden. Das bedeutet es werden bestimmten Ordnern Url Prefix als Verweis auf unser Optimizely zugewiesen und der Ordner fungiert dann ähnlich einem Proxy. Sprich wird die angefragte Datei nicht gefunden, wird versucht die Datei im Optimizely zu finden. Dies können wir nun nutzen und statt der kryptischen Cloud-Url nun die Url zu Cloudinary ausliefern.

Beispiel: /globalassets/sample/homepage_hero/im4_herolarge_homepage_1800x900px.jpg

wird zu

https://cloudinary.com/image/upload/proxy_folder/globalassets/sample/homepage_hero/im4_herolarge_homepage_1800x900px.jpg

Zudem können nun implizit Verbesserungen der Performanz erreicht werden, denn nun kann Cloudinary mittel q_auto optimierte Versionen erzeugen, die bei gleicher Dimension kleinere Dateigrößen liefert.

https://cloudinary.com/image/upload/q_auto/proxy_folder/globalassets/sample/homepage_hero/im4_herolarge_homepage_1800x900px.jpg

Man könnte hier stoppen und hat schon einiges erreicht. Man vergibt aber damit die Chance die Bilder weiter zu optimieren. Schon allein nicht das ganze Bild laden zu müssen, wenn nur ein Ausschnitt benötigt wird (der unter Umständen auch noch in kleineren Dimensionen genutzt wird), reduziert Datenmengen und Ladezeiten.

Hier setzt das Konzept der ‚assetTransformationInfo‘ an. Die dortige Asset-URL liefert nur den relativen Pfad zum gewünschten Medium. Die Basis-URL wird global bekannt gemacht und kann dann in den Komponenten entsprechend vorangestellt werden.

Zusätzlich können bei Nutzung von Cloudinary zwischen Basis und relativer URL Transformations-Informationen integriert werden. So kann Skalierung, Zuschnitte, Qualität, Formate und vieles mehr mittels Steuerbefehle in der URL geregelt werden.

Ein Beispiel wäre “c_crop,h_500,w_800”, also der Zuschnitt eines Bildes auf 800 Pixel Breite und 500 Pixel Höhe:

https://cloudinary.com/image/upload/q_auto/c_crop,h_500,w_800/proxy_folder/globalassets/sample/homepage_hero/im4_herolarge_homepage_1800x900px.jpg

Und damit ist natürlich noch nicht das Ende der Fahnenstange erreicht. Über weitere auto-Features von Cloudinary können zum Beispiel die interessanten Bildteile eines Zuschnittes per Algorithmus ermittelt werden, was auch AI basiert möglich ist. Dieser automatische Ansatz kann allerdings bisher leider nicht als Allheilmittel im Optimizely-Kontext genutzt werden. Dessen Vor- und Nachteile zu beleuchten ist einen weiteren Artikel wert.

Interessiert?
Wir freuen uns über Dein Feedback!
Michael Wolf
Head of Technology
On this page