Hey @DS-Ibro
Danke für die Angaben und die URL, nur ist dein Shop derzeit passwortgeschützt. Daher ist es nicht ganz leicht nachzuvollziehen was du erreichen möchtest ohne konkrete Beispiele.
Du sagst du hast Probleme mit den importierten Bilder und deren Größen wie du sagst, die entweder 1000x750px oder 2387x3874px sind. Beim Anpassen der Größen im Shopify Bild-Media-Editor gibt es dann eine “Verschlimmbesserung”, ist das richtig?
Sind das Bilder ausschließlich auf den Produktseiten oder auch auf der Homepage und Kategorieseiten? Die empfohlene Bildgröße wäre (wie du wahrscheinlich weisst) 2048 x 2048 px wenn Quadrat. Siehe mehr zu diesem Thema in diesem Artikel von Tiny-IMG und unserem Blogartikel hier und hier. Man kann auch die Bilder mit dem img_url Filter auf Client-side manipulieren wie du hier lesen kannst.
In der Tat melden auch andere hier in der Community dasselbe Problem mit dem Dawn Theme. Das Dawn Theme hat gewisse Algorithmen die die Bilder etwas optimieren in den Dimensionen und in der Resolution, so dass die Homepage eine Balance zw. Qualität und Ladegeschwindigkeit gewährleistet. Andere Themes wie Debutify, Impulse, Prestige, und Wokiee können das einfach etwas besser und haben bessere Algorithmen (Headless Bildgrößen-Anpassung, Lazy-Loading, Below the Fold usw…) in das Theme Code eingebaut als unsere “Free” Themes. Da werden die Bilder mehr im Sinne des “WYSIWYG” angezeigt und lazy geloadet.
Frage: hast du auch andere Themes zum Shop hinzugefügt um zu testen wie die die Bilder rendern? Du kannst alle oben-genannte Themes sowie alle Themes hier sowie die anderen Free Themes zum Shop hinzufügen, um sie zu testen, etwas darin rumbasteln und dann dich entscheiden welches Theme das beste ist für deine Produkte, dein Branding, und deine Kunden.
Es gibt sehr viele Code Snippets die man ganz unten im theme.css einpflanzen kann die die Bildgrößen regulieren, aber dafür wäre eine Experte der beste Ansprechpartner und das immer zuerst in einer Themekopie testen. Ein Beispiel wäre das folgende Code aber es ist nicht gesagt ob das dein Problem löst (und ohne Gewähr):
.card--product .media {
padding-bottom: 100% !important;
}
Oder:
.product-card .product-card__image {
padding-top: 120%;
position: relative;
}
.product-card .product-card__image img {
position: absolute;
top: 0;
height: 100%;
object-fit: cover;
}
Oder:
.productitem--image {padding-top: 100%;}
.productitem--image img {
top: 0 !important;
transform: none !important;
left: 0 !important;
position: absolute;
height: 100% !important;
object-fit: contain;
}
Oder:
.product__image-wrapper {
padding-top: 100% !important;
}
.product__image-wrapper img {
height: 100%;
object-fit: cover;
}
Oder:
.grid-view-item__image-wrapper {
width: 100%;
max-width: 100% !important;
}
.grid-view-item__image-wrapper div {
padding-top: 100% !important;
}
.grid-view-item__image {
height: 100%;
object-fit: contain;
max-width: 100% !important;
max-height: 100% !important;
}
Wie man sieht kommt es auf sehr viele Parameter und Bedingungen an wie man im CSS die Bildgrößen anpassen kann und hier wäre, wie gesagt, ein Experte der beste Ansprechpartner.
Du kannst auch Bilder-optimierungs-Apps zum Shop hinzufügen die deine Bilder etwas komprimieren im Name der “Bilder Optimierung”. Oder eben einen Experten anheuern der das für dich macht. Wenn du deine Frage in unserer privaten Facebook Gruppe und/oder in unserem Design Forum postest werden einige auf dich zurückkommen.
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.
