FROM CACHE - de_header
Gelöst

Slideshow erscheint unscharf

Polmemesshop
Entdecker
19 0 6

Hallo,

ich habe mit Canva einen neuen Banner für die Slideshow erstellt, welcher in Canva selbst und auch noch nachdem ich ihn runterlade komplett scharf ist. Sobald ich ihn bei Shopify in der Slideshow hochlade, wird der Banner unscharf. Besonders die Schrift erscheint sehr verschwommen. Wir verwenden das Debut Theme. 

Ich habe bereits diverse verschiedene Größen ausprobiert, auch laut angegebener Größen für unser Theme. Egal welche Größe ich nehme, das Banner wird jedes Mal unscharf. Ein Banner, welches ich vor einigen Wochen hochgeladen habe, erscheint scharf. Selbst wenn ich die selben Größen verwende, wie bei diesem Banner, ist der neue Banner dennoch unscharf.

Hatte jemand bereits dieses Problem oder hat eine Idee, woran es liegen könnte?

Danke und viele Grüße

Tanja

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
16357 2587 3853

Erfolg.

Hi Tanja!

Ja, da wird es immer einen kleinen Unterschied geben in der Rendierung des Bildes innerhalb des Canva Editors und auf deiner Homepage. Aber so was ich sehe, scheinen die Unterschiede minimal zu sein und da muss man sehr genau hinsehen. Aber ich hoffe, dass das mit pdf für dich besser klappt. Nicht vergessen, dass wir einige Themes haben die sich für super Bildqualität spezialisieren. Diese kannst du alle gerne zum Shop hinzufügen und testen denn das kostet nichts : )

VG,

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

Lösung in ursprünglichem Beitrag anzeigen

7 ANTWORTEN 7

Gabe
Shopify Staff
16357 2587 3853

Hey Tanja! @Polmemesshop 

Danke für die gute Frage! Shopify "rendert", sprich, darstellt die Bilder genauso wie sie hochgeladen werden in "lossless" Bildqualität. Meist haben Bilder die vorher viel in einem externen Bildeditor bearbeiten wurden eine "lossy" Darstellung, d. h. das jedes Bild bei der Bearbeitung in einem externen Editor an Qualitätsverlust leiden wird. Wichtig hier wäre auch der Ursprung des Bildes, sprich, wo du das Bild her hast. Wir komprimieren Bilder beim Hochladen nicht; stattdessen werden im Browser Transformationen angewendet, wodurch vorkomprimierte Bilder gelegentlich noch stärker komprimiert aussehen können. Siehe mehr dazu hier.

Um so viel Qualität wie möglich zu erhalten, empfehlen wir, ein natives Originalbild mit höherer Auflösung hochzuladen, sprich das NICHT bearbeitet wurde, mit einer maximale Größe von 4472px x 4472px oder kleiner sogar. Verwende bitte dabei ein Bildtyp, der nicht "lossy" ist (verlustbehaftet), d.h. es verliert nicht jedes Mal an Qualität, wenn es modifiziert/gespeichert wird. Jpgs sind verlustbehaftet (lossy), aber schnell zu laden, während pngs nicht verlustbehaftet sind (lossless), eine höhere Qualität haben, aber aufgrund ihrer Größe etwas mehr Zeit zum Laden benötigen können.

Schicke mir doch eins der betroffenen Bilder hier in diesem Leitfaden und dann kann ich das mal anschauen.

VG,

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

Polmemesshop
Entdecker
19 0 6

Hallo Gabe,

vielen Dank für deine schnelle und ausführliche Rückmeldung!

Ich habe dir das Bild mal angehängt. Es ist lediglich ein schwarzer Hintergrund, auf dem Schrift und Produktbilder eingefügt wurden. Viel mehr bearbeitet wurde gar nicht. Der Hintergrund ist aus der Canva Bilder Bibiliothek, also keines, das ich mir selber irgendwoher runtergeladen habe. Als Format hatte ich bereits immer PNG gewählt.

Das angehängte Bild hat die von dir empfohlene Größe 4472x2236 also im 1:2 Format. Auch hier erscheint die Schrift leider unscharf, sobald ich es in die Slideshow hochlade.

