Bilddateien mehrfach nutzen, Redundante Bild-Dateien vermeiden

[BJulity]

Hallo,

ich habe Produktbilder, welche bei mehreren Produkten hinterlegt werden müssen. Wie es aussieht ist dies jedoch nicht möglich. Ich habe im Artikel nur die Möglichkeit neue Artikel hochzuladen oder einen Link zu hinterlegen, von wo sich das Bild dann herunter geladen wird. Egal welche Option ich wähle, das Bild wird immer und immer wieder erneut angelegt und ist somit ein eigenständiges Bild. Habe ich also 10 Artikel welche alle ein bestimmtes Bild haben, wird das Bild 10 mal als Datei angelegt und muss später auch 10 mal auf dem Endgerät heruntergeladen werden.

Ideal wäre es jedoch um redundante Daten bzw. Doubletten zu vermeiden, wenn man ein bereits hochgeladenes Bild bei Bedarf erneut nutzen kann. Das verbessert zum Beispiel auch den Download, weil das Bild nur einmal herunter geladen werden muss.

Gibt es hier eine Lösung?

[Gabe]

Hey @BJulity 

Danke für die Beschreibung aber es ist leider schwer nachzuvollziehen was du genau meinst oder was das Problem ist. Ist es vielleicht ein Browser-Problem? Arbeitest du auf dem Safari Browser (es wurden aehnliche Probleme mit dem Safari Browser berichtet)? Sind die Ladezeiten diesbzgl. betroffen? Wie genau werden deine Ladezeiten diesbzgl. beeinflusst?

Oder lädst du ein Produktbild zum Dateienbereich hoch und verwendest die CDN URL die im Dateienbereich generiert wird?

Shopify hat standardmäßig keine direkte Möglichkeit, ein bereits hochgeladenes Produktbild für mehrere Produkte zu verwenden, ohne es erneut hochzuladen. Dies kann, wie du es bereits erwähnt hast, zu redundanten Daten und unnötigem Speicherplatzverbrauch führen, aber da Shopify eins der schnellsten SaaS Plattforms der Welt ist, und mit den schnellsten CDNs wie Fastly und Cloudflare, sowie Server Provider wie AWS und Google Servers arbeitet, ist der Unterschied minimal. Ich müsste somit genauer sehen können, ob deine Ladezeiten davon betroffen sind und am besten einen Health Check deines Shops durchführen, falls es doch davon betroffen ist. Du kannst gerne einen befristeten Vorschaulink zu einem Beispiel hier posten, so dass ich das schneller analysieren kann.

Wenn du das Bild bereits für ein Produkt hochgeladen hast, dann, wie oben abgebildet, die direkte URL des Bildes verwenden und diese URL als "Aus URL hinzufügen" für alle anderen Produkte verwenden. Dies sollte verhindern, dass das Bild mehrmals gespeichert wird.

---
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[BJulity]

Hallo Gabe,

danke für deine Antwort. Ein Problem liegt aktuell nicht vor. Technisch gesehen ist eine redundante Datenhaltung jedoch suboptimal, speziel wenn das ein und das selbe Bild mehrfach heruntergeladen werden muss. Neben einem erhöhten Trafik und Speicherplatzbedarf verursacht es natürlich auch noch zusätzlichen Aufwand. Dies wollte ich verhindern, daher meine Anfrage ob es hier evtl. eine Möglichkeit gibt die ich bisher noch nicht kenne.

Als Webdesigner kenne ich es bisher so, das die Bilder in einem Verzeichnis abgelegt werden und dann jeweils nur verlinkt werden. Somit kann man ein Bild z.b. bei hunderten Artikel hinterlegne und muss es nur einmal ablegen und auch nur einmal einen alternative Beschreibung hinufügen (spart nicht nur speicherplatz sondern auch jede menge Arbeit).

Ich habe diese beiden Bilder initial jeweils hochgeladen und danach über die URL bei den Artikeln hinterlegt, dennoch wird das Bild vielfach als Datei abgelegt.

