Wir leben im Zeitalter der visuellen Kommunikation. Wir alle sind es gewohnt, in endlosen Listen von Inhalten zu blättern, die um unsere Aufmerksamkeit buhlen. Bilder und Videos haben einen großen Einfluss auf unsere Emotionen und Wahrnehmungen und können den ausschlaggebenden Unterschied machen, ob Kunden unsere Produkte, Dienstleistungen... oder die anderer Marken kaufen.
Dennoch ist die Integration von Bildern in ein CMS oder eine E-Commerce-Plattform ein ziemlich großer Aufwand und widersetzte sich bisher all den technologischen Verbesserungen, die andere Lösungen durchlaufen haben. In einem klassischen Szenario werden Bilder wie folgt behandelt:
- Sie werden in hoher Auflösung erstellt und irgendwo mit einer beliebigen Namenskonvention gespeichert. Diese Konventionen werden komplizierter, wenn wir mehr Ansichten für das gleiche Produkt verwalten oder sogar auf 360° gehen. Die großen Dateien müssen dann als Ganzes verarbeitet und je nach Design auf verschiedene Größen angepasst werden: Produktliste, Miniaturansicht, Produktdetails usw. Für mehr Transparenz wäre eigentlich auch eine Freistellung nötig
- Noch mehr Bilder müssen generiert werden, wenn Sie ein responsives Design haben. Hier haben Sie die Wahl zwischen komplexer Bulk Operation im Hintergrund oder Last auf dem Frontend. Wenn Sie die Bildverarbeitung automatisieren wollen, müssen Sie Kompromisse eingehen:
- Wählen Sie einen "durchschnittlichen" Komprimierungsfaktor, um Artefakte zu vermeiden, aber die Bildgröße beizubehalten.
- Wählen Sie ein Format, das für alle Browser geeignet ist. Verzichten Sie dabei auf Standards, verwenden Sie stattdessen wenige, aber spezielle Optionen.
- Legen Sie für unterschiedliche Bildformate feste Zuschnitte fest, in der Hoffnung, dass die Hauptinformation abgebildet bleibt.
- Wenn Sie gute Ergebnisse auf Mobiltelefonen erzielen wollen, liegen alle Bilder in zwei Auflösungen vor: „normal“ und „Retina“, was zu Komplikationen bei der Anzahl der zu verarbeitenden Dateien und der Dateinamenskonvention führt.
- Alle diese Dateien müssen in Ihr E-Commerce-System übertragen werden, wahrscheinlich mit einer dateibasierten Integration wie sftp / rsync. Die Produkte müssen mit den Links zu den Bildern aktualisiert werden, per Batch-Job oder ähnlichem. Alternativ zum „Hardcoding“ können Sie die gleichen Namensregeln, die bei der Erstellung der Dateien angewendet wurden, auch in der Commerce-Lösung verwenden.
- Wenn ein Bild, das mit einem Produkt verknüpft ist, irgendwie beschädigt ist (vielleicht wegen eines Problems im obigen Prozess oder wegen eines Fehlers bei der Dateiübertragung), gibt es keine Möglichkeit, das mit einem Logging-Bericht zu verifizieren oder ein „Standard“-Bild anzuzeigen, wenn Sie nicht einen sehr zeitaufwändigen Zugriff auf das Dateisystem in Ihrem Code zulassen.
- Im Frontend müssen neue komplizierte Regeln implementiert werden, um zu entscheiden, ob eine normale oder Retina-Version des Bildes oder dessen Format (Rechteck auf dem Desktop und Quadrat auf einem mobilen Gerät) angezeigt werden soll.
- Weitere Logik muss in den Vorlagen fest programmiert werden, um „Stempel" wie „Angebot!" oder „Neu!" hinzuzufügen. Das wird in der Regel mit Batch-Jobs umgesetzt. Die Größe des Pagecaches steigt exponentiell an für jede Kombination von Page/URL und möglichem Bildformat. Wenn Sie on premises laufen, wird ein großer Teil Ihrer Bandbreite von der Bildübertragung aufgebraucht werden.
Vielleicht haben Sie ja aber auch Glück und Sie sind einer dieser Ausnahmen, für die all diese Prozesse einfach umzusetzen sind. Vielleicht haben Sie auch eine geniale IT oder einen ebensolchen Implementierungspartner. In jedem Fall sind diese Themen „beweglich“, und damit anfällig für Fehler und Ausfälle.
Möchten Sie Videos einbetten? Denken Sie an alle Konvertierungs- und Infrastrukturprobleme und multiplizieren Sie sie mit dem Zehnfachen.
Alternativ können Sie aber auch ein Digital Asset Management (DAM) Tool verwenden.
Einer unserer Technologiepartner hier bei Intershop ist Cloudinary, eine Cloud-basierte Lösung für Bild- und Video-Management und Digital Asset Management . Sie nutzt KI-basierte Technologien, um traditionelle Probleme bei der Medienverwaltung zu beseitigen, so dass sich Marken darauf konzentrieren können, optimale digitale Erlebnisse schneller zu liefern, unabhängig davon, wo ihre Kunden tätig sind.
Worum geht es dabei?
Kurz gesagt, Ihre hochauflösenden Bilder oder Videos werden direkt in die Cloud-basierte Lösung hochgeladen. Das passiert entweder über das native Webinterface oder durch die Integration von Web-Widgets in jede von Ihnen verwendete Software. Und dann.... nun, das war‘s!
Die Probleme mit Bandbreite, Cache oder Festplattenspeicher sind gelöst, da alles über Cloudinary abgewickelt wird.
Das Asset kann mit einer ID (z. B. der SKU) versehen werden: Das einzige, was das Frontend tun muss, ist, auf eine URL zu verlinken, die diesen ID-Tag enthält, und auf ein Kürzel des Kontextes, in dem das Bild verwendet wird, d. h. „productDetail“, „thumbnail“, etc.
Cloudinary liefert das Bild automatisch in der optimalen Größe und dem optimalen Format des verwendeten Endgeräts, wodurch Qualität und Ladezeit erhalten bleiben.
Möchten Sie wissen, wie viel Bandbreite eingespart wird? Sie können Ihre Website unter https://webspeedtest.cloudinary.com testen, in der Regel sind es mehr als 50%.
Die Assets können auch „on the fly" manipuliert werden: Cloudinary kann dem Bild Wasserzeichen hinzufügen, d. h. „JETZT REDUZIERT!“, „Neu“ und andere Stempel.
Diese Wasserzeichen können Variablen enthalten, so dass Stempel wie „Spare 25€“ oder sogar „Nur für Dich, Mauro“ möglich sind. Natürlich angepasst an das Format des von Ihnen angezeigten Bildes. Dies ist mit der manuellen Bildproduktion nicht möglich.
Doch das war nur das Offensichtliche: Cloudinary verwendet fortschrittliche KI-Algorithmen, um Funktionen bereitzustellen, die vor fünf Jahren noch Science Fiction waren! Hier sind einige Beispiele:
- Die Kompression der Datei ist dynamisch: Ein „einfaches“ Bild oder Video kann mehr als einmal mit vielen Details komprimiert werden, ohne Artefakte zu erzeugen. Cloudinary bestimmt automatisch die optimale Kompressionsstufe.
- Cloudinary kann Assets kennzeichnen, abhängig vom Inhalt sogar automatisch und mit einem hohen Grad an Sicherheit. Nicht nur Objekte können somit erkannt werden, sondern auch die Position und Details von Flächen oder Farbpaletten. Stellen Sie sich vor, wie schnell Sie bei der Suche nach einem Bild für eine Kampagne mit den Parametern „Eine Frau mit einer roten Handtasche“ sein könnten!
- Bilder können auf eine „intelligente“ Weise zugeschnitten werden: Cloudinary versteht, wo der wichtige Inhalt ist. So wird ein rechteckiges Bild mit dem Modell im rechten Bildrand in der quadratischen Version nicht an den Seiten geschnitten, sondern es wird ein quadratisches, auf das Modell zentrierte Bild erzeugt.
- Das Gleiche gilt für Videos. Wenn Sie ein normales 16:9-Video einer gehenden Person haben, kann Cloudinary ein Video im Hochformat an Mobiltelefone ausspielen, in dem die Kamera auch nach dem Zuschneiden der Person folgt.
Ein Tool wie Cloudinary bringt nicht nur technische Vorteile für Ihr Team, sondern ermöglicht auch ein Maß an Personalisierung, Kontextualisierung und Engagement, das dem traditionellen Ansatz weit überlegen ist.
Ehrlich gesagt, würde ich ein DAM verwenden.
