Unser Game Changer. Hier geht's zu unserer Videomarketing App...

Categories
Grafik & Design News Plugins WooCommerce Wordpress

WooCommerce – Produktbilder richtig einbinden

Heute setze ich mal nicht die WooCommerce Reihe fort, sondern möchte ein kurzes Tutorial zum Thema Produktbilder unter WooCommerce schreiben. Die Idee kommt daher, dass ich beim Stöbern im Netz immer wieder über Schwierigkeiten beim Einbinden von Produktbildern unter WooCommerce stoße. Hier wird von unscharfen Bildern berichtet, obwohl das Ursprungsbild in einer ausgezeichneten Qualität vorliegt. Und in der Tat kann ich über ähnliche Erfahrungen berichten. Allerdings gibt es einen leicht nachvollziehbaren Weg, um diese Schwierigkeiten zu umgehen. Die teilweise schlechte Bildqualität der WooCommerce Produktbilder kommt daher, dass die Bilder von WooCommerce für die verschiedenen Darstellungen runtergerechnet und dann wieder hochskaliert werden.

WooCommerce und die Produktbilder

Aber von Anfang an. Anhand eines Beispiels möchte ich Euch die Vorgehensweise von WooCommerce erläutern. Am besten such Ihr Euch ein eigenes Bild und begleitet die einzelnen Schritte.

Bild für WooCommerce vorbereiten

Wenn Ihr ein Bild gefunden habt, natürlich in guter Qualität und hoher Auflösung, bringt Ihr dies auf ein quadratisches Format. Um die richtige Auflösung zu finden, hab ich erst einmal ein relativ großes Format gewählt, nämlich 800 x 800 Pixel. Dieses speichere ich als JPG und lade es in die WordPress Mediathek hoch. Jetzt binde ich es in meinen Artikel ein, speichere und rufe die Artikelübersicht im Shop auf. Die Qualität ist bescheiden, trotz einer Auflösung von 800 x 800 Pixel. Aber warum?

Warum sind meine Produktbilder so schlecht?

WooCommerce nimmt das Produktbild und speicher dies in 3 verschiedenen Größen ab. Werden die Voreinstellungen beibehalten, sind dies die Größen 150 x 150 Pixel für die Katalogbilder, 300 x 300 Pixel für die einzelnen Produktbilder sowie 90 x 90 Pixel für die Produktvorschaubilder. Finden könnt Ihr diese Einstellungen unter "WooCommerce->Einstellungen->Katalog". Die verschiedenen Bildgrößen werden in der Regel unter "/wp-content/uploads/" gespeichert und erhalten den Zusatz der jeweiligen Auflösung. Eine Datei sieht dann z. B so aus: "euer_dateiname-300x300.jpg". Dies ist soweit auch völlig in Ordnung. Die Schwierigkeit besteht darin, dass diese Auflösungen je nach Theme und verwendeter Bildgröße wieder hochskaliert werden muss. Und dadurch entsteht die schlechte Bildqualität. Um dies zu verdeutlichen, zeige ich Euch einen Auszug meiner Katalogansicht:

WooCommerce Katalogansicht

Wie wir oben gesehen haben, ist die Voreinstellung für die Katalogbilder 300 x 300 Pixel. Entsprechend wird das für diese Ansicht gespeicherte Bild verwendet. Es ist allerdings oft so, dass je nach Theme und Design die wirkliche Bildgröße von dieser Voreinstellung abweicht und das Bild entsprechend skaliert wird. Dies wollen wir für mein Beispiel jetzt prüfen. Hierzu klicke ich mit der rechten Maustaste auf das Bild und wähle (unter Windows) "Grafik-Info anzeigen". Ich erhalte folgendes Resultat:

WooCommerce Produktansicht

Hier könnt Ihr die Ursache erkennen. Das Bild wurde zwar mit einer Auflösung von 150 x 150 Pixel gespeichert, erforderlich ist aber eine Auflösung von 188 x 188 Pixel. Das Bild wurde somit hochskaliert. Und genau dies führt zu einer deutlichen Verschlechterung der Bildqualität! Gleiches mach ich jetzt noch für das Produktbild sowie für das Vorschaubild. Beide Ergebnisse seht Ihr im Anschluss:

WooCommerce Produktbild

WooCommerce Produktbild

WooCommerce Vorschaubild

WooCommerce Vorschaubild

