Katalogbilder unscharf

Gelöst sina2008
(@sina2008)

vor 3 Jahren, 2 Monaten
Hallo,

Katalogbilder werden auf dieser Seite (Shop-Entwurf) unscharf angezeigt: https://lucky-manufaktur.de/paracord/shop/
Auf der Produktseite (Einzelprodukt) dagegen sind die Bilder in Ordnung. Z. B.
https://lucky-manufaktur.de/paracord/shop/fuer-pferde-2/halfter/knotenhalfter-lars/

Hier erstmal meine Daten:

Theme: child von storefront
WordPress Version: 5.6

Aktive Plugins:
AJAX Search for WooCommerce, V. 1.8.1
Germanized für WooCommerce, V. 3.3.6
myStickymenu, V. 2.4.9
Woocommerce, V. 4.9.2
WooCommerce Custom Product Addons (Free), V 2.4.12

Folgendes habe ich überprüft:

Ich habe alle Bilder mit einer Größe von 800px x ….px (je nach Format) hochgeladen. So habe ich die empfohlene Bildgröße für WooCommerce verstanden.
Auch, wenn ich größere Bilder (z. B. 1200px x ….px) hochlade, bleibt das Katalogbild unscharf.

1. Bildgröße auf der Katalogseite ist passend, d. h. es wird für die Katalogseite nicht größer skaliert, als die des Bildes, das bei Uploads hinetrlegt ist.
2. Im Customizer habe ich erfolglos alle Optionen für die Produktbilder getestet (Design > Customizer > WooCommerce > Produktbilder).
Aktuell ist eingestellt: Benutzerdefiniert – Seitenverhältnis wird 4:3 zugeschnitten.
3. Originalbild vor dem Upload noch höher aufgelöst (300dpi) und mit „hoher Qualität“ abgespeichert. => Kein Unterschied.

Frage:
Woran liegt es, dass die Bilder an Qualität verlieren, obwohl sie m. E. groß genug sind für die verschiedenen Formate, die im Theme verwendet werden.

Ich möchte gerne einen einheitlichen Zuschnitt für alle Katalogbilder.

Weiß jemand eine Lösung?
Vielen Dank für Eure Hilfe!
Sina
- Dieses Thema wurde geändert vor 3 Jahren, 2 Monaten von sina2008.
- Dieses Thema wurde geändert vor 3 Jahren, 2 Monaten von sina2008.
- Dieses Thema wurde geändert vor 3 Jahren, 2 Monaten von sina2008.
Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 10 Antworten - 1 bis 10 (von insgesamt 10)

bscu
(@bscu)

vor 3 Jahren, 2 Monaten
Das Problem liegt an:

324px × 216px (Skaliert zu 494px × 329px)

Durch die Skalierung per HTML werden Bilder leider unscharf. Vergrößert werden die Bilder durch
```
.wc-block-grid__products .wc-block-grid__product-image img {
    width: 100%;
}
```
Thread-Starter sina2008
(@sina2008)

vor 3 Jahren, 2 Monaten
Vielen Dank für die schnelle Antwort, bscu.

Diese CSS-Anweisung existiert bereits => Löst das Problem leider nicht.
Gibt es noch andere Fehlerquellen?

Ich verstehe nicht, warum WooCommerce oder Storefront nicht die passende Größe hat. Beim Upload (in die Mediathek) werden 8 verschiedene Größen generiert und die passende ist nicht dabei?

Grüße
Sina
- Diese Antwort wurde geändert vor 3 Jahren, 2 Monaten von sina2008.
- Diese Antwort wurde geändert vor 3 Jahren, 2 Monaten von sina2008.
Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 2 Monaten

Diese CSS-Anweisung existiert bereits

Eben. Und das ist falsch, also wird das Bild unscharf dargestellt.

Du kannst Bilder problemlos verkleinern, aber wenn du ein kleines Bild mit einer Regel width: 100% vergrößerst, wird das Ergebnis immer matschig aussehen.

Wo kann ich sehen, dass das Bild skaliert wird?

In den Entwickler-Tools deines Browsers: Rechtsklick auf das Bild > Element untersuchen, dann HTML und zugehöriges CSS anschauen und mit der Maus über den Link des Bilds fahren. Dann wird das angezeigt:

(zum Vergrößern anklicken)

Thread-Starter sina2008
(@sina2008)

vor 3 Jahren, 2 Monaten

Danke, da hab ich nicht richtig geschaltet! Ist logisch.

Aber ich verstehe nicht:
Warum werden beim Upload (in die Mediathek) 8 verschiedene Größen generiert und dann ist die passende Größe für das Katologbild (392px × 294px) nicht dabei? Die Größe 324px × 243px, die jetzt größer skaliert werden muss, wurde beim Upload automatisch erstellt.

Ich habe zum Test das Child-Theme deaktiviert und stattdessen Storefront aktiviert. Dann ist die Zielgröße ein wenig kleiner, aber es muss trotzdem skaliert werden und das Ergebnis ist unscharf.

Warum bereitet Storefront beim Upload nicht die passenden Größen vor?
=> Kann ich das irgendwo beeinflussen?

Grüße
Sina

Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 2 Monaten

Das wird im Theme festgelegt:

https://themes.trac.wordpress.org/browser/storefront/3.5.0/inc/woocommerce/class-storefront-woocommerce.php#L60

Die Abmessungen passen auch optimal – für eine Shop-Seite! Du erstellst aber anscheinend eine normale Seite und fügst dann ein Block mit WooCommerce-Produkten ein und dafür sind die Abmessungen nicht ideal.

(zum Vergrößern anklicken)

Thread-Starter sina2008
(@sina2008)

vor 3 Jahren, 2 Monaten

So langsam tauchen wohl die richtigen Puzzleteilchen für mich auf – Danke!

Der Hinweis mit der Shopseite hilft mir weiter!
Thread-Starter sina2008
(@sina2008)

vor 3 Jahren, 2 Monaten
Ich habe mich nun für folgende Lösung entschieden:

1. Ich bleibe dabei, auf der Shop-Seite manuell WooCommerce-Blocks einzusetzen.
=>FÜr mich die einfachste Lösung, Produkte in Kategoriegruppen zusammen zu fassen.

Da ich nur wenige Produkte habe, möchte ich dem User Klicks ersparen und auf der Shopseite gleich alle Produkte innerhalb einer Kategorie anzeigen. Erst alle zur Kategorie „Pferd“, danach alle Prudukte zur Kategorie „Hund“, usw.

Bei der von Storefront vorgegebenen Shopseite finde ich im Customizer keine entsprechende Einstellung für eine solche Ansicht.

2. Design > Customizer > Produktbilder > Nicht zuschneiden
=> Damit erreiche ich, dass die Bilder nicht skaliert werden. Sie sind scharf. Allerdings muss ich alle Produktbilder vor dem Upload in ein einheitliches Verhältnis bringen. Also z. B. alle nur in Querformat oder alle nur in Hochformat oder alle nur quadratisch.

@bscu und @pixolin: Danke für Eure schnelle und hilfreiche Unterstützung!
- Diese Antwort wurde geändert vor 3 Jahren, 2 Monaten von sina2008.
Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 2 Monaten

Dass WooCommerce dafür eigene Shortcodes anbietet, ist dir aber bekannt?

https://docs.woocommerce.com/document/woocommerce-shortcodes/
(mit konkreten Beispielen unter https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-11)

Thread-Starter sina2008
(@sina2008)

vor 3 Jahren, 2 Monaten

Klasse – Danke!

Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 2 Monaten

Gern geschehen. Den Thread habe ich als „gelöst“ markiert.