Nach über 15 Jahren in der IT habe ich gelernt "redundante Daten" = "nicht schön!" 🙂

Aber wenn es hier keine andere Möglichkeint gib, dann lässt sich das auch nicht ändern.

Grüße

Michael

[Gabe]

@BJulity 

• Habe ich also 10 Artikel welche alle ein bestimmtes Bild haben, wird das Bild 10 mal als Datei angelegt und muss später auch 10 mal auf dem Endgerät heruntergeladen werden.

Gut, nun habe ich das etwas recherchiert und in der Tat, ist das eine neue Funktion die von unseren Entwickler hinzugefügt wurde (siehe unseren Changelog dazu hier und unser Help Doc dazu hier), wie z.B. die Möglichkeit, ein Bild zu mehreren Produkten hinzuzufügen, jede Child-Instanz des Bildes aber eine eigene eindeutige UUID und URL Handle bekommt obwohl sie alle vom selben Parent-Bild stammen. Es ist derzeit in der Entwicklung und wird noch von unseren Entwickler optimiert.

Klappentext: Vereinheitlichte Mediathek-Pools
Wir haben die Dateien für Inhalte/Dateien und Produkte vereinheitlicht! Das bedeutet, dass die Produktmedien jetzt im Abschnitt "Dateien" innerhalb des Inhalts in der Verwaltung verfügbar sind. Dies ist ein großer Schritt in Richtung Zentralisierung der Medien in Shopify. Außerdem führen wir einige neue Funktionen ein, die das einheitliche Dateimanagement erleichtern. Zunächst fügen wir eine neue Used-In-Spalte im Bereich Inhalte/Dateien hinzu, in der du sehen kannst, ob eine Datei in Shopify verwendet wird. Dazu gehören Dateien in Metaobjekten, Produkten und Markeneinstellungen. Außerdem haben wir einen entsprechenden "used_in"-Filter hinzugefügt, um die von Produkten verwendeten Dateien leichter zu finden. Und schließlich führen wir im Editor des Onlineshops einen neuen Datei-Selektor ein. Mit diesem neuen Modal können Händler/innen Ansichten speichern, im Selektor selbst filtern und ganz einfach zwischen verschiedenen Medientypen wechseln.

Somit erstellt jedes Bild, das entweder zum Abschnitt Dateien oder zu einem Produkt hinzugefügt wurde und denselben Namen wie eine bereits vorhandene Datei hatte, eine doppelte Datei, an die eine UUID (z. B. 8c396b8d-b4ee-4edf-a7bc-0ead8cb9820e) angehängt wird (dies hat sich nicht geändert). Wir fügen immer eine UUID hinzu, wenn es bereits eine andere Datei mit demselben Namen gibt.

Es passiert z. B. wenn man Produktbilder zu den Produkten hinzuzufügen über die API direkt zum Abschnitt "Dateien" in der Verwaltung und dann die URLs dieser Dateien verwendet, um sie beispielsweise wie gewohnt auf die Produktseite hochlädt. Wenn eine Shopinhaber ein Bild mit demselben Namen zu mehreren Produkten hinzufügt, wird derzeit für jede dieser Dateien eine "doppelte" Datei im Abschnitt "Dateien" erstellt, die jeweils mit einer eindeutigen UUID versehen ist. Wir arbeiten aber derzeit an zukünftigen Entwicklungen, die es ermöglichen, dieselbe Datei an mehrere Produkte anzuhängen (ohne Duplikate zu erstellen), um die Verwaltung zu erleichtern. Jede neu hinzugefügte Datei (egal, ob über die Datei-API, im Bereich Dateien oder direkt im Produkt) hat jetzt einen /Dateien Pfad. Nur alte (vor dieser Entwicklung erstellte) Bilder, die direkt zu Produkten hinzugefügt werden, haben weiterhin den /Produkte Pfad.

