Bilder in der Desktopansicht scharf - Bilder in der Mobileansicht nicht scharf

Deutsch Diskussion Technische Fragen & Antworten
1

Guten Tag,

ich habe folgendes Problem:
Meine Bilder werden auf dem Laptop und Monitor scharf angezeigt, aber auf dem Smartphone sind sie merkwürdigerweise unscharf, mit Ausnahme der Produktbilder. Ich nutze das Theme “Dawn”

Ich habe bereits mehrere Tipps und Tricks ausprobiert, jedoch ohne Erfolg. Mein Problem konnte ich auch nicht im Forum finden.

Hier sind die Beiträge, die ich überprüft habe:

  1. https://community.shopify.com/topic/1751080

  2. https://community.shopify.com/post/1543748

Außerdem habe ich auch die empfohlenen Formate ausprobiert, jedoch ohne Erfolg
https://tiny-img.com/blog/shopify-theme-image-sizes/

Es scheint, dass dies ein bekanntes Problem ist, bei dem der Algorithmus der Themes unerwünschte Entscheidungen trifft.

Wie gesagt, auf dem Laptop/Monitor sieht alles gut aus, aber in der mobilen Ansicht nicht. Hier ist der Link zum Shop: https://formulize.myshopify.com/

Ich verstehe nicht, was der Algorithmus genau benötigt. Gibt es irgendwo konkret Informationen dazu?
Wie kann ich das Problem gezielt lösen?

Vielen Dank im Voraus für die Hilfe!

Hier folgen Screenshots im Direktvergleich. Klickt besser auf die Bilder, dann erkennt man den Unterschied.
In der Preview sind nämlich beide Bilder nicht scharf

Scharf

Desktop 1 Bsp.png
Desktop 1 Bsp.png3266×1068 255 KB

Nicht scharf

Mobile 1 Bsp.PNG
Mobile 1 Bsp.PNG750×1334 88 KB

*Edit: Ich hatte den Beitrag noch entdeckt
https://community.shopify.com/topic/1469175

Ich versuche noch etwas im Code anzupassen und teste das Ergebnis

2

Hey @christianfrmlz

Danke für die Infos aber dein Shop ist passwortgeschützt. Wie dem auch sei, an erster Stelle, bevor du im Code bastelst, haben einige Merchants das Bild Qualitätsproblem ganz schnell mit der Pixc App gelöst (Free-plan available).

Das Problem unscharfer Bilder auf Mobilgeräten in Shopify-Shops kann verschiedene Ursachen haben und hängt oft mit der Bildgröße, der Auflösung und dem verwendeten Theme zusammen.

Wie du wahrscheinlich gelesen hast ist es auch wichtig, Bilder in hoher Auflösung und Qualität zu verwenden. Für das Dawn Theme und andere Shopify 2.0 Themes wird beispielsweise eine Größe von 2048 x 2048 Pixeln empfohlen. Zu kleine Bilder können unscharf wirken, wenn sie vergrößert werden, während zu große Bilder von Shopify verkleinert werden können, was ebenfalls zu Qualitätseinbußen führen kann​​​​.

Beim Hochladen von Bildern in deinen Shopify-Shop sollten diese optimiert sein. Die Bildgröße sollte reduziert werden, ohne die Qualität zu beeinträchtigen. Tools wie TinyPNG oder Photoshop können dabei auch helfen. Es ist auch ratsam, sich auf einen einheitlichen Hintergrund festzulegen und die Produkte auf den Bildern immer freizustellen und mittig in einheitlichen Größen zu platzieren​​. Das richtige Bildverhältnis ist entscheidend für eine korrekte Darstellung der Bilder in deinem Shop. Für das Dawn Theme wird beispielsweise ein Bildverhältnis von 4:3 empfohlen, generell werden jedoch quadratische Bilder bevorzugt​​.

Manche Themes haben auch unterschiedliche Anforderungen an die Bildgrößen und -verhältnisse für Desktop- und Mobilgeräte. In solchen Fällen kann es sinnvoll sein, separate Hintergrundbilder für Desktop und Mobile zu verwenden. Dies erfordert jedoch möglicherweise Coding-Kenntnisse und Anpassungen im Theme-Code​​.

Zusammenfassend ist es wichtig, die Bilder für deinen Shopify-Shop sorgfältig auszuwählen und zu optimieren, um eine hohe Bildqualität auf allen Geräten zu gewährleisten. Wenn du weiterhin Probleme hast, könnte es hilfreich sein, einen Shopify-Experten wie storeinspector.io zu konsultieren, der dir bei der spezifischen Anpassung deines Themes helfen kann.

Habt ihr auch den Shop auf die Weihnachtssaison umgestellt? Jetzt ist die Zeit wo Online Shopper nach :wrapped_gift: :eyes: !

giphy

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.

3

Hey @Gabe ,

erstmal vielen Dank für die schnelle und ausführliche Antwort mit den ganzen Lösungsvorschlägen!

Das war mein Fehler mit der passwortgeschützten Seite.
Jetzt kannst du gerne auf die Seite zugreifen und evtl nachvollziehen, wo das Problem liegen könnte.

Die Pixc App habe ich sofort ausprobiert, jedoch hat sie nicht die Bilder optimiert, die von der Unschärfe betroffen sind.

für Desktop- und Mobilgeräte schaue ich mir gerade genauer an

4

@christianfrmlz

Super und dazu habe ich jetzt einen kurzen Video gemacht hier.

Hoffe das hilft dir weiter! :wink:

5

Danke für deine hilfreichen Tipps und dein Feedback :raising_hands:t2:

6

Absolut gerne! Und schönes W-Ende! :wink:

7

Moin Gabe,

ich habe deine Tipps und Feedback aus dem Video versucht umzusetzen.

Mittlerweile nutze ich ein anderes Theme, das besser zu den Produkten passt.
Aktuell arbeite ich an der visuellen Gestaltung, damit der Kunde das Produkt “schmeckt.”

Bist du so lieb und könntest du mir bitte zum aktuellen Look der Seite Feedback geben, wenn du Zeit hast?

Besten Dank!

8

@christianfrmlz

Tolles neues Shop und Theme! Siehe meinen Video dazu hier.

Das Shop würde ich noch etwas passwortgeschützt lassen und klicke mal vielleicht durch diese Demos, um weitere Ideen zu bekommen für euer Shop.

9

Super, vielen Dank! :slightly_smiling_face:

10

Absolut gerne! :wink: