Unscharfe Bilder in meiner Shopify-Kollektion

[zmadad]

Hallo liebe Entwickler-Community,

ich brauche dringend eure Hilfe, denn ich habe ein Problem mit meinem Shopify-Shop und finde einfach keine Lösung. Ich hoffe, dass jemand von euch schon mal vor einer ähnlichen Herausforderung stand und mir weiterhelfen kann.

Das Problem: Unscharfe Bilder in meiner Kollektion

Ich habe hochauflösende Bilder (3456 × 4608 Pixel) in meinem Shopify-Shop hochgeladen, aber sie werden auf der Kollektionen-Seite unscharf angezeigt, wenn ich nur wenige Spalten verwende (z. B. 2 oder 3). Interessanterweise sehen die Bilder scharf aus, wenn ich mehrere Spalten einstelle, was natürlich die Bildgröße verkleinert. Doch bei größeren Darstellungen wirkt die Bildqualität schlecht.

Mein Setup:

• Shopify-Theme: Dawn Theme
• Bildgröße: Hochauflösend (3456 × 4608 Pixel)
• 

[Ben310]

Wo soll da Unschärfe sein? Hast du konkrete Beispiele so dass wir deinen Browser oder etwas lokales auf deinem Computer ausschließen können?

Siehe auch die "Empfehlungen" unterhalb dieses Posts für weitere Tipps zum Thema Unschärfe!

[Nordalux]

Shopify wandelt die Bilder in webp um. Das heißt, die werden nochmals komprimiert. Auch hier spielt Lazyloading etwas mit, da die zuerst in den Cache geladen werden. Im Code auf "eager" umschreiben. Zudem rendert Dawn die Bilder nochmals runter, um bestmögliche Ladezeiten hinzubekommen.

[zmadad]

Hi Nordalux, ich habe in einem anderem forum Beitrag wo das gleiche Problem beschrieben wird gelesen, dass eine Zeilen eines Codes gelöscht werden müssen, damit die Seite mit scharfen Bildern lädt. Ich kenne mich nicht esonders gut mit dem Coden aus, könntest du mir bitte sagen, welche Zeilen aus welchem Code ich löschen muss, damit bei mir auch alles scharf angezeigt wird?

Falls du noch irgendwas benötigst schreib mir gern.

Liebe Grüße Adam

[Nordalux]

Hallo Adam,

nachdem ich die letzten Tage mir das nochmals angeschaut habe, ist ein einfaches umstellen auf "eager" nicht mögich. Das Problem liegt woanders begraben: Die dynamische Umstellung der Bilder auf die im Code hinterlegte größe. Dadurch kommt die Unschärfe. Es ist toll, dass Shopify hier Datenminimiert ansetzt. Dennoch ist es ärgerlich, dass diese nicht direkt scharf angezeigt wird.

Um das zu ändern müsste man im Code vieles ändern. Das ist der Stand der Dinge auf Version 15.2.0.