Px-Größe für Bilder in der Produktbeschreibung? GIF Größe?

[Ainh]

Hallo zusammen,

Ich melde mich, weil ich ein Produktbil  in meiner Produktbeschreibung hinzufügen möchte. Dabei gibt es allerdings leider ein Problem, und zwar, dass die Bilder etwas verpixelt und unscharf angezeigt werden, wenn man sich die Beschreibung liest und sich die Bilder ansieht.

Bei den Produktbildern an sich, ist es ja so, dass man 2048 × 2048 px nutzen sollte, um ein perfektes Bild ohne Verpixelung und Unschärfe angezeigt zu bekommen. Bei der Produktbeschreibung ist es allerdings anders, da habe ich dieselbe Px-Größe benutzt, aber sie wird trotzdem in verpixelt angezeigt.

Des Weiteren geht es, um GIFs, die ich in der Produktbeschreibung ebenfalls einfügen möchte. Allerdings habe ich da Probleme mit der Pixelgröße. Hat jemand Erfahrung und kann mir da irgendwelche Werte nennen, die ich im Zugriff nutzen kann, um GIFs problemlos in der Produktbeschreibung an zu fügen?

Hat jemand Erfahrung oder kennt bereits eine Lösung für das Problem?t.

[Gabe · Accepted solution]

@Ainh 

Du siehst also "dass es unscharf ist" - hmmm, kann es sein, dass es sich hier um ein "phänomenologisches" Problem handelt, sprich, eine subjektive Wahrnehmung? Du siehst das Bild als unscharf, aber ich eigentlich nicht so sehr?

Ich habe das meiner Kollegin gezeigt und bekam nur ein ¯\_(ツ)_/¯ von ihr zurück.

Ich habe Canva etwas recherchiert und es gibt zwei Versionen - Free und Pro. Die erste Version bietet weniger Optionen beim Bearbeiten der Bilder, wie z. B. das Resizing des Bildes was man nur mit der Pro version bekommt.

Man muss somit ein etwas grösseres Bild zu Canva hochladen und bearbeiten und dann exportieren. Im Grunde sollte 1000x1000px ausreichen. Dein Bild habe ich angeschaut und es ist im .webp Format und 31Kb in Größe, sprich 480x480px und 96dpi:

Du kannst in Canva ein neues Document starten und das Bild in einer angepassten oder größeren Größe im Document importieren und die Größe dann auswählen und bearbeiten, wie z. B. 800x800px, sprich etwas grösser als was du brauchst. In Canva Pro kannst du das auch machen und nachträglich die Pixelgröße ändern.

[Gabe]

Hey @Ainh 

Hast du vielleicht einen Link zu einem Beispiel (ansonsten stehen wir hier im Dunklen...)

[Ainh]

Hey, sorry für die späte Antwort. Hier hast du einen Link von mir: https://luckles.com/products/revolution

Wenn du dir die Produktbeschreibung liest und etwas runter scrollst, dann siehst du die drei "Bubbles". Sowohl auf dem Desktop als auch auf mobilen Geräten, werden genau diese drei Bubbles unscharf bzw. verpixelt angezeigt. Ich bearbeite, diese bei Canva und lade sie mir herunter, damit ich sie in der Produktbeschreibung hinzufügen kann – sowohl PNG, als auch JPG Format werden beide verpixelt und unscharf angezeigt. Der Kundenservice von Spotify sagt, dass es an Debutify liegt und diese sagen wiederum, dass es an Shopify liegt, weil die alle Dateien komprimieren (und das ist IMMER so, dass beide sagen es liegt an den anderen). Da denke ich mir, wenn man ein Bild hinzufügt (noch weiter unten in der Produktbeschreibung, das Bild von der Bewertung), wird aber problemlos angezeigt wird und man kann auch alles super erkennen kann.

Nur bei diesem einen Bild wird es immer wieder so angezeigt - und das ist bei jedem Produkt und jede Produktbeschreibung so, jedes Bild sieht genau so aus. Wenn ich aber irgendwelche x-beliebigen Bilder hinzufügen, dann wird es noch mal angezeigt, obwohl die Qualität und die Auflösung schlechter sind. Wahrscheinlich liegt es am Canva, aber wenn ich die Bilder von Canva in die Produktbilder hinzufüge, sieht es wieder wie im Originalen aus - scharf und gut erkennbar. Also immer dann, wenn es in die Beschreibung hinzugefügt wird.

Wenn du Tipps hast, dann würde ich mich liebend gern auf eine Rückmeldung freuen. Bis dahin einen guten Start in die Woche wünsche ich dir.

[Gabe]

Hey @Ainh 

Danke für die URL und, tbh, ich konnte keine Unschärfe erkennen. Siehe meine Videoanalyse hier und auch mein Check auf Handy wo ebenfalls keine Unschärfe zu erkennen war:

• Test auf Desktop hier

