Liquid, JavaScript, Themes
Hallo zusammen,
bei meinem Shop ist direkt auf der Startseite ein Bild-Banner. Dieser wird in klasse Qualität angezeigt, wenn man die Seite per Desktop aufruft. Wenn ich die gleiche Seite mit dem Handy aufrufe, ist die Qualität sehr viel schlechter, in unserem Fall sogar unzumutbar. Wie kann ich (ggf. im Code) einstellen, dass die Bildqualität vom Desktop auch genauso erhalten bleibt, wenn man die Seite mobil aufruft?
Vielen lieben Dank für jegliche Hilfe und beste Grüße 🙂
Hey @Superseven77
Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren. Hast du auch ein Beispiel zu einem Bild dass in schlechter Qualität auf Handy angezeigt wird? Reproduzierung des Problems ist wichtig: wenn es auf einem Handy nicht sehr schön aussieht kann es aber auf einem anderen Handy immer noch gut aussehen und deshalb ist eine Replizierung des Problems von jemand anders sehr wichtig.
Es kann also mehrere Gründe geben, warum das Bannerbild auf Mobilgeräten in schlechter Qualität angezeigt wird. Ein typischer Grund ist wenn die Photos ungleiche Aspekte haben wie z. B. 16:9 (Landscape) oder 1:3 (Handy/Portrait). Ich empfehle auf jeden Fall die quadratischen Produktbilder, da sie ein besseres Gleichgewicht zwischen der Bildqualität und der Ladegeschwindigkeit der Website erlauben.
Und hast du das auf Android und iPhone sowie auf versch. Handy Browser getestet? Es ist ja im Grunde nicht Shopify, sondern dein Theme, das die Bildqualität je nach Gerätegröße anpasst, um die Ladezeit des Shops so kurz wie möglich zu halten. Die Good News: da dass im Theme passiert, kann man den Code bearbeiten, um das besser zu machen, es kann aber negative Nebeneffekte verursachen. Abgesehen davon, dass man einen unserer Experten dafür einstellen muss, der oder die deinen Code bearbeitet und die Produktgrößen für das jeweilige Gerät etwas größer macht. Gerne kann ich welche empfehlen.
Wir haben einen tollen (englischen) Leitfaden mit dem Titel 10 Must-Know Image Optimization Tips. Ich empfehle diesen als Ausgangspunkt, da er auch einige Best Practices sowie häufig verwendete Tools zur Größenänderung deiner Bilder empfiehlt.
Die empfohlenen Dimensionen deiner Bilder
Laut unserer Dokumentation können deine Produkt- und Kollektionsbilder eine beliebige Größe bis zu 4472 x 4472 px oder 20 Megapixel haben. Die Größe hängt von dir ab und i.d.R. gibt es für jedes Theme Empfehlungen für die ideale Mediengröße. Das Dawn-Theme beispielsweise ermöglicht eine gute Flexibilität und ist für verschiedene Größen optimiert. In unserem Artikel DIY Guide to Beautiful Product Photography erfährst du alles, was du über Produktfotos wissen musst, vom Fotografieren bis zum Hochladen.
Hochauflösende Fotos sehen zum Beispiel für deine Kunden besser und professioneller aus, sind aber in der Regel auch größer und schwerer beim Laden und müssen somit komprimiert werden um die Ladezeiten nicht allzu negativ zu beeinflussen. Andererseits bevorzugen manche Händler/innen quadratische Produktbilder, wobei eine Größe von 2048 x 2048 px am besten aussieht.
Hier sind weitere Schritte, die du ausprobieren kannst:
---
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.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024