@Stefan_Fastenau
- ne, kein Interesse an externen Apps - free Plan nur für 50 Bilder und dann zahlen, um einen Fehler in einem Shopify-Theme zu beheben? Da stimmt ja was mit dem Dawn-Theme nicht, wenn die Auflösungen falsch angepasst werden - der Fehler kann ja sofort gesehen werden.
Das Dawn Theme ist jetzt in der Version 13.0.1 relativ gesund, denke ich, also sitzt der ? vielleicht eher darin wie du deine Bilder hergestellt und eingerichtet hast, was ich weiter unten eingehe, wie z. B. das Verwenden der WebP File-type. Folgendes kann man in der Dev Console sehen (mehr dazu weiter unten) und den IMG Code findest du in der main-article.liquid Datei oder im article-card.liquid:
Die folgende Information ist aus unseren Hilfeseiten und der Online Literatur entnommen und diese werde ich im 1:m Sinn zusammenfassen, sprich, für ALLE Community Members die ggf. dasselbe Problem erleben und hier mitlesen möchten.
Eine Key Strategy ist die Verwendung von hochwertigen Bildern. Stelle sicher, dass die Bilder, die du verwendest, mindestens die empfohlene Größe des Themes haben. Wenn beispielsweise dein Bild im Querformat ist, dann die An Bild anpassen Einstellung verwenden, so dass es etwas besser angepasst werden sollte.
Das Dawn Theme und dessen Geschwister mögen beispielsweise eine Größe von 2048 x 2048px. Sie alle bieten das Lazy Loading und das Laden der Bilder in einer zum Gerät und des Bildschirms passenden Größe, was bedeutet, dass eine gesunde Größe eine optimale Darstellung gewährleisten wird.
Ebenfalls ist es wichtig, Bilder zu optimieren, indem die Dateigröße ohne Beeinträchtigung der Qualität reduziert wird. Dies kann mit online Tools und Apps, wie die obige PICX Resize App erreicht werden, oder mit TinyPNG oder Photoshop. Zudem sollten Bilder einen 1:1 Aspekt haben, sprich, quadratisch, um sicherzustellen, dass sie im Shop korrekt dargestellt werden. Man kann sie im Backend Media Editor dazu schneiden, so dass sie auch auf kleineren Displays richtig angezeigt werden und keine Unschärfen oder Verzerrungen aufweisen.
Dawn und die Prinzipien des UX Design Thinking - ein Problem für alle Shopify Merchants super effektiv lösen
Dawn hat eine best-of-breed Performance, eine tolle Flexibilität und ist super einfach zu verwenden. Es verwendet JSON-Vorlagen, die App-Blöcke und Abschnitte auf allen Seiten unterstützen und ist somit ein ultraleichtes, Mobile-First Theme, das atomic components, minimales JavaScript und einen opinionated set of Features verwendet. Es maximiert die Flexibilität und minimiert die Komplexität.
Bei der opinionated Entwicklung des Dawn Themes wurden dabei die Grundp****rinzipien des UX-Designs eingeflößt, um eine optimale UX zu gewährleisten. Diese Prinzipien beinhalten die folgenden Hauptthemen, die für sich sprechen:
- Mobile-First Design für Smartphones.
- **Performance und Schnelligkeit (**siehe den neuen Core Vitals Performance Dashboard für mehr Info dazu).
- Einfachheit und Klarheit - Das KISS Prinzip - keep it simple silly…
- Zugänglichkeit und Barrierefreiheit (Accessibility).
- Benutzerführung und -navigation so dass die User sich schnell zurechtfinden mit den wenigsten Klicks.
- Integration von interaktiven Elementen und dynamischen Inhalten.
- Hochgradige Anpassbarkeit, sodass man das Theme schnell an die eigene Brand Identity sowie Target Audience anpassen kann, ohne Entwicklungskenntnisse haben zu müssen.
Diese eingebauten UX Prinzipien tragen somit dazu bei, dass Dawn eine solide Grundlage für die Erstellung benutzerfreundlicher Shopify-Stores bietet, die sowohl für Händler als auch für Endkunden eine tolle UX gewährleisten.
Die Dawn Versionings, da du in deinem anderen Thread sagst, das Problem besteht seit V.8
Die Dawn Versionierungen sagen auch viel aus zur Entwicklungs-History der Architektur aller Shopify Free Themes und wie die Bildkompressions-Algorithmen in den Themes funzen. Wenn man sie durchliesst bekommt man mehr Einsicht zu wie das Produktteam das Dawn Theme ständig verbessert. Beispielsweise wurde ein 
in der Version 13 gefixt dar verhinderte, dass der Produktrasterabschnitt die richtige Bildform in seinen Produktkarten verwendet. In Version 12 wurde das Bild-Tag-Attribut, das angab, welche Bilder zuerst geladen werden sollten, entfernt. Dawn überlässt es jetzt der Plattform, dies zu bestimmen, was die Leistung verbessert.
In V.11 wurde eine neue Animation-Option, das “Vergrößern beim Scrollen”, zu den Bild mit Text und Bildbanner Sections hinzugefügt. In V.10 wurden Optionen hinzugefügt, um die Form der Produktkartenbilder zu ändern, sowie Performanceverbesserungen für große Bilder. In V.9 wurde die Leistung des Abschnitts “Multicolumn” verbessert, indem die Größe der geladenen Bilder reduziert wurde. Blogpost-Folien wurden so angepasst, dass sie jetzt eine Vorschau für die nächste Folie zeigen.
Version 8 der Dawn Theme Architektur,
In V.8 wurde die Anzeige von Produktbildern und -logos zu verbessert. Die Produktbilder auf der Produktseite, im Produktvorstellungsbereich und im Schnellkauf-Modal wurden jetzt standardmäßig so angepasst, dass sie in die Höhe des Bildschirms passen. Man kann dies immer noch deaktivieren, wenn man möchte, dass die Bilder größer dargestellt werden. Es wurde auch eine neue Einstellung hinzugefügt, mit der die Höhe von Produktbildern auf der Produktseite und im Produktvorstellungsbereich begrenzt werden kann. Man hat jetzt die Möglichkeit, Produktbilder in ihrem ursprünglichen Seitenverhältnis anzuzeigen oder sie so zuzuschneiden, dass sie den zugewiesenen Platzhalter Grid ausfüllen. Ist es das vielleicht wo dein ? sitzt?
Es wurde auch die Option “Mittlere Höhe” zum Abschnitt Bild mit Text hinzuzufügen sowie mehr Breitenoptionen und die Standardbreite des Produktbildes im Abschnitt “Featured Product” anzupassen. Die Standardhöhe des Bildbanners wurde von “An die Bildgröße anpassen” auf “Mittel” geändert, damit größere Bilder auf Bildschirmen besser angezeigt werden. Dies führt zu einer leichten optischen Veränderung für Themes, bei denen diese Einstellung zuvor aktiviert war. Wenn du die Änderung rückgängig machen möchtest, wähle die Option “An das erste Bild anpassen” in der Einstellung “Bannerhöhe”.
Was du machen kannst um die Bilder in der Qualität zu verbessern
Das Problem, dass manche Bildern, in niedriger Auflösung und schlechter Qualität angezeigt werden, könnte also, wie gesagt, auf mehrere Faktoren zurückzuführen sein. Basierend auf dem HTML-Code beispielweise deines .webp Bildes Caro-Kann-Defence, kann es mehrere Gründe geben warum es in schlechter Qualität angezeigt wird. An erster Stelle, hat das Bild, wie gesagt, eine Originalgröße von 19Kb. Das wird einfach nicht gut aussehen sobald es als Big Picture dargestellt wird.
Weiteres zu den Daten in der Dev Console:
Das srcset-Attribut im img-Tag wird anscheinend verwendet, um einen Satz von Bildern für verschiedene Bildschirmauflösungen zu definieren, sodass der Browser die am besten geeignete Bildgröße auswählen kann. Das sizes-Attribut informiert den Browser über die Größe des Bildes, wie es auf verschiedenen Bildschirmbreiten erscheint. Wenn diese nicht korrekt eingestellt sind oder wenn die Interpretation dieser Attribute durch den Browser nicht mit der tatsächlichen Anzeigegröße übereinstimmt, kann das dazu führen, dass Bilder mit niedrigerer Auflösung ausgewählt werden, als beabsichtigt.
Das sizes-Attribut definiert erwartete Bildanzeigegrößen basierend auf der Breite des Viewports. Wenn die CSS-Media-Queries (z.B. (min-width: 1200px) 550px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)) die tatsächliche Größe des Containers auf verschiedenen Geräten oder im Theme nicht genau darstellen, könnte der Browser eine zu kleine Bildquelle (aus srcset) auswählen, was dazu führt, dass es unscharf erscheint, sobald es skaliert wird.
WebP File-type nicht unbedingt der Beste für Bildkompression
Obwohl WebP ein super Bildformat ist, das für die Bereitstellung von Bildern hoher Qualität bei kleineren Dateigrößen bekannt ist, kann es eine übermäßig starke Kompression die Bildqualität verschlechtern. Wenn die Bilder beim Konvertieren in WebP zu stark komprimiert wurden, könnte dies zur schlechten Qualität beitragen.
Das loading="lazy"-Attribut wird auch dazu verwendet, um das Laden von Bildern außerhalb des Bildschirms zu verzögern, bis sie above-the-fold sind, sprich, in den Viewport eintreten. Dies sollte jedoch die Bildqualität nicht beeinflussen, es sei denn, der Browser hat Probleme mit faul geladenen Bildern unter bestimmten Umständen.
Externer CSS- oder JavaScript-Code könnte die Art und Weise beeinflussen, wie Bilder angezeigt werden. CSS-Regeln, die das Bild über seine natürliche Auflösung hinaus skalieren, können es zum Beispiel pixelig oder unscharf erscheinen lassen. Die Attribute Breite und Höhe (width="2000" height="700") definieren die natürliche Größe des Bildes. Wenn diese nicht den tatsächlichen Abmessungen des Bildes entsprechen oder das Seitenverhältnis nicht mit dem des Containers übereinstimmt, könnte dies zu falscher Skalierung und schlechter Qualität führen.
Hier ein paar potentielle Lösungen:
- Überprüfe, ob die Attribute
srcset und sizes die Layout- und Anzeigegrößen, die für verschiedene Viewport-Breiten vorgesehen sind, genau widerspiegeln.
- Prüfe, ob die CSS- oder Theme-Einstellungen speziell die Bildwiedergabe oder Skalierung in einer Weise beeinflussen, die die Qualität verschlechtern könnte.
- Experimentiere mit weniger aggressiven Kompressionseinstellungen für WebP-Bilder, um zu sehen, ob sich die Bildqualität verbessert.
- Stelle sicher, dass JavaScript oder CSS, das Bilder dynamisch verändert, nicht versehentlich die Qualität durch unsachgemäßes Skalieren reduziert.
Des weiteren habe ich das jetzt in meinem eigenen Dawn Theme **article-card.liquid** angeschaut und folgendes festgestellt:
Man kann die divided_by-Filters im sizes-Attribut des <img>-Tags anpassen was einen direkten Einfluss auf die Größe, in der das Bild im Browser gerendert wird, haben sollte.
Der divided_by: 2 Filter sorgt dafür, dass die Breite des Bildes halbiert wird, basierend auf der definierten Seitenbreite (settings.page_width). Dies wird typischerweise verwendet, um das Bild passend zur Hälfte der verfügbaren Breite zu machen, was in Layouts mit zwei Spalten oder in einem Design mit seitlichen Margins Sinn macht.
Wenn du beispielweise divided_by: 2 zu divided_by: 1 änderst (was ich jetzt in meinem Code getestet habe), bedeutet das effektiv, dass du den Divider entfernst, was dazu in meinem Dawn Theme geführt hat, dass das Bild in voller Breite (settings.page_width minus 100px) gerendert wurde, anstatt in halber Breite. Dies kann Bilder viel größer laden, als vielleicht nötig oder beabsichtigt, was auch die Ladezeiten negative beeinflussen kann, sprich, Datenverbrauch auf Handys steigert.
Wenn man den divided_by: 2-Filter komplett entfernt, würde das sizes-Attribut immer noch die Breite basierend auf der settings.page_width definieren, aber ohne die Halbierung. Das bedeutet, dass das Bild in voller, nicht angepasster Breite der settings.page_width minus 100px geladen wird, was ähnlich ist, wie wenn du divided_by: 1 setzen würdest.
Dies würde nicht direkt die Größe des Originalbildes reduzieren, sondern dem Browser sagen, in welcher Größe das Bild basierend auf dem Viewport und den gegebenen srcset-Optionen geladen werden soll. Der Qualitätsverlust, den du bemerkt hast, könnte eher darauf zurückzuführen sein, dass der Browser ein für die Darstellung zu kleines Bild auswählt, weil die sizes-Definition nicht optimal für die Darstellung auf dem Bildschirm war.
Somit kann das Ändern von divided_by: 2 zu divided_by: 1 oder das Entfernen des divided_by-Filters bewirken, dass größere Bildversionen geladen werden, als ursprünglich durch die Halbierung der settings.page_width beabsichtigt. Dies kann zu unnötig großen Bildern führen, die mehr Bandbreite beanspruchen und die Seitengeschwindigkeit potenziell verlangsamen.
Ein direkter Qualitätsverlust durch das Entfernen des Filters ist unwahrscheinlich, es sei denn, die Größenauswahl führt dazu, dass ein zu kleines Bild gestreckt wird, was zu Unschärfe führen kann. Der beobachtete Qualitätsverlust ist wahrscheinlicher auf die Auswahl eines nicht optimalen Bildes aus dem srcset zurückzuführen, basierend auf der durch sizes angegebenen Bildgröße.
Hoffe du findest eine Lösung!
VG,
. Manche der Bilder haben einen Filter, sehe ich das richtig? Dann haben viele der Bilder sehr kleine Dateigrößen wie 19kb die dann im Theme aufgeblasen werden und daher etwas pixelig aussehen können.
in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
als Teil deiner 
