Wer einen Shopware Shop betreiben möchte in dem zahlreiche Produkte mit vielen Bildern eingebunden werden, der muss sich vorab über einige Dinge Gedanken machen. In diesem kurzen Beitrag wollen wir auf diese Punkte eingehen.
Shopware Produktbilder – Auflösung und Größe
Die Produktbilder müssen bevor sie im Shop hochgeladen werden können sofern nicht schon geschehen, auf einige wichtige Eigenschaften geprüft werden. Auflösung für Web: 72 dpi – Die Auflösung der Bilder sollte nicht 300 dpi sondern 72 dpi betragen. Ersteres wird für den Druck verwendet letzteres für die digitale Verwendung, beispielsweise in einem Online-Shop oder auf einer Webseite.
Maximale Breite – 2500 px – Die Bildmaße sollten in der Breite 2500px nicht überschreiten sofern Sie es nicht übertreiben wollen oder 90% Ihrer Kunden Riesen-Retina Bildschirme verwendet und die Bilder über die volle Breite angezeigt werden. Bei Shopware selbst wurde mir geraten 4000px Breite PNG Dateien zu verwenden, um insbesondere in den Einkaufswelten ein gutes Ergebnis zu erhalten.
Shopware Produktbilder – Speicherung für Web
Speicherung für Web – Photoshop bietet die Funktion Für Web speichern an.
Für Web speichern in Photoshop
Für Web speichern in Photoshop Elements
Folgende Shortcuts führen einen zur Für Web speichern Einstellung:
(Win) —-> Strg + Alt + Umschalt + S
(Mac) —-> Befehlstaste + Wahltaste + Umschalt + S
Ansonsten gibt es auch noch praktische Tools wie jpegmini oder tinypng mit denen man seine Bild-Dateien minifizieren kann.
Korrekte Dateiformate – Es sollten ausschließlich .jpg und / oder .png Dateien verwendet werden.
SEO optimierte Dateinamen
– Es dürfen keine Leerzeichen im Dateinamen vorkommen.
– Es dürfen keine Umlaute (ö,ä,ü) im Dateinamen vorkommen.
– Es dürfen keine Sonderzeichen im Dateinamen vorkommen.
Alle Dateien im Shop sollten nach einem wiedererkennbaren Muster benannt werden. Das könnte so aussehen:
kategoriename-produktname-var1-var2-var3.jpg
Würde man dieser Vorlage folgen sähe der Dateiname einer Hundejacke, mit dem Produktnamen Rom, für Rüden (Variante 1:Geschlecht) in blau (Variante 2: Farbe) und der Größe S (Variante 3: Größe) folgendermaßen aus:
hundejacke-rom-rueden-blau-s.jpg
Gibt es das Modell in den 5 Größen von XS – XL ergäben sich folgende Dateinamen:
hundejacke-rom-rueden-blau-xs.jpg
hundejacke-rom-rueden-blau-s.jpg
hundejacke-rom-rueden-blau-m.jpg
hundejacke-rom-rueden-blau-l.jpg
hundejacke-rom-rueden-blau-xl.jpg
Gäbe es das Modell Rom auch für Weibchen hätte man folgende Dateinamen:
hundejacke-rom-weibchen-blau-xs.jpg
hundejacke-rom-weibchen-blau-s.jpg
hundejacke-rom-weibchen-blau-m.jpg
hundejacke-rom-weibchen-blau-l.jpg
hundejacke-rom-weibchen-blau-xl.jpg
hundejacke-rom-rueden-blau-xs.jpg
hundejacke-rom-rueden-blau-s.jpg
hundejacke-rom-rueden-blau-m.jpg
hundejacke-rom-rueden-blau-l.jpg
hundejacke-rom-rueden-blau-xl.jpg
Für den Fall, dass es pro Variante mehrer Fotos gibt kann man am Ende eine Zahl dranhängen wie in diesem Beispiel wo einige Varianten 2 oder 3 verschiedene Bilder (hier in kursiv) haben.
hundejacke-rom-weibchen-blau-xs.jpg
hundejacke-rom-weibchen-blau-xs-2.jpg
hundejacke-rom-weibchen-blau-xs-3.jpg
hundejacke-rom-weibchen-blau-s.jpg
hundejacke-rom-weibchen-blau-m.jpg
hundejacke-rom-weibchen-blau-m-2.jpg
hundejacke-rom-weibchen-blau-l.jpg
hundejacke-rom-weibchen-blau-xl.jpg
hundejacke-rom-rueden-blau-xs.jpg
hundejacke-rom-rueden-blau-xs-2.jpg
hundejacke-rom-rueden-blau-xs-3.jpg
hundejacke-rom-rueden-blau-s.jpg
hundejacke-rom-rueden-blau-m.jpg
hundejacke-rom-rueden-blau-m-2.jpg
hundejacke-rom-rueden-blau-l.jpg
hundejacke-rom-rueden-blau-xl.jpg
Die optimierte Benennung der Dateien bringt folgende Vorteile mit sich:
- Die Bilder lassen sich auf dem Rechner besser finden
- Google erkennt anhand des Dateinamens die Inhalte
- Die Suche in der Mediathek des Shops wird signifikant erleichtert
Wie benennt ihr eure Bild-Dateien? Mit System, ohne System? Mal so, mal so? Schreibt es uns in die Kommentare und abonniert unseren Newsletter!
Generell Richtig, aber das würde bedeuten das jeder auch jedes Bild manuell bearbeiten müsste. Möglich für kleine Shops.
Wie machst Du das bei Shops mit 50000 Produkten?
Es gibt Systeme die dabei helfen. Z.B. PimCore. Ein Produkt Management System das durch Schnittstelle mit Shopware verbunden wird.
Generell kann Google auch Metadaten auslesen, dies kann man automatisieren und ist bei großen Shops ein muss!
Für Entwickler : Verwendet anstatt von img elements das picture Element mit verschiedenen Sourcen für verschiedene Geräte, nur so kann auch ein Ultraschneller Shopware Shop entstehen.
Außerdem: Auf Individualität achten. Shops aufzubauen die verkaufen liegt nicht nur an den guten Bildern!
Hallo Andreas,
vielen Dank für deinen lehrreichen Kommentar. Sicher hast du Recht, dass es bei Shops mit einem Bildinventar von 50.000 Dateien nicht sonderlich praktikabel ist Dateien von Hand zu benennen. Bei dem Beispiel mit den Hundemantel-Namen war es auch ein Shop mit unter 100 Produkten. Produkt-Info-Management Systeme sind grundsätzlich auch ein spannendes Thema das wir bald mal thematisieren sollten.
Das mit dem picture Element ist aber so ne Sache, wir haben das bei unserem Super Mega Slider zum Beispiel bewußt nicht gemacht, weil die wenigstens wissen, wie man die Thumbnail Größen für unterschiedliche Formate korrekt anlegt was darin resultiert dass die meisten Bilder in Einkaufswelten (zumindest in SW 6) unscharf angezeigt werden. Da bringt es dann auch nicht viel, wenn das unscharfe Bild schnell geladen wird. Ansonsten definitiv aber auch ein wichtiger Tipp.
Herzliche Grüße,
Atilla