Außerdem empfehlen wir doch nicht, eine Datei in den Bereich Dateien hochzuladen und dann die URL für diese Datei (z. B. https://cdn.shopify.com/s/files/1/0053/3043/6152/files/jpegtest_8c396b8d-b4ee-4edf-a7bc-0ead8cb9820e...) als URL zu verwenden, um sie zu Produkten hinzuzufügen. Der Grund dafür ist, dass diese URLs für die Endnutzer/innen bzw. Käufer/innen bestimmt und daher sehr effizient komprimiert sind. Wenn diese URLs als Quelle für das Hochladen von Produktbildern verwendet werden, wird das neue Produktbild doppelt komprimiert, was sich negativ auf die Bildqualität auswirkt.

Wenn sich also die Bilder duplizieren, sobald du sie über die URL hinzufügst, ist dies eine eingebaute Funktion von Shopify, die automatisch die UUID und URL-Handle an das Ende des Bilddateinamens anhängt, um Konflikte mit den bestehenden Dateien zu vermeiden, was du aber nicht möchtest, da es sich um dieselben Bilder handelt, die du für deine Produkte verwendest.

Workarounds

Man kann natürlich einen externen Bildhosting-Dienst wie Imgur, Dropbox oder Google Drive nutzen, um die Bilder zu hosten. Sobald du deine Bilder dort hochgeladen hast, kannst du die direkte URL des Bildes in Shopify verwenden. Auf diese Weise wird der Bildname nicht von Shopify geändert.

Ein weiterer Workaround der für Läden funktioniert, bei denen das Problem in den Listings auftritt, auch wenn nicht ideal für Bulk Listings wäre folgendes:

• Dupliziere das betreffende Angebot zunächst als Entwurf, wobei die Bilder aktiviert sind.
• Lade die gewünschten Bilder aus dem duplizierten Angebot herunter.
• Lösche alle Bilder aus dem ursprünglichen Angebot.
• Füge die heruntergeladenen Bilder zum ursprünglichen Angebot hinzu.
• Dupliziertes Angebot löschen.

Aber dein Ansatz und Bedenken kann voll verstehen aber da Shopify ja kein gewöhnlicher Webseiten Hosting Provider ist, so wie du, als Webdesigner und IT-Profi, es gewohnt bist und versch. Platforms wahrscheinlich gut kennst, ist dennoch dein beschriebenes Problem nicht so ganz auf Shopify anwendbar wie auf andere Storage Space Hosting Provider die Traditionell Server Space anbieten. Die UUIDs und URL Handles die deine Bilder haben diesen dazu, dasselbe Bild mehr als einmal im Produkteditor oder über die API zu referenzieren, und damit wird eine Kopie mit einem eindeutigen Dateinamen erstellt (eine lange UUIDV4-Hexadezimalzeichenkette wird an den Dateinamen angehängt). Wenn das gleiche Bild für 50 Produkte verwendet wird, bedeutet das, dass 49 Kopien für jedes Produkt erstellt und gespeichert werden was ja der Sicherheit der Bilder dient falls die original Datei gelöscht wird. Die Performance der Shopify SaaS Plattform wird hier, wie gesagt, minimal negative beeinflusst, wie man es normalerweise erwarten würde wenn man das traditionelle eigen-hosting macht.

 Es kann auch dazu führen, dass der Kunde das Bild mehrmals herunterlädt, denn der eindeutige Dateiname verhindert, dass der Browser erkennt, dass genau das gleiche Bild bereits von einem anderen Produkt zwischengespeichert wurde, aber hier werden die Page Loading Speeds von Shopify Shops auch minimal beeinflusst. Ich kann, wie gesagt, gerne einen Health Check eures Shopify Shops durchführen, um zu schauen on der Shop davon negativ beinflusst wird.

Hast du die Bilder von einer anderen Plattform mit einer Migrations-App importiert oder von deinen Suppliers direkt importiert? Wenn ja, kann dies etwas damit zu tun haben dass viele der Bilder redundant sind da Shopify eine andere URL für Bilder erstellt, je nachdem, mit was sie verknüpft sind. Beispiel: Anstelle von http://cdn.shopify.com/s/files/0/0000/0000/0000/files/something.png Dateien, die mit Produkten verknüpft sind, wirde http://cdn.shopify.com/s/files/0/0000/0000/0000/products/something.png verwendet. 

• Technisch gesehen ist eine redundante Datenhaltung jedoch suboptimal, speziell wenn das ein und das selbe Bild mehrfach heruntergeladen werden muss.

Somit ist es möglich, in diesem Satz, dass die genaue Technologie die hinter der Shopify SaaS steckt nicht ganz korrekt verstanden wird. Shopify arbeitet nicht mit dem traditionellen "speicherplatz" wie man es gewohnt ist. Es arbeitet mit High-Performing Server Farms auf AWS und Google Servers, sowie mit den Cloudflare und Fastly CDN Networks die alle best-of-breed sind.

Konnte man ggf. eure Arbeitsweise nochmal 👁️  und ggf. schauen ob eine andere Methodologie mit euren vielen Bilder effizienter wäre? Beispielsweise erlaubt es Shopify, dass hochgeladene Fotos nicht größer als 20 Megapixel oder 20 Megabyte sein dürfen. Shopify komprimiert deine Bilder nach dem Hochladen automatisch, um die Ladegeschwindigkeit deiner Website zu optimieren und gleichzeitig die Bildqualität zu erhalten. Responsive Bilder ändern somit ihre Auflösung je nach Bildschirmgröße, um die Geschwindigkeit deines Shops und das SEO-Ranking zu optimieren. Shopify ist in dieser Hinsicht best-of-breed und das sage ich als jahrelanger User der Plattform und auch technischer Moderator der deutschen Shopify Community.

Es kann auch sein dass deine Arbeit andere Anforderungen hat als die die Shopify anbietet, und du somit in Erwägung ziehen müsstest , eine andere E-Commerce-Plattform mit eigenem Hosting wie Onyx zu verwenden, die flexiblere Optionen für die Verwaltung von Medien und Ressourcen bietet. Dies könnte jedoch andere Nachteile mit sich bringen.

Da Shopify einige Backend API Ressourcen anbietet und du ja viele Jahre Erfahrung in der IT-Branche hast, wäre das folgende auch ggf. für dich interessant. Du kannst auch einen "headless" custom storefront bauen der Top Speeds garantiert, mit unserem Storefront API. Unser Hydrogen React Framework ist beispielsweise ein unopinionated, performant Framework-unabhängige Library mit React-Komponenten, wiederverwendbaren Funktionen und Dienstprogrammen für die Interaktion mit der Storefront-API von Shopify. Sie ist im Lieferumfang von Hydrogen enthalten, kann aber von jeder React-basierten Web-App verwendet werden. Hydrogen wurde speziell für Shopify entwickelt und optimiert, um ein schnelles und reaktives Einkaufserlebnis zu bieten.

Du könntest auch ein automatisiertes System zur Handhabung von Bildern über die Shopify API erstellen, es erfordert aber technische Kenntnisse und ein gutes Verständnis für die Entwicklung von Web Apps. Dafür benötigst du einen API-Zugriff auf deinen Shop. Dazu müssen Sie im Shopify Admin-Dashboard eine neue App erstellen und API-Berechtigungen erhalten.

Du brauchst dafür ein Entwicklungswerkzeug, z.B. die GraphiQL app, curl (oder dein bevorzugten HTTP Client) oder eventuell Postman oder ein ähnliches Tool, um API-Requests zu testen.

Entwickele dann eine App, die zuerst prüft, ob das Bild bereits im Shopify-Medienspeicher vorhanden ist. Du könntest dies über einen eindeutigen Bildnamen oder über einen Hash des Bildinhalts tun. Wenn das Bild bereits existiert, hole die URL dieses Bildes. Sobald du die URL des Bildes hast (entweder weil es bereits vorhanden war oder weil du es neu hochgeladen hast), die Shopify API verwenden, um dieses Bild mit den gewünschten Produkten zu verknüpfen.