Produktbildergrößen in WooCommerce einstellen

Onlineshops mit WordPress
Wie groß sollen sie sein, die Produktbilder in WooCommerce? Einstellen lassen sich die diversen Größen unter WooCommerce > Produkte > Darstellung

Bildgröße einstellen

Bildgrößen einstellen
Bildgrößen einstellen

WooCommerce kennt drei unterschiedliche Arten von Produktbildern:

  • Katalogbilder
  • Einzelne Produktbilder
  • Produkt-Vorschaubilder

Wichtig: Deine Originalbilder sollten nicht kleiner als dein Zuschnitt sein. Ist das nicht der Fall, dann skaliert WooCommerce die Bilder nämlich hoch, mit Verpixelungs-Effekten!

Bildarten in WooCommerce
Bildarten in WooCommerce
  1. Katalogbilder werde auf der Startseite deines Shops angezeigt
  2. Einzelne Bilder erscheinen am Produkt selbst
  3. Produkt-Vorschaubilder in der Produktgalerie

Leider funktioniert die korrekte Darstellung der Katalog-, Produkt- und Produktvorschaubilder bilder nicht auf Anhieb mit jedem Theme. Manchmal ist es nötig, die Bilder in WordPress neu generieren zu lassen.  Zwei Möglichkeiten stehen zur Verfügung

  • Neu-Generierung via Thumbnail-Plugin
  • Neu-Generierung via CSS
Freunde, Fans und Follower
Die Besucher von Social Media in den Shop lotsen. So läuft das: Freunde, Fans und Follower.

Thumbnails über ein Plugin neu generieren

Vorschaubilder regenerieren
Vorschaubilder regenerieren

Installiere das Plugin Regenerate Thumbnails, um die Bilder nach einer Größenänderung neu darstellen zu lassen. Das Plugin versteckt sich nach der Aktivierung im Menü Werkzeuge. Klicke auf alle Vorschaubilder regenerieren. Hat alles funktioniert, wunderbar! Falls nicht, hilft ein Eingriff via CSS.

Bilder über CSS-Code trimmen

Bilder über CSS-Code trimmen
Bilder über CSS-Code trimmen

Falls die Bilder immer noch zu groß angezeigt werden, hilft nur noch der Eingriff in den CSS-Code.

.woocommerce #primary .images img {
width: auto;
}

Die CSS-Box im Customizer verwenden

CSS im CustomizerFrüher hast du CSS-Anweisungen direkt ins Stylesheet geschrieben, was nicht ganz ungefährlich war, oder mühsam ein Child-Theme angelegt.

Mit WordPress 4.7 hat die CSS-Box in WordPress Einzug gehalten. Gehe im Customizer auf den Menüpunkt Zusätzliches CSS, um die CSS-Box zu öffnen. Gib dann den obigen Code in die Box ein – dort ist der Code auch ohne Kollateralschaden (Theme zerschießen) wieder schnell gelöscht.

Bildern verlängern die Ladezeit

Fotos, Bilder und Grafiken können die Ladezeit von WordPress erheblich verlängern. Achte darauf, die Dateigröße von Bilddateien möglicht klein zu halten.

Ladezeit überprüfen

Gib einfach mal deine URL hier bei Pingdom ein, um die Ladezeiten zu checken. Du wirst schnell feststellen, welche Bilder deiner Performance schaden. Faustegel: Alles über 100kB (=0,1 MB) ist zu fett.

Dateigröße von Bildern verringern

Einstellung der Bildqualität
Veränderung der Dateigröße über die JPEG-Kompression

Jedes Bildbearbeitsprogramm bietet die Möglichkeit zur Verkleinerung einer JPG-Datei. Experimentiere mit Kompressionsraten +/- 50, um die Dateigrößen zu drücken. In diesem Bereich funktioniert die Kompression noch ohne sichtbare Qualitätseinbußen.

Tipp: Kostenlos lassen sich Bilder mit GIMP oder JPEGmini verkleinern.

Vorteile quadratischer Produktbilder

Tipp: Verwende quadratische Produktbilder. Die Vorteile:

  • Umrechnungen von Längen-Breite-Verhältnissen gehören der Vergangenheit an
  • Quadrate lassen sich in jedem Shop leicht anordnen
  • Themewechsel verlaufen unproblematisch
  • Das Quadratformat ist perfekt für die Bildpräsentation auf Instagram