Wie Ihr sehen könnt, haben wir beim Produktbild ein ähnliches Problem. Gespeichert wurde das Bild in einer Auflösung von 300 x 300 Pixel. Für die Darstellung wurde es hochskaliert auf 381 x 381 Pixel. Auch hier ist die Folge eine deutlich sichtbare Qualitätsverschlechterung! Beim Vorschaubild ist alles ok. Allerdings ist mir dies auch nicht mehr so wichtig, da die Vorschaubilder eh zu klein sind, um einen deutlichen Unterschied in der Qualität feststellen zu können.

Anpassung in Woocommerce

Um zukünftig das Hochskalieren zu vermeiden, begeben wir uns in die WooCommerce Einstellungen unter "WooCommerce->Einstellungen->Katalog" und ändern die Vorgaben in den Bildoptionen entsprechend. Bei mir sieht dies dann so aus:

WooCommerce Bildoptionen

Speichern bitte nicht vergessen Bitte bedenkt, dass diese Änderung der Bildoptionen keinen Einfluss auf bereits hochgeladene Bilder hat. Ihr müsst Euch leider die Mühe machen und Eure Bilder erneut hochladen. Weiterhin möche ich noch einmal erwähnen, dass je nach Theme und Design Eure richtigen Einstellungen von meinen abweichen können. Es reicht also nicht, einfach meine Bildoptionen zu übernehmen. Ich hoffe, dieses kurze Tutorial hilft Euch, hervorragende Bilder als Verkaufsunterstützung in WooCommerce einzubinden. Viel Spaß und gutes Gelingen.

[fb_share]
0 0 votes
Article Rating
Abonnieren
Benachrichtige mich bei
guest
14 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Sabine
Sabine
2 Jahre zuvor

Inzwischen haben wir das Jahr 2022 und das Problem ist dasselbe geblieben 😉
Denn leider gibt es bei Woocommerce – Einstellungen keinen Katalog mehr. Dazu findet man im Customizer eine Option „Produktkatalog“. Dort wiederum ist nirgends mehr eine Möglichkeit, die Bildgrößen festzulegen.
Was kann man tun!

Danke für Eure Unterstützung!

Kathi
Kathi
7 Jahre zuvor

Hallo, ich habe ein Problem. Bei mir gibt es den Punkt Katalog nicht.
Also es gibt WooComerce > Einstellungen aber keinen weiteren Punkt mit Katalog.

Martin Leonhardt
8 Jahre zuvor

Hi,

hat bei mir leider nicht geklappt. WooCommerce skaliert das ständig um einiges größer.. ,-(

z.B. http://freiheitenwelt.de/produkt/kilometer-eins-bolivien/

Ich arbeite dran…

Claudia
Claudia
9 Jahre zuvor

kurze Frage: ich hab relativ große Bilder (1400×1050). wieso skaliert woo commerce diese bilder nicht automatisch auf die erforderlichen größen runter sondern beschneidet die? ich möchte ungern alle meine produktbilder (ca. 5000) auf eine kleineres format bringen, damit sie dann in der großansicht pixelig werden-vom aufwand mal ganz abgesehen. oder übersehe ich was?

Claudia
Claudia
9 Jahre zuvor
Reply to  Claudia

danke alles geklärt

Jörg Wortmann
Jörg Wortmann
3 Jahre zuvor
Reply to  Claudia

Hallo Claudia,

ich habe exakt das gleiche Problem und wäre Dir dankbar wenn Du mir sagen könntest wie Du es gelöst hast. Danke und viele Grüße
Jörg

Marcel
9 Jahre zuvor

thank you very much to all.

Melanie
Melanie
10 Jahre zuvor

Vielen Dank für die ausführliche Erklärung, es hat alles super funktioniert. 🙂

Christian
10 Jahre zuvor

Hallo,

erstmal vielen Dank für den Artikel, genau an dem Problem sitze ich auch gerade dran und werde das gleich mal versuchen. Dazu aber noch eine Frage: was macht man, wenn die Bilder nicht quadratisch sondern im Querformat 2:3 verwendet werden sollen?

Noch ein Hinweis: bestehende Bilder müssen nicht unbedingt neu hochgeladen werden. Da gibt es ein Resize Plugin: Resize Image After Upload

Viele Grüsse
Christian

14
0
Would love your thoughts, please comment.x