FROM CACHE - de_header

Bildauflösung bei mobiler Ansicht individuell einstellen

Bildauflösung bei mobiler Ansicht individuell einstellen

Superseven77
Besucher
1 0 0

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 🙂

1 ANTWORT 1

Gabe
Shopify Staff
18263 2869 4234

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:

  • Responsive Images: Shopify verwendet responsive UI, um unterschiedliche Bildgrößen für verschiedene Gerätetypen zu liefern. Das hilft, die Ladezeiten zu verkürzen, kann aber dazu führen, dass das Bild auf Mobilgeräten in geringerer Qualität angezeigt werden kann. Du könntest prüfen, ob es eine Möglichkeit gibt, die Qualität dieser kleineren Bilder zu erhöhen.
  • CSS- oder HTML-Code: Es könnte ein Problem mit dem CSS- oder HTML-Code geben, durch das das Bild gestaucht, gestreckt oder anderweitig verändert wird, wodurch die Qualität beeinträchtigt wird.
  • Schau in deine CSS- und Liquid-Dateien, um zu sehen, wie das Bild gestaltet wird, besonders in den Media Queries für Mobilgeräte.
  • Bildformat und -größe: Stelle sicher, dass du ein hochauflösendes Bild im richtigen Format verwendest. PNGs sind gut für Grafiken mit wenigen Farben, während JPGs für Fotos besser sind. Ein Bild mit hoher Auflösung kann jedoch zu längeren Ladezeiten führen, daher ist es wichtig, das richtige Gleichgewicht zu finden.
  • Teste verschiedene Geräte und Browser: Manchmal kann es Unterschiede in der Bildqualität zwischen verschiedenen Mobilgeräten oder Browsern geben. Teste, wie das Bild auf verschiedenen Geräten und Browsern aussieht, um sicherzustellen, dass es überall gut aussieht. Wenn die im Banner verwendeten Bilder nicht hochauflösend sind, können sie auf hochauflösenden (Retina-)Displays auf mobilen Geräten unscharf erscheinen.

---
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