Produktbilder auf mobiler Ansicht unscharf

Thema wurde von justin_apelt, 11. Januar 2021 erstellt.

  1. justin_apelt

    justin_apelt Aktives Mitglied

    Registriert seit:
    16. Dezember 2020
    Beiträge:
    27
    Danke erhalten:
    1
    Danke vergeben:
    9
    Guten Tag,

    da der Support mir leider nicht weiterhelfen konnte und ich keinen Beitrag gefunden habe, bei dem das Problem gelöst wurde, frage ich hier nochmal.

    Auf der mobilen Ansicht werden die Produktbilder unscharf dargestellt, auf dem Desktop sieht alles Top aus. Die Bilder haben eine Auflösung von 2000 x 2000 px. Die Bildqualität habe ich auch bereits auf 100% gestellt.

    Folgender Shop ist ebenfalls mit Gambio aufgebaut, dort werden die Produktbilder in der mobilen Ansicht scharf dargestellt. Weiß jemand, was eingestellt oder beachetet werden muss, damit die Bilder in HD in der mobilen Ansicht angezeigt werden?

    So werden die Bilder bei mir dargestellt:

    IMG_6649.jpg
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    1. September 2012
    Beiträge:
    2.443
    Danke erhalten:
    421
    Danke vergeben:
    158
  3. justin_apelt

    justin_apelt Aktives Mitglied

    Registriert seit:
    16. Dezember 2020
    Beiträge:
    27
    Danke erhalten:
    1
    Danke vergeben:
    9
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    1. September 2012
    Beiträge:
    2.443
    Danke erhalten:
    421
    Danke vergeben:
    158
    Bei mir sieht es gut aus, auf mehreren Applegeräten.
    Wie groß ist denn das Originalbild? Der Slider der Startseite ist allerdings zu groß mit 4000 breite, die auf 1980 skaliert wird.
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    1. September 2012
    Beiträge:
    2.443
    Danke erhalten:
    421
    Danke vergeben:
    158
    Aktuell braucht man noch kein 4K Bild. Ich nutze einen Ultrawide Monitor. Ich könnte den 4K-Slider voll sehen, aber der Rest Shop wäre Mist Aussehend. Solange der Restshop nicht auch optisch auf 4K skaliert werden kann, nutzt das 4 K wenig. Bei 16-1800 breite ist da optisch Schluss.

    Und einen 4K Breakpoint gibts doch aktuell nicht. Bei Desktop ist schon die größte Grösse erreicht.
    Aber selbst für 4K Bläst man den Shop doch nur auf. Mehr Informationen bekommt man nicht in der 4000er Breite, nur größer.
     
  6. marit

    marit Erfahrener Benutzer

    Registriert seit:
    7. März 2014
    Beiträge:
    1.387
    Danke erhalten:
    123
    Danke vergeben:
    175
    @justin_apelt
    Haben deine Kunden alle einen Gamer-PC? Wie lange braucht man mit einem normalen PC, um ein 4K-Bild zu laden?
     
  7. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Aber nur, wenn denn auch unterschiedliche Bilder hinterlegt sind.
    in dem Shop hier habe ich auch bei einer Bildschirmbreite von nur 800px das 4000px breite Bild.
    Was übrigens ziemlich abgeschnitten wird:
    Unbenannt.JPG

    Das Bild für Smartphones ist mit 1080 x 1800px dann auch nicht gerade klein.
    Wenn ich das gerade richtig gesehen habe, hat das 998kb - ist für ein Handy nicht gerade wenig.

    Es gibt in den Bildnamen überall Leerzeichen.
    Damit sieht so ein Bild-Pfad dann so aus:
    Banner%20Mobil%20NEU%203.png

    Es gibt Browser, die damit nicht so gut umgehen können.

    350 x 350px ist für ein Artikelbild jetzt nicht gerade viel.
    Die könnte man durchaus auf 450px oder 550px vergrößern.
    Die Originalen Bilder sind von der Größe sehr unterschiedlich, das sieht im Zoom nicht so gut aus.
    Der Karton vergrößert sich so gut wie gar nciht und das nächsten Bild ist so groß, das man im Zoom nicht mehr erkennt.
     
  8. justin_apelt

    justin_apelt Aktives Mitglied

    Registriert seit:
    16. Dezember 2020
    Beiträge:
    27
    Danke erhalten:
    1
    Danke vergeben:
    9
    @Peru das Originalbild ist 2000 x 2000 px. Das ist komisch, bei allen Geräten auf denen ich es getestet habe, sind die Bilder sehr unscharf, wenn ich auch nur ein kleines Stück hineinzoome. Den Slider werde ich dann noch verkleinern.

    @barbara vielen Dank für die Hinweise, was meinst du jedoch mit, dass 350 x 350 px für ein Artikelbild nicht viel ist. Wo kann ich die Auflösung für die Artikelbilder einstellen? Sie sind Original 2000 x 2000 px und es wäre schade, wenn diese auf 350 x 350 px komprimiert und dadurch unscharf werden.

    @Devil könntest du bitte einen Screenshot machen? Bei mir werden die Artikelbilder leider sehr unscharf dargestellt.
     
  9. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Schau mal unter Darstellung -> Bildoptionen, oder unter Inhalt -> Bildoptionen, je nach Deiner Shop Version.
    Und im Style Editor kannst Du die Bildfläche noch einstellen.

    Du hast jetzt eine Bildfläche von 768 x 500px, aber eben nur Artikelbilder mit 350 x 350px

    Hier:
    (Link nur für registrierte Nutzer sichtbar.)
    ist das Bild mit dem Karton ganz sicher keine 2000 x 2000px, sondern eher 450 x 450px
    Das sieht man im Zoom
    Bei anderen Artikeln ist der Karton, bzw. das Karton-Bild auch nicht größer.
     
  10. justin_apelt

    justin_apelt Aktives Mitglied

    Registriert seit:
    16. Dezember 2020
    Beiträge:
    27
    Danke erhalten:
    1
    Danke vergeben:
    9
    @barbara vielen danke für die Antwort und das du die schlechte Qualität auch siehst.

    Mir ist leider nicht ersichtlich, welche Einstellungen ich vornehmen muss, um die Qualität zu verbessern. Wenn ich Änderungen in den Bild-Optionen vornehmen, sehe ich keine Veränderung. Die Einstellungen im Styleedit verändern bei mir nur den Abstand des Bildes zum Titel.

    Welche Einstellungen kannst du mir hier empfehlen?

    Bild-Optionen.PNG Styleedit.PNG
     
  11. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Anzahl zusätzlicher Bilder ist mit 1000 schon recht hoch :D

    Wenn du bei den Info-Bildern Höhe = Breite einträgst, sollte das bei allen anderen Bildern auch so sein.
    Ich würde nie 2000 x 2000 px als Bildgröße nehmen.
    Du hast nur eine Breite von 500px x 500px, da würde ich das Bild auch nur auf 550 x 550px erstellen lassen.
    Wenn du ein großes Bild hast, und auf eine kleine Fläche quetscht, kann das genauso unscharf werden.
    Abgesehen davon, dass Du auch die 4-Fache kb brauchst - was die Ladezeit erhöht - gerade bei einer schlechten Leitung oder er einem nicht Top-Aktuellen Handy.
    Versuche es mit:
    Größe der
    Thumbnails:150 x 150px
    Info-Bilder: 550 x 550px
    PopUp: 650 x 650px

    Wenn Du die Werte geändert hast, dann muss einmal das Image-Processing durchlaufen, damit die Bilder neu erstellt werden.
     
  12. justin_apelt

    justin_apelt Aktives Mitglied

    Registriert seit:
    16. Dezember 2020
    Beiträge:
    27
    Danke erhalten:
    1
    Danke vergeben:
    9
    @barbara vielen Dank, du hast mir sehr weitergeholfen! 550 x 550px war mir jedoch noch ein bisschen zu niedrig und ich bin nun auf 1200 x 1200px gegangen. Jetzt werden sie auch endlich auf dem Handy scharf dargestellt.

    @Devil danke für den Tipp, ich speichere nun alle Bilder nochmal mit der richtigen Auflösung und diesmal auch als .jpg ab, um an Speicherplatz zu sparen.