Formate und Optimierung von Bildern für den Online-Shop

Um Bilder in deinem Online-Shop effizient zu nutzen, ist es wichtig, die optimalen Formate, Größen und Auflösungen für verschiedene Elemente der Website zu berücksichtigen. Dieser Leitfaden bietet dir Empfehlungen zur Verwendung von Bildern in verschiedenen Bereichen deines Shops, um eine schnelle Ladezeit und eine hohe Anzeigequalität sicherzustellen.

  1. Hochladen und Optimieren von Produktbildern
  • Auflösung: Für die Webnutzung reicht eine Auflösung von 72 PPI. Die optimale Bildgröße auf der langen Seite liegt zwischen 1500 und 2500 Pixeln.
  • Größe: Verwende quadratische (z. B. 1000x1000 Pixel) oder rechteckige (z. B. 1200x800 Pixel) Bilder für eine gute visuelle Wahrnehmung.
  • Dateiformat: Für Bilder, die Transparenz erfordern, verwende PNG. Für kleinere Dateigrößen und schnelleres Laden - JPEG.
  • Tipp: Versuche, die Dateigröße auf 1-2 MB pro Bild zu begrenzen, um eine schnelle Seitenladezeit zu gewährleisten.
  1. Bilder auf Inhaltsseiten
  • Bilder im Text: 72 PPI, mit einer Breite von 600 bis 800 Pixeln. Diese Größe eignet sich ideal für die Integration in Textblöcke.
  • Bannerbilder: Wähle **eine Breite ** von 1200 bis 2000 Pixeln und eine Höhe von 400 bis 600 Pixeln für Ausdruckskraft und Schärfe.
  • Dateiformat: JPEG ist für kleinere Dateigrößen geeignet, während PNG für Bilder mit Transparenz oder hoher Detailgenauigkeit verwendet werden sollte.
  1. Verwaltung von Dateien und Bildern
  • Größentabellen und Anleitungen mit Bildern: Stelle sicher, dass die Auflösung 72 PPI beträgt. Die Breite sollte je nach Art des Inhalts zwischen 800 und 1500 Pixeln liegen.
  • Diagramme und Schemata: Eine Mindestbreite von 1000 Pixeln sorgt für eine klare Darstellung der Details.
  • Format: Verwende PDF für Textdokumente, PNG für klare Diagramme und Schemata und JPEG für normale Bilder.
  1. Medienelemente auf der Startseite
  • Bilder mit Text und Diashows: Halte eine Breite von 1200 bis 1600 Pixeln und eine Höhe von 400 bis 800 Pixeln für dynamische Medienelemente.
  • Spalten mit Bildern und Galerie: Standardbreiten von 600 bis 1000 Pixeln sorgen auf allen Geräten für eine hervorragende Bilddarstellung.
  • Video: Verwende ein Seitenverhältnis von 16:9 und eine Qualität von mindestens 720p bei der Integration mit YouTube oder Vimeo.
  1. Logos und kleine Elemente
  • Logo im Kopfbereich der Website: Verwende 72 PPI. SVG ist das bevorzugte Format für Vektorgrafiken. Die Größe sollte zwischen 200 und 400 Pixeln in der Breite und 50 und 100 Pixeln in der Höhe liegen.
  • Favicon und Vorschauen für soziale Netzwerke: Ideal sind Größen von 32x32 Pixeln (PNG-Format) für Favicons und 1200x630 Pixel für soziale Vorschauen.
  • Tipp: Minimiere den Leerraum um Logos, um ein ordentliches Aussehen und schnelle Darstellung zu gewährleisten.
  1. Logo auf Belegen
  • Breite: Dein Logo auf Belegen sollte nicht breiter als 512 Pixel sein.
  • Format: Verwende PNG mit transparentem Hintergrund.
  • Maximale Dateigröße: Begrenze die Dateigröße auf 1 MB, um Verzögerungen beim Drucken zu vermeiden.

Wenn du diesen Empfehlungen folgst, sicherst du eine hervorragende Bildqualität auf deiner Website, was das Einkaufserlebnis der Kunden verbessert und die Effektivität deines Online-Shops steigert.