Produktbilder werden zu groß dargestellt (entspricht nicht Originalgröße!)

[Paddy93]

Hallo zusammen,

mein Partner und ich arbeiten zusammen an unserem neuen Shop für Wohnaccessoires.

Wir sind zuletzt auf das neue Theme "Dawn" umgezogen.

Dort haben wir nun das Problem, dass unsere hochgeladenen Produktbilder (hier im Bsp.: 400x600 Pixel; s. Anhang "Original") alle samt viel zu groß und entsprechend unscharf im Shop (s. Anhang "Unscharf"), im jeweiligen Produkt, erscheinen.

Wie bekommen wir das Problem gelöst?

Wir hoffen sehr, dass es nicht an den Theme "Dawn" liegt, da es sonst einen guten Eindruck macht.

Danke euch vielmals für Unterstützung.

VG Patrick & Kai

[Gabe]

Hey @Paddy93 

Danke für die Angaben und Attachments. Das Dawn Theme is echt klasse, nur ist es ein sog. "Large Images" Theme wo die Bilder sehr groß angezeigt werden. Deswegen eignet es sich sehr gut für eure Produkte da ihr Wohnaccessoires anbietet. Hier wollen die User oft gerne in die Fotos rein-drillen.

• Nicht vergessen, wir bieten einen Design Time Service für das Reduzieren der Größe von sekundären Produktbildern, dennoch bei dir handelt es sich mehr um die Fotoqualität, stimmt's? 
• Dafür sende bitte eine E-Mail an unseren Support hier (https://bit.ly/3cwO7ym) von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

Habt ihr einen Profi-fotografen für eure Product Pics engagiert? Das wäre fast bei eurem Shop zu empfehlen und eine gute Investition denn die kennen sich mit Online Imagery, .svg, .png, RGB, vector graphics, usw. ganz gut aus. Auf fiverr findest du ganz schnell erschwingliche Angebote deutscher Fotografen und Grafiker in deiner Nähe.

Denn so ganz unkompliziert ist das mit den Bildern nicht - mit Image Typen, Aspekte usw. Beachte auch das Shopify im grossen und ganzen alle Fotos im WYSIWYG Modus reproduziert und nicht komprimiert oder verschlechtert auch nicht um die Page Loads willen. Das hat Shopify nicht nötig denn mit dem CDN Network auf Cloudflare und Fastly sind Homepage Ladezeiten bei vielen Fotos (und Video) immer noch top und unter 10s.

Die Verpixelung in deinem Beispiel kann also mit dem Bild und dessen Qualität selber zu tun haben. Es muss noch dazu gesagt werden, dass die Datei die du hier angehängt hast nur 126 kb beträgt was doch etwas klein ist und beim Aufblasen sich dann schnell verpixelt. ~1Mb wäre eine gute Richtlinie. Ich habe dein "Original" jetzt etwas aufgeblasen und da beim aufblasen sieht man schon bei ca. +20% die Verpixelung, was eigentlich nicht geschehen sollte. 

Wenn du hier einen Preview Link zur Page mit dem Bild verlinken könntest wäre hilfreich. Dann können wir das näher analysieren.

Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
 
2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.

[r8r]

@Paddy93 - ich schließe mich @Gabe @an … wenn Du uns einen Blick auf Deinen Store gewähren kannst, dann tun wir uns mit einer konkreten Beantwortung viel leichter 😉

Alles Liebe,

Mario

[Paddy93]

Hallo zusammen,

ich danke euch vorab schon für eure Hilfe.

Hier der gewünschte Link:

https://cozyvibes.de/

Über ein weiteres Feedback freue ich mich.

VG Patrick

[r8r · Accepted solution]

@Paddy93 

Falls das Produktbild auf der Produktseite zu viel Platz einnimmt, probier diesen CSS-Code hier zu ergänzen:

@media screen and (min-width: 990px) {
  .product:not(.product--no-media):not(.featured-product) .product__media-wrapper.product__media-wrapper {
    max-width: 40%;
    width: calc(40% - 1rem / 2);
  }
  .product:not(.product--no-media):not(.featured-product) .product__info-wrapper.product__info-wrapper {
    max-width: 60%;
    width: calc(60% - 1rem / 2);
  }
}

Vorher:

Nachher:

Falls die Ausgabe im Modal-Layer ("Pop-up") nicht gefällt, dann diesen:

@media screen and (min-width: 750px) {
  .product-media-modal__content>* {
    max-width: 400px;
  }
}

Vorher:

Nachher:

Ich hoffe das hilft,
Mario

[Gabe]

Hi Mario! @r8r 

Dieser Post ist einer den ich "floaten" sollte da viele oft nach dieser Lösung suchen bzgl. Probleme mit dem Dawn theme und die Fotos 😉

[r8r]

Kein Problem @Gabe – float away! 😉

[Paddy93]

@r8r 

Danke dir - ersteres sieht im ersten Moment schon vielversprechend aus!

Allerdings muss ich bzw. wir beide gestehen, dass wir keine Programmierer sind.

Wo genau füge ich den Code ein?

Und dort wiederum, wo und an welcher Stelle?

Danke dir vielmals. 😃

VG Patrick

[Gabe]

@Paddy93 

Da die Dawn Produktseite jetzt in Abschnitte aufgeteilt ist, dürfte das ganz unten im section-main-product.css sein -> aber teste das zuerst in einer Dawn Kopie. Hilfreicher Video: https://youtu.be/7_54Ng4UR3o 

Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
 
2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.

[r8r]

Hi @Paddy93 ,

nicht besonders hübsch, aber praktikabel für nicht-Programmierer*innen: Du kannst Den Code am Ende der Datei base.css im Ordner assets (siehe Dein Screenshot) anfügen – also einfach nach der letzten Zeile dieser Datei. Sollte so ca. aussehen: https://github.com/Shopify/dawn/blob/main/assets/base.css#L2775

Wenn Du noch Hilfe benötigst, kannst Du mir gerne schreiben – ich werd versuchen einigermaßen zeitnah zu antworten!

LG, Mario