Bilder unscharf

Ohne URL zur Website können wir uns das nicht einmal anschauen. Ich vermute aber, dass du ein Elementor-Widget mit WooCommerce-Produkten eingefügt hast? Dann wäre es besser, wenn du die Shortcodes verwendest, die WooCommerce zur Verfügung stellt. Wir hatten das in diesem Thread bereits angesprochen:

https://de.wordpress.org/support/topic/woocommerce-block-liefert-unscharfe-katalogbilder/

Erst ab der dritten Ebene werden die Bilder unscharf, …

Link zum Beispiel?

Ich habe mir das mit den Shortcodes angeschaut, aber irgendwie verstehe ich nicht, welcher davon mir helfen soll.

Mit einem Shortcode wie [products limit="8" columns="4" category="hoodies, tshirts" cat_operator="AND"] kannst du auf einer beliebigen Seite ein Produkraster ausgeben. Das war als Alterantive gedacht, wenn du bisher Elementor verwendet hast, um Produktkategorien darzustellen. Hast du nicht, konnte ich mir mit der URL zur Website ansehen, hat sich erledigt.

Ich kann das nicht reproduzieren und sehe auf der genannten Seite keine Fotos, die unscharf wirken.

Das Bild „Frau mit orangem Rundhals-T-Shirt“ liegt in einer Auflösung 300 × 360 Pixel vor und wird in meinem Browser kleiner, mit einer Auflösung von 204 × 245 Pixel dargestellt – also verkleinert. Bilder werden eigentlich erst unscharf, wenn sie hochskaliert werden, dieses Bild also z.B. mit 417 × 500 Pixeln dargestellt würde.

Hast du mal den Browser-Cache geleert?

Wird in dem Katalog dargestellt mit 300 x 360 und in meinem Browser skaliert zu 415px × 498px und ist deswegen unscharf.

Wie gesagt: sobald ein Bild hochskaliert wird, wird es unscharf. Wenn du an einem 27″-Monitor sitzt, sieht die Website anders aus, als auf meinem MacBook mit 12″-Display. Wenn du das Plugin Ocean Extra installierst und im Customizer unter Allgemeine Optionen > Allgemeine Einstellungen die Ansichtsbreite auf „weit“ stellst, wird auf großen Bildschirmen hochskaliert. Probier doch mal aus, wie die Darstellung ausfällt, wenn du statt dessen „Box“ auswählst.

Alternativ könntest du vorgeben, dass die Bilder mit maximal 110% Größe ausgegeben werden dürfen:

.woo-entry-image-main, .woo-entry-image-secondary {
    max-width: 110%;
}

… wenn es am Ende eh nur in 300 x 360 Pixel dargestellt wird und es dann bei größeren Monitoren hochskaliert wird.

Es gibt da so Momente in denen einem klar wird, dass das eingesetzte Theme doch nicht so brilliant ist. Dies könnte so ein Moment sein. 😀

Nein, Spaß beiseite – welche Bildgrößen im Template verwendet werden, gibt das Theme vor: https://themes.trac.wordpress.org/browser/oceanwp/2.0.2/woocommerce/owp-archive-product-thumbnails.php#L40 Die Bildgröße shop_catalog wird wiederum von WooCommerce vorgegeben: https://plugins.trac.wordpress.org/browser/woocommerce/trunk/includes/class-woocommerce.php#L671 wobei die Bildgröße hier ausgelesen wird: https://plugins.trac.wordpress.org/browser/woocommerce/trunk/includes/class-woocommerce.php#L658

Der Kommentar dazu lautet
As of 3.3, image sizes can be registered via themes using add_theme_support for woocommerce and defining an array of args. If these are not defined, we will use defaults. This is handled in wc_get_image_size function.

… also verlässt sich das Theme offenbar auf eine irgendwann mal definierte Standardgröße und wenn du dann an einem großen Bildschirm sitzt, wird hochskaliert und das Bild unscharf.

Nachtrag: Unter https://docs.woocommerce.com/document/woocommerce-theme-developer-handbook/#section-7 wird ein Beispiel gezeigt, wie du mit einem Code Snippet (kannst du mit Code Snippets hinzufügen) die Bildgröße vorgeben kannst. Das betrifft dann nur Bilder, die du nach der Änderun hochlädst. Du kannst aber aber bereits vorhandene Bilder mit Regenerate Thumbnails neu skalieren lassen. (Backups machen!)

• Diese Antwort wurde geändert vor 3 Jahren, 2 Monaten von Bego Mario Garde. Grund: Nachtrag

Ähm, ja, … Sorry, ich hatte mich da jetzt etwas hinreißen lassen. 😉