Support » WooCommerce » Bilder unscharf

  • Gelöst ahofmann

    (@ahofmann)


    Hallo Zusammen,
    leider haben mir die bisherigen Beiträge nicht weiter geholfen und das Internet konnte mir auch noch zu keiner Lösung weiter helfen.
    Deshalb versuche ich mein Glück hier:

    Ich erstelle derzeit einen Online-Shop, Produkte und Bilder sind bereits alle hinzugefügt.
    Leider werden die Bilder im Katalog unscharf angezeigt, auf den einzelnen Produktseiten sind die Bilder scharf.

    Die Bildeinstellungen unter Einstellungen > Medien habe ich bereits in unterschiedliche Werte verändert aber bisher ohne Erfolg.

    Die hinzugefügten Bilder haben alle eine hohe Auflösung.

    Ich verwende das Theme OceanWP.

    Ich freue mich, wenn mir einer weiterhelfen kann.

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Moderator Bego Mario Garde

    (@pixolin)

    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/

    Thread-Ersteller ahofmann

    (@ahofmann)

    Erst einmal vielen Dank für die Antwort.

    Es ist noch eine Dummy-Domain, aber um die Seite geht es:

    http://s711689627.online.de/

    Ich habe hier kein Elementor-Widget, es werden direkt die Shop-Kategorien angezeigt.
    Erst ab der dritten Ebene werden die Bilder unscharf, bei den Kategorien sind die Bilder nicht alle unscharf.

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

    • Diese Antwort wurde geändert vor 1 Woche, 4 Tage von ahofmann.
    • Diese Antwort wurde geändert vor 1 Woche, 4 Tage von ahofmann.
    Moderator Bego Mario Garde

    (@pixolin)

    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.

    Thread-Ersteller ahofmann

    (@ahofmann)

    Ich meinte damit ab da, wo die Produkte angezeigt werden, wie z.B. in diesem Link_

    http://s711689627.online.de/produkt-kategorie/t-shirt-polos/rundhals/

    Moderator Bego Mario Garde

    (@pixolin)

    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?

    Thread-Ersteller ahofmann

    (@ahofmann)

    Ok das ist komisch.

    Cache ist geleert, ohne Erfolg.

    Bleiben wir bei der Frau mit orangenem Rundhals T-Shirt. Das Bild ist in WordPress mit 1707 auf 2560 Pixel in den Medien hochgeladen wurden.

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

    und ich weiß nicht woran es liegt…

    Moderator Bego Mario Garde

    (@pixolin)

    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%;
    }
    Thread-Ersteller ahofmann

    (@ahofmann)

    Ja ich verstehe das ja, dass wenn es hochskaliert wird unscharf wird.

    Wenn ich Box einstelle, wird ja das Bild autoamtisch kleiner und es ist scharf zu sehen.
    Nur ich verstehe nicht, wieso ich ein Bild in hoher Auflösung hochlade, wenn es am Ende eh nur in 300 x 360 Pixel dargestellt wird und es dann bei größeren Monitoren hochskaliert wird.

    Aber wenn es nicht änderbar ist mit meinen Vorstellungen, dann ist das so, dann muss ich nach anderen Lösungen suchen.

    Trotzdem vielen herzlichen Dank für deine ganzen Mühen!

    Moderator Bego Mario Garde

    (@pixolin)

    … 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 1 Woche, 4 Tage von Bego Mario Garde. Grund: Nachtrag
    Thread-Ersteller ahofmann

    (@ahofmann)

    Kann möglich, mein Vater und ich sind ganz neu auf dem Gebiet und tasten uns noch an das ganze ran. Es ist unser erster Online-Shop und steigern kann man sich ja immer. 😉

    Vielen Dank für die ganzen Infos. Ich werde mich da die Tage mal einlesen und es ausprobieren!

    Trotzdem vielen lieben Dank für die ganze Hilfe!! 🙂

    • Diese Antwort wurde geändert vor 1 Woche, 4 Tage von ahofmann.
    • Diese Antwort wurde geändert vor 1 Woche, 4 Tage von ahofmann.
    Moderator Bego Mario Garde

    (@pixolin)

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

    Thread-Ersteller ahofmann

    (@ahofmann)

    Gar kein Problem. 😉

    Ich setze den Beitrag dann als gelöst, vielen Dank!

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