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

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

Webshop, SOT, POS und Portale

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

Die Auflistung ist jeweils in Breite x Höhe angegeben:
  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
    1. Web: 1920 x 640 px 
    2. Mobile: 600 x 670 px

  3. App-Startbild: 640 x 720 px (72dpi)

  4. Favicon: 16 x 16 px oder 32 x 32 px



Ausführliche Erklärung für die Produktbilder

Bildformat und 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.



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

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

    • Neuer Warenkorb im Webshop

      Was Der neue Warenkorb im Webshop sorgt für ein moderneres und übersichtlicheres Bestellerlebnis mit Funktionen wie eine dauerhafte sichtbare Bestellschaltfläche, Treueprogramme, Produktempfehlungen und die Hervorhebung des Mindestbestellwerts. Wo ...

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