Test auf Mobile hier:

Wenn du mir Beispiele hier einfügen könntest die die Unschärfe pin-pointen dann kann ich das noch weiter anschauen. Canva als Bildeditor ist eigentlich eines der besten Tools die es gibt aber ich werde Canva etwas researchen jetzt um zu sehen, ob andere das auch gemeldet haben.

[Ainh]

Hey Gabe, alles ist scharf in der Produktbeschreibung, bei mir geht es lediglich um das Bild in der Mitte (über dem Bullet Pointe/Stichpunkten) die drei kleinen Kreise. 

bei mir auf dem Handy und sowohl auf meinem MacBook wird genau dieses Bild unscharf angezeigt. Ist es jetzt nicht wirklich extrem unscharf, aber im Vergleich, wenn man sich das durch liest und danach die Bilder kommen, dann erkennt man schon, dass es etwas verpixelt ist. Das war mein Problem. Ich weiß nicht, ob das vielleicht nur an mir liegt, oder nicht, aber ich hab das war wirklich sehr vielen verscheidenen Produktbeschreibungen von mir bemerkt. 

Für deinen research danke ich dir wirklich sehr. Ich weiß deine Hilfe sehr zu schätzen.

[Gabe]

@Ainh 

Freut mich immer helfen zu können 😉

Also du meinst dieses Bild hier, dass ich jetzt auf Handy aufgeblasen habe. Hier finde ich trotz 200% Vergrößerung, dass die Qualität noch relativ ok ist:

Auf Desktop sogar auf 300% vergrößert und das Bild ist immer noch weniger verpixelt als dein Logo wie man hier sehen kann:

Kann es sein, dass es noch vollständig auf deinem Gerät laden muss (was manchmal eine verpixelte "Vorschau" des Bildes anzeigen kann)?

Und wo und wie wurde die Roh-datei diese Bildes erstellt? Was ist der Ursprung dieses Bildes?

[Ainh]

Das Rohmaterial hab ich kannst du mal wie meine Produktbilder bei Canva erstellt. Ich sende dir mal ein Bild hier, wie das von meinem iPhone her aussieht.

Also wenn ich ganz normal durch die  Produktseite  scrolle. Im Bild hab ich gar nicht gezoomt, also das ist ganz normal bei 100% und ich sehe, dass es unscharf ist. 

[Gabe · Accepted solution]

@Ainh 

Du siehst also "dass es unscharf ist" - hmmm, kann es sein, dass es sich hier um ein "phänomenologisches" Problem handelt, sprich, eine subjektive Wahrnehmung? Du siehst das Bild als unscharf, aber ich eigentlich nicht so sehr?

Ich habe das meiner Kollegin gezeigt und bekam nur ein ¯\_(ツ)_/¯ von ihr zurück.

Ich habe Canva etwas recherchiert und es gibt zwei Versionen - Free und Pro. Die erste Version bietet weniger Optionen beim Bearbeiten der Bilder, wie z. B. das Resizing des Bildes was man nur mit der Pro version bekommt.

Man muss somit ein etwas grösseres Bild zu Canva hochladen und bearbeiten und dann exportieren. Im Grunde sollte 1000x1000px ausreichen. Dein Bild habe ich angeschaut und es ist im .webp Format und 31Kb in Größe, sprich 480x480px und 96dpi:

Du kannst in Canva ein neues Document starten und das Bild in einer angepassten oder größeren Größe im Document importieren und die Größe dann auswählen und bearbeiten, wie z. B. 800x800px, sprich etwas grösser als was du brauchst. In Canva Pro kannst du das auch machen und nachträglich die Pixelgröße ändern.

[Ainh]

Wenn du sagst, dass auch deine Kollegin nichts bemerkt hat, vielleicht liegt es an meinem Handy und an meinem Mac. 

Der support Shopify sagte mir einmal, dass man Produktbilder am besten in 2048 × 2048 hochladen sollte, damit es in einer perfekten Qualität angezeigt wird. Ich nutze Canva Pro und bearbeite auch meine Produkt Bilder in der selben Auflösung (2048x2048) und habe dieses Bild hier (mit den drei Kreisen) ebenso mit der selben Größe bearbeitet und heruntergeladen. 

Naja, ich weiß auch nicht wo das Problem liegt.

[Gabe · Accepted solution]

Ich denke 2048x2048 wird für diese Bild und dem Zweck nicht unbedingt gebraucht. Wäre das ein Hero Banner, dann ja, aber für dieses Bild sollte 800x800 oder 1000x1000 ausreichen. 

Kannst du das Bild nochmal löschen und eine neue Version hinzufügen? Stelle auch sicher, dass so wenige Artefakte wie möglich im Bild mit beinhaltet sind. Diese können bei exzessiver Bearbeitung in einem Bildeditor entstehen. Fazit: die Bilddatei soll möglichst roh sein und so wenig wie möglich bearbeitet.