Die meisten Fälle von unscharfen Bildern werden durch das Styling von Themes verursacht, d. h. das Design des Themes hat Bildabmessungen in Pixeln, die möglicherweise nicht mit WooCommerce kompatibel sind.

Aktualisierung ab WooCommerce 3.3 Nach oben

WooCommerce Version 3.3 und höher bietet Unterstützung für die Kompatibilität von Themes mit WooCommerce und Verbesserungen bei der Darstellung von Bildgrößen und beim Zuschneiden. Diese neuen Funktionen bedeuten, dass:

• Unscharfe Bilder, die durch Theme-Inkompatibilität oder überschreibenden Code verursacht werden, nicht mehr auftreten sollten.
• Store-Besitzer können Breite und Höhe ihrer Hauptbilder kontrollieren.
• Die Größe der Miniaturbilder kann automatisch oder manuell angepasst werden.
• Die Bilder, die den Kunden angezeigt werden, sehen standardmäßig immer gut aus, damit sich Ihre Produkte von selbst verkaufen!

Um zu erfahren, wie Sie diese neuen Funktionen nutzen können, gehen Sie zu: Verwalten von Produkten und Hinzufügen von Produktbildern und Galerien.

Andere Lösungen Zurück zum Anfang

Sollten Sie eine Version von WooCommerce vor 3.3 verwenden, empfehlen wir Ihnen, auf die neueste Version zu aktualisieren, um die oben beschriebenen Funktionen zu nutzen.

Wenn Sie aus irgendeinem Grund nicht die neueste Version verwenden möchten oder die Aktualisierung auf 3.3 das Problem nicht behebt, könnte es sein:

• Ihre Bildgrößeneinstellungen sind zu klein.
• Die Originalbilder müssen eine höhere Auflösung haben.

Um dieses Problem zu lösen:

• Die Abmessungen Ihrer Bilder sollten denen Ihres Themes entsprechen oder höher sein.
• Die Originalbilder, die Sie hochladen, sollten mindestens 800 x 800px oder höher sein, damit sie in den meisten Themes funktionieren.

Wir zeigen Ihnen im Video und unten, wie Sie die maximale Bildgröße finden, die Ihr Theme benötigt.

Bildtypen Zurück zum Anfang

• Einzelnes Produktbild: Größtes Bild auf der individuellen Produktdetailseite und bezieht sich auf das Haupt-/Feature-Bild.
• Katalogbilder: Mittelgroßes Bild, das in Produktschleifen verwendet wird, z. B. auf der Shop-Seite, den Produktkategorieseiten, verwandten Produkten, Up-Sells und Cross-Sells.
• Produkt-Thumbnail-Bilder: Kleinstes Bild, das häufig im Warenkorb, in Widgets und (optional) in Galeriebildern unterhalb des einzelnen Produktbildes verwendet wird.

Standardbildabmessungen Nach oben

In WooCommerce Version 3.2x und darunter finden Sie die Einstellungen für Produktbilder unter WooCommerce > Einstellungen > Produkte > Anzeige > Produktbilder. Beachten Sie, dass die erste Zahl die Breite und die zweite die Höhe angibt.

Die Bilder, die Sie hochladen, werden in der Größe an die von Ihnen eingegebenen Werte angepasst. Wenn Ihre Einstellungen beispielsweise 100×100 sind und Sie ein 300×600 großes Bild hochladen, wird es auf 100×200 verkleinert. Sie können Ihre Bilder auch „hart zuschneiden“, wodurch sie unabhängig vom hochgeladenen Rohbild auf die in den Einstellungen angegebene Größe gebracht werden, so dass sie beschnitten und nicht im Maßstab verzerrt werden.

Wenn Sie die Einstellungen nach dem Hochladen von Produktbildern ändern, müssen Sie die Miniaturbilder in WordPress neu generieren, damit die Änderungen übernommen werden. Dazu empfehlen wir die Verwendung des Plugins „Regenerate Thumbnails“.

Ab der WooCommerce-Version 3.3 finden Sie die Einstellungen für Produktbilder im Customizer in WooCommerce > Produktbilder:

Produktbildabmessungen des Themes ermitteln Nach oben

Das von Ihnen gewählte Theme delegiert die maximale Größe eines Bildes, daher müssen Sie die Abmessungen kennen, in denen es sie rendert, um diese in WooCommerce einzustellen.

Katalogbilder Zurück zum Anfang

Bestimmen Sie, wo Ihr Theme die Katalogminiaturen am größten wiedergibt. In einigen Fällen ist dies die Shop-Seite, im Twenty Eleven-Theme ist es die Schleife für verwandte Produkte.

Wenn die Entwicklerwerkzeuge im Browser Ihrer Wahl aktiviert sind, können Sie mit der rechten Maustaste auf das Bild klicken und „Inspect“ oder „Inspect Element“ wählen. So erfahren Sie die Abmessungen des Bildes. Notieren Sie sich diese, da wir sie später verwenden müssen.

In Storefront (oben) werden die größten Katalogbilder mit 213 x 213px gerendert.

Einzelproduktbild Zurück zum Anfang

Wiederholen Sie den Vorgang für das Einzelproduktbild – das größte Bild auf einer Produktseite.

In Storefront wird das größte Einzelproduktbild mit 298 x 298px gerendert.

Produkt-Thumbnail Nach oben

Das kleinste ist wahrscheinlich das Thumbnail in der Produktgalerie. Wiederholen Sie den Inspektionsprozess, um die Abmessungen zu erhalten.

In Storefront wird es mit 43 x 43px dargestellt.

Bildabmessungen anpassen und Thumbnails neu generieren Nach oben

Nun, da alle Thumbnail-Bildgrößen für unser spezifisches Thema bekannt sind, können wir diese neuen Abmessungen zu WooCommerce hinzufügen, um sicherzustellen, dass zukünftige Bildgrößen diese Größe oder größer sind.

Stellen Sie in WooCommerce > Einstellungen > Produkte > Anzeige sicher, dass die maximalen Bildgrößen mindestens so groß sind wie die Abmessungen, die Ihr Theme für diese Miniaturansichten rendert. Speichern Sie dann die Änderungen.

Alle neuen Produktbilder, die hochgeladen werden, haben jetzt Miniaturansichten in diesen Einstellungen und sollten ohne Verzerrung oder Unschärfe angezeigt werden.

Retina-Unterstützung Nach oben

HiDPI-Displays, allgemein bekannt als Retina-Displays, enthalten doppelt so viele Pixel oder mehr als ältere Displays. Um eine pixelgenaue Darstellung auf Retina-Displays zu erreichen, sollten Sie Ihre Miniaturansichten auf die doppelte Größe der vom Thema gerenderten Bilder einstellen. Wenn ein Thema beispielsweise Bilder mit einer Größe von 80 x 80 Pixel rendert, sollten sie 160 x 160 Pixel groß sein.