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

    • Abweichende Rechnungsadresse im Webshop/App Version 2 aktivieren

      Was Im Webshop und in der App kann eine separate Rechnungsadresse bei Lieferung aktiviert werden, damit Kunden eine andere Rechnungsadresse als die Lieferadresse angeben können, z. B. für Firmenbestellungen. Wo Admin: Storeverwaltung > Stores > ...

    • Startseite im Webshop Version 2

      Was Die Webshop-Startseite zeigt Produktempfehlungen, Startseiten-Gutscheine, Store-Informationen, eine Bewerbung für das Kundenkonto, Favoriten, zuletzt getätigte Bestellungen, Informationen zum Treueprogramm sowie Kacheln für soziale Medien und ...

    • Einstellungen zu Meta Pixel ID (Facebook Pixel ID) im Webshop

      Was Die Facebook Pixel ID ist eine eindeutige Kennung, die deinen Webshop mit deinem Meta-Werbekonto verbindet. Sie dient dazu, das Nutzerverhalten (wie Seitenaufrufe oder Käufe) zu messen und Werbeanzeigen auf Facebook zu optimieren. Wo Admin: ...

    • Wie begrenze ich die Anzahl der eingehenden Bestellungen pro Zeitfenster?

      Kurze Lösung Legen Sie ein Zeitintervall und eine maximale Anzahl an Bestellungen in den Einstellungen fest, um die Auslastung in der Küche zu steuern. Schritte: Loggen Sie sich im SIDES Admin ein und gehen Sie zu Storeverwaltung > Stores. Klicken ...

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