Ich möchte neue Bilder für den Webshop einpflegen-wie lauten hier die Standardgrößen?

Ich möchte neue Bilder für den Webshop 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 ändere ich den Zeitraum für Vorbestellungen?

      Um sicherzustellen, dass Rechnungen, Küchenbons oder Klebeetiketten für Vorbestellungen erst kurz vor der Zubereitung oder Produktion gedruckt werden, kannst du in den Store-Einstellungen spezifische Druckparameter festlegen. Hier eine detaillierte ...

    • "Kauf auf Rechnung" für den Webshop/App aktivieren und verwenden

      Was Es besteht die Möglichkeit, die Zahlungsmethode "Kauf auf Rechnung" für einzelne Kunden zu aktivieren, damit diese erst nachträglich bezahlen können. Wo Admin: Store > Stores > Bearbeiten > Zahlungsarten > Kauf auf Rechnung > Ja. Admin: Kunde > ...

    • Lieferzeiten (+Fahrermonitor+Deaktivierungsoptionen für Webshop und Lieferportalaccounts)

      Hier hat man die erwartete und die reale Lieferzeit im Überblick. Die Lieferzeit beschreibt die Zeit vom Eintreffen der Bestellung im System bis zur Übergabe des Produktes an den Kunden. Sie wird dem Kunden unter anderem bei der Bestellbestätigung im ...

    • Grundlagen für die Warenwirtschaft

      Bei der Nutzung der Warenwirtschaft ist die Anlage der Produkte etwas komplexer. Damit diese auch einwandfrei funktioniert, sind einige Punkte zu beachten. Um ein Verkaufsprodukt anzulegen, das die einzelnen Zutaten grammgenau aus dem Warenbestand ...

    • 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 ...