Ich möchte neue Bilder einpflegen - wie lauten hier die Standardgrößen?

Ich möchte neue Bilder einpflegen - wie lauten hier die Standardgrößen?

Hier eine Auflistung, jeweils in Breite x Höhe angegeben

  1. Warengruppenbilder: 2000 x 500 px (72dpi)
  2. App-Startbild: 640 x 720 px (72dpi)
  3. Favicon: 16 x 16 px
  4. Produktbild: 500 x 350 px (72dpi)
  5. Logo für Bondruck: mind. 250 x 250 px (72dpi) (kann jedoch gerne größer sein, da der Upload im Anschluss durch SIDES vorgenommen werden muss und durch uns entsprechend skaliert werden kann)

SOT (Selbstbedienungsterminal)

  1. Bild für die Startseite: 1920 x 1080 px
  2. Produktbilder: 500 x 350 px

Webshop Version 1

  1. Banner - Mobile: 415 x 130 px
  2. Banner - Desktop: 1920 x 340 px
  3. Produktbilder: 500 x 350 px

Webshop Version 2 - Upload von Produktbildern in unseren eCommerce-Lösungen (Webshop, SOT, POS & Portale)

Diese Empfehlungen sollen sicherstellen, dass die Produktbilder auf allen Plattformen professionell aussehen und gleichzeitig eine hohe Ladegeschwindigkeit gewährleisten.

Webshop Version 2

  1. Empfohlene Auflösung Produktbilder: 1920 x 1080 px (Pixel).
    1. Bildformat Produktbilder: 16:9
    2. Hauptinhalt zentriert, um auf mobilen Geräten in quadratischen Kacheln sichtbar zu bleiben.
    3. Dateiformate: JPG, WEBP, PNG (bei Transparenz).
    4. Maximale Dateigröße: Unter 500 KB, maximal 1 MB für PNG.
    5. Photoshop-Vorlage für die Produktbilder ist im Anhang zur einfachen Anpassung und Speicherung der Bilder im optimalen Format.
  2. Banner-Startseite mit Inhalten im Kachellayout - Web: 1920 x 640 px 
  3. Banner-Startseite mit Inhalten im Kachellayout - Mobile: 600 x 670 px

Ausführliche Erklärung für die Produktbilder

Bildformat & Ratio

Für den Upload von Produktbildern im Webshop empfehlen wir folgende Richtlinien:
  1. Empfohlene Auflösung Produktbilder: 1920 x 1080 Pixel (diese Bildgröße stellt sicher, dass Ihre Produkte auf allen Endgeräten in hoher Qualität dargestellt werden)
  2. Empfohlene Bild-Ratio Produktbilder: 16:9 (Breitbildformat)

Zentraler Bildinhalt

  1. Der Hauptinhalt des Bildes sollte sich zentral in der Mitte befinden.
  2. In verschiedenen Layouts, insbesondere im mobilen Webshop, werden die Artikelbilder in quadratischen Kacheln angezeigt.
  3. Das bedeutet, dass die Seiten des Bildes in diesen Layouts möglicherweise abgeschnitten werden.
  4. Ein zentrierter Hauptinhalt gewährleistet, dass das Produkt klar sichtbar bleibt, selbst wenn ein quadratischer Ausschnitt verwendet wird.
Das horizontale Bildformat mit Produktfokus in der Bildmitte stellt sicher, dass ihr Produktbild sowohl in einem horizontalen, als auch quadratischen Bildausschnitt funktioniert (variiert je nach gewähltem Layout).




Beispiele

Beispiel quadratischer Bildausschnitt
Beispiel horizontaler Bildausschnitt




Dateiformate

Für den Upload von Bildern bieten wir folgende Dateiformate an:
  1. JPG (JPEG)
    1. Standardformat für Bilder ohne Transparenz.
    2. Ideal für hochauflösende Bilder mit guter Kompression, ohne zu viel Qualität zu verlieren.
  2. WEBP
    1. Moderneres Format, das kleinere Dateigrößen bei gleichbleibend hoher Bildqualität ermöglicht.
    2. Dieses Format kann verwendet werden, wenn Transparenz im Bild erforderlich ist (z. B. freigestellte Produktbilder).
    3. Unterstützt sowohl verlustfreie als auch verlustbehaftete Kompression und sollte für optimale Ladezeiten bevorzugt werden.
  3. PNG
    1. Dieses Format wird verwendet, wenn Transparenz im Bild erforderlich ist (z. B. freigestellte Produktbilder).
    2. Hinweis: PNG-Dateien sind in der Regel größer, weshalb sie nur bei Bedarf (z. B. Transparenzen) verwendet werden sollten.

Dateigröße

Die optimale Dateigröße für ein Produktbild sollte eine Balance zwischen Bildqualität und Ladegeschwindigkeit finden.
  1. Empfohlene Dateigröße: Unter 500 KB pro Bild.
  2. Bei Verwendung von JPG oder WEBP sollte die Dateigröße optimiert werden, um eine schnelle Ladezeit der Seite sicherzustellen.
  3. PNG-Dateien können in einigen Fällen größer sein, insbesondere wenn Transparenz benötigt wird. Eine maximale Dateigröße von 1 MB sollte jedoch nicht überschritten werden.

Photoshop-Vorlage

Für eine einfache und korrekte Formatierung der Bilder bieten wir eine Photoshop-Vorlage (PSD) an, die die folgenden Parameter enthält:
  1. Voreingestelltes Bildformat: 1920 x 1080 Pixel (16:9)
  2. Eine zentral platzierte Hilfslinie zur optimalen Positionierung des Produkts.
Diese Vorlage hilft deine Bilder schnell und einfach auf das richtige Format zuzuschneiden und in der optimalen Qualität für den Webshop abzuspeichern.
 
Die Photoshop-Vorlage findest du ganz unten im Anhang.


Kurzes Tutorial zum Anlegen und Speichern der Produktbilder

Im Video ist klar zu erkennen, dass es wichtig ist, den Bildinhalt mittig zu zentrieren.





    • Related Articles

    • Wie erstelle ich einen Artikel?

      Hinweis: Dieses FAQ nutzt die neue Navigation. Mehr erfahren? Klicke hier. Kurze Lösung Öffne „Artikel hinzufügen“, fülle die Pflichtfelder aus (Nummer, Name, Warengruppe, Preis) und klicke auf „Speichern“. Schritte Melde dich bei der SIDES Admin an ...

    • Wie kann ich Zahlarten ändern oder neue Zahlarten hinzufügen?

      Meistens ist die Zahlart in der Administration schon vorhanden, muss allerdings noch von dir für den Store aktiviert werden. Dies kannst du innerhalb der Storeeinstellungen im Reiter „Zahlarten“ machen. Die grundsätzliche Sichtbarkeit der Zahlarten ...

    • Überarbeite technische Infrastruktur, neue Benutzeroberfläche und Lizenzmanagement

      In den kommenden Wochen und Monaten stellen wir Administration und Kasse Schritt für Schritt auf ein neues, einheitliches Design um. Gleichzeitig bringen wir Erweiterungen, die SIDES noch benutzerfreundlicher machen. Nachfolgend findest du die ...

    • Anzahl kostenloser Artikel wie bspw. Stäbchen

      Was Auf Wunsch kann im Webshop ein mehrstufiger Checkout- bzw. Kassenvorgang eingerichtet werden, damit die Kunden einen kostenlosen Artikel wie z. B. Sushi-Stäbchen auswählen können. Wo Admin: Anreize > Banner/Empfehlungen > Banner hinzufügen. Dazu ...

    • Wie errechnet sich die Lieferzeit, die im Webshop angezeigt wird?

      Wenn die automatisch berechnete Lieferzeit (!) aktiviert/ausgewählt ist, wird diese auch im Webshop angezeigt. Sie besteht aus der eingestellten Lieferzeit aus den spezifischen Store-Einstellungen (welche jedoch auch auf dem Dashboard eingestellt ...