Du sagtest, es kann auch am Browser liegen, dass Bilder noch stärker komprimiert werden. Ändert ein anderer Browser ggf. etwas oder lässt sich das nicht vermeiden?

Danke im Voraus und viele Grüße

Tanja

Kopie von Black Weekend Leinwände Sale (4).png

Gabe
Shopify Staff
16357 2587 3853

Hey @Polmemesshop 

Danke für das Bild. Kannst du mir ein Ausschnitt aus dem Bild hier schicken das die Unschärfe deutlich zeigt? Ich habe dein Bild jetzt auf 150% aufgeblasen und die Pixels sieht man ziemlich deutlich wie man hier sieht:

image.png

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

Polmemesshop
Entdecker
19 0 6

Hallo Gabe,

ich habe dir einen Screenshot des Bildes beigefügt, wenn es in der Slideshow eingefügt ist direkt unscharf erscheint. Es ist vor allem deutlich im Vergleich zum Original bei Canva. Meintest du das oder was für einen Ausschnitt soll ich dir schicken?

Und was für eine Schlussfolgerung lässt sich daraus ziehen, dass man bei 150% Zoom die Pixel so deutlich sieht bzw. ist das der Grund, weshalb es unscharf erscheint und gibt es etwas, wie ich es ändern kann?

Danke und viele Grüße
Tanja

Polizeimemesshop ~ Debut anpassen ~ Shopify - Google Chrome 09.11.2020 10_29_44.png

Gabe
Shopify Staff
16357 2587 3853

Hey Tanja!

Danke für dein Beispiel! Bei Ausschnitt meinte ich ein Beispiel des Bildes in deinem Shop dass die unschärfe deutlich zeigt. In deinem Beispiel kann ich so die unschärfe nicht eindeutig erkennen.

Mein Beispiel zeigt auch, dass die Verpixelung der Grund einer Unschärfe sein kann und diese wird oft durch einen Bildeditor Programm wie Canva verursacht. Im Grunde passiert dies oft beim zusammenfügen mehrere Elemente in einem Bild. Ein Blogartikel zu Canva bzgl. diesem Problem habe ich gefunden der ziemlich aufschlussreich ist hier.

VG,

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

Polmemesshop
Entdecker
19 0 6

Hallo Gabe,

vielen Dank für den Artikel. Ich habe bereits etwas rumprobiert und habe das Gefühl, dass ein Download im PDF Format und die anschließende Konvertierung in ein PNG Format tatsächlich etwas bringt.

 

All zu deutlich ist die Unschärfe nicht zu sehen. Es fällt vor allem auf, wenn man das Bild bei Canva oder sobald es runter geladen ist, im Vergleich zur Slideshow betrachtet.

Ich habe dir nochmal zwei Screenshots beigefügt. Einmal eins mit dem Banner im Shop und im Vergleich dazu den Banner bei Canva. Es ist tatsächlich kein riesen Unterschied aber mir kamen vorherige Banner immer schärfer vor, weshalb ich mich über die Unschärfe gewundert hatte.

Ich denke, ich werde es dann aber mal mit dem PDF Trick probieren.

Danke und viele Grüße
Tanja

Kopie von Black Weekend ab Freitag – 1800 px × 900 px - Google Chrome 09.11.2020 11_29_01.pngPolizeimemesshop _ Produkte für Polizei, Feuerwehr und Rettungsdienst - Google Chrome 09.11.2020 11_26_23.png

Gabe
Shopify Staff
16357 2587 3853

Erfolg.

Hi Tanja!

Ja, da wird es immer einen kleinen Unterschied geben in der Rendierung des Bildes innerhalb des Canva Editors und auf deiner Homepage. Aber so was ich sehe, scheinen die Unterschiede minimal zu sein und da muss man sehr genau hinsehen. Aber ich hoffe, dass das mit pdf für dich besser klappt. Nicht vergessen, dass wir einige Themes haben die sich für super Bildqualität spezialisieren. Diese kannst du alle gerne zum Shop hinzufügen und testen denn das kostet nichts : )

VG,

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