Bilder erscheinen Dunkel und unvollständig auf meiner Shopseite

Hallo,

meine von mir hochgeladene Bilder werden nicht richtig angezeigt. Sie sind zum Teil auch sehr unerleserlich und falsch dargestellt und somit nicht brauchbar. Ich habe auf alles geachtet, Bilddatei, Bildgröße, Bildauflösung usw. Was nun?

Hey @FlavioCosta

Danke für die Bilder und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren denn ggf. sieht das anders auf meinem Monitor aus als auf deinem.

Weitere generelle Tipps dazu:

Wenn deine hochgeladenen Bilder nicht richtig angezeigt werden und unleserlich oder falsch dargestellt sind, gibt es mehrere mögliche Ursachen und Lösungen, die du in Betracht ziehen kannst:

  • Überprüfung der Bildquelle: Stelle sicher, dass der Quellcode das richtige Bild angibt und der Dateipfad korrekt ist. Es ist auch wichtig zu überprüfen, ob das Bild tatsächlich existiert und ob die Bildquelle nicht von einem Sicherheitsprotokoll blockiert wird, insbesondere wenn deine Website HTTPS verwendet​​.
  • Probleme mit dem HTML-Code: Überprüfe den HTML-Code auf korrekte Verwendung des -Tags sowie das Vorhandensein aller erforderlichen Attribute wie src und alt. Achte auch darauf, dass das Tag korrekt geschlossen ist​​.
  • Browserprobleme: Manchmal können Browserprobleme die Anzeige von Bildern beeinflussen. Stelle sicher, dass dein Browser auf dem neuesten Stand ist und dass alle Funktionen zur Anzeige von Bildern aktiviert sind. Versuche auch, den Browsercache zu löschen oder den Browser im abgesicherten Modus zu starten​​.
  • Löschen von Cache und Cookies: Insbesondere bei Google Chrome kann das Löschen von Cache und Cookies helfen, bestimmte Probleme zu beheben, die die Anzeige von Bildern und Grafiken verhindern​​.
  • Überprüfung der Internetverbindung: Eine instabile oder langsame Verbindung kann ebenfalls dazu führen, dass Bilder und Grafiken nicht vollständig geladen werden. Überprüfe deine Internetverbindung, indem du andere Websites besuchst oder einen Geschwindigkeitstest durchführst​​.
  • Zurücksetzen von Google Chrome: Wenn alle anderen Schritte nicht helfen, könnte ein Zurücksetzen von Google Chrome die Lösung sein, um alle Einstellungen auf ihre ursprünglichen Werte zurückzusetzen und eventuell schädliche Erweiterungen zu entfernen​​.

Hier weitere Ergebnisse meiner Recherche wie z. B. in einem unserer Developer Blogs zum Thema wie Bilder im Shopify Storefront gerendert werden:

Shopify optimiert die Darstellung von Bildern im Storefront durch eine Kombination aus Server-seitiger Rendering-Optimierung, effizientem Datenabruf, und einem mehrschichtigen Caching-Ansatz. Zum Beispiel verwendet Shopify ein Buchführungs- und Eager-Loading-Verfahren, um erforderliche Daten wie Bilder, Produktvarianten und Inventarinformationen effizient zu laden, wenn eine Produktseite angefragt wird. Dies geschieht durch das Speichern einer Liste von Datenbankabfragen, die während des ersten Ladens einer Seite durchgeführt wurden, in einem Schlüssel-Wert-Speicher für späteren Gebrauch. Bei nachfolgenden Anfragen für dieselbe Seite führt das Rendering-System diese Abfragen dann gleich zu Beginn durch, da es davon ausgeht, dass diese Daten wieder benötigt werden​​.

Shopify implementiert auch mehrere Caching-Ebenen, um Antwortzeiten zu beschleunigen. Dazu gehört ein In-Memory-Cache, der als globaler Hash fungiert und über Anfragen hinweg innerhalb jedes Web-Workers geteilt wird, sowie ein Node-lokaler Redis-Store, der über alle Server-Worker auf demselben Node geteilt wird. Darüber hinaus speichert Shopify die endgültige Ausgabe einer erfolgreich gerenderten Storefront-Anfrage (meistens ein HTML- oder JSON-String) im lokalen Redis für spätere Abrufe. Dies ermöglicht es, Storefront-Antworten nicht erneut generieren zu müssen, wenn sie durch den gleichen Cache-Schlüssel abgerufen werden können. Zusätzlich wird die Ergebnisse von Datenbankabfragen in Redis zwischengespeichert, sobald sie von MySQL zurückkommen, um sie bei nachfolgenden Anfragen basierend auf denselben Abfragen und Parametern schneller abrufen zu können​​.

Wenn du trotz dieser Schritte weiterhin Probleme hast, könnte es hilfreich sein, professionelle Unterstützung eines unserer zertifizierten Entwickler wie storeinspector.io in Anspruch zu nehmen oder auf einen anderen Browser umzusteigen, um zu sehen, ob das Problem browser-spezifisch ist.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:


Habt ihr auch den Shop auf den Valentinstag ? umgestellt? Jetzt ist die Zeit wo Online Shopper nach :wrapped_gift: für ihre :heart: :eyes: !

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. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Hallo und vielen Dank für diese ausführliche Antwort. Alles ausprobiert
Ende Lage es daran das die Produkbilder die ich über Canva erstellt habe,
beim Speichern mit transparentem Hintergrund gespeichert habe.
Danke und freundliche Grüße

Super danke für die Aufklärung! :wink: