Bilder werden hochgeladen

Diese Seite wurde gedruckt um Apr 25, 2024. Die neueste Version findest du unter https://help.shopify.com/de/manual/online-store/images/theme-images.

Du kannst verschiedene Arten von Bildern verwenden, z. B. dein Unternehmenslogo, Produktbilder, Slideshows, Banner und Bilder für Blog-Beiträge. Du kannst deine Bilder anpassen, indem du sie zuschneidest und die Größe änderst. Du kannst deine Medieneinstellungen im Theme anpassen, um den Rand oder den Schatten bei allen Medien zu ändern, die in deinem Shop angezeigt werden.

Um Bilder in deinem Onlineshop genau so anzuzeigen, wie du sie anzeigen möchtest, musst du das richtige Bildseitenverhältnis verwenden.

Auf dieser Seite

Ein Bild im Theme-Editor hochladen

Du kannst Bilder im Theme-Editor zu deinem Theme hinzufügen. Du kannst Bilder auch auf der Seite Dateien deines Shopify-Adminbereichs hochladen. Mehr Informationen findest du unter Upload von Dateien auf deine Website.

Schritte:

  1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
  2. Klicke neben dem Theme, das du anpassen möchtest, auf Anpassen.
  3. Wähle über das Dropdown-Menü die Vorlage aus, die du bearbeiten möchtest.
  4. Klicke in der Theme-Editor-Seitenleiste auf den Abschnitt oder Block, dem du ein Bild hinzufügen möchtest.

  5. Klicke auf Bild auswählen und führe dann einen der folgenden Schritte aus:

    • Um ein Bild von deinem Computer hochzuladen, klicke auf Hochladen.
    • Um ein kostenloses Bild aus Burst zu verwenden, klicke auf Kostenlose Bilder durchsuchen.

  6. Klicke auf ein Bild, um eine Vorschau des Bildes in deinem Theme anzuzeigen. Wenn du ein passendes Bild gefunden hast, klicke auf Auswählen.

  7. Klicke auf Speichern.

Ein Bild mithilfe von Metafeldern hinzufügen

Wenn du Metafelder für deine Bilder eingerichtet hast, kannst du mithilfe der dynamischen Quellauswahl ein Bild hinzufügen. Weitere Informationen zu Metafeldern und unterstützten Bildformaten findest du unter Metafeld-Inhaltstypen und -werte.

Bild-Banner

Du kannst Bildbanner mit den folgenden Elementen erstellen:

  • ein oder zwei Bilder
  • Text
  • eine Aktionsschaltfläche

Auf Desktopcomputern werden Bannerbilder nebeneinander angezeigt. Da dieses Format nicht für Mobilgeräte geeignet ist, kannst du deine Bildbanner-Bilder stapeln, indem du in den Einstellungen für das Bildbanner-Theme die Option Bilder für Mobilgeräte stapeln auswählst. Weitere Informationen zu Bildbannern und Slideshows findest du unter Best Practices für Slideshows und Bildbanner.

Einen Fokuspunkt auf einem Theme-Bild festlegen

Du kannst Fokuspunkte verwenden, um den wichtigsten Teil eines Bildes im Theme deines Onlineshops zu definieren. Wenn du einen Fokuspunkt auf einem Bild festlegst, machst du ihn zum fokussierten Bereich. Fokuspunkte erscheinen immer im Rahmen, auch wenn dein Theme das Bild zuschneidet, um es an das Layout anzupassen. Fokuspunkte geben dir mehr Kontrolle darüber, wie dein Bild angezeigt wird, wenn Themes unterschiedliche Seitenverhältnisse verwenden und unterschiedliche Bildschirmgrößen genutzt werden.

Du kannst nur einen Fokuspunkt pro Bild haben, aber du kannst ihn jederzeit ändern oder entfernen.

Das Einrichten eines Fokuspunkts ist in den folgenden Versionen von kostenlosen Shopify-Themes verfügbar:

  • Craft Version 5.0.0 oder höher
  • Crave Version 5.0.0 oder höher
  • Colorblock Version 3.0.0 oder höher
  • Dawn Version 7.0.0 oder höher
  • Refresh Version 2.0.0 oder höher
  • Ride Version 3.0.0 oder höher
  • Sense Version 5.0.0 oder höher
  • Studio Version 4.0.0 oder höher
  • Taste Version 4.0.0 oder höher

Wenn du ein Theme eines Drittanbieters verwendest, prüfe in der Dokumentation des Themes, ob es Fokuspunkte unterstützt.

Einen Fokuspunkt zu einem Bild hinzufügen

Du kannst im Abschnitt Dateien und in deinem Theme-Editor einen Fokuspunkt zu einem Bild hinzufügen. Wenn du einen Fokuspunkt zu einem Bild hinzufügst und das Bild dann an mehreren Stellen nutzt, wird jedes Mal derselbe Fokuspunkt verwendet.

Du kannst einen Fokuspunkt nur zu Theme-Bildern hinzufügen. Du kannst keinen Fokuspunkt zu Produkt-, Blog- oder Kategoriebildern hinzufügen.

Schritte:

  1. Klicke im Theme-Editor auf einen Abschnitt oder Block mit einem Bild.
  2. Klicke auf dem Bild auf Bearbeiten.
  3. Klicke auf Fokuspunkt hinzufügen.
  4. Klicke und ziehe den blauen Kreis zurecht oder klicke auf den wichtigsten Teil des Bildes, um den Fokuspunkt festzulegen.
  5. Klicke auf Fertig.

Schritte:

  1. Tippe im Theme-Editor auf einen Abschnitt oder Block mit einem Bild.
  2. Tippe auf dem Bild auf Bearbeiten.
  3. Tippe auf Fokuspunkt hinzufügen.
  4. Tippe auf den wichtigsten Teil des Bildes, um den Fokuspunkt festzulegen.
  5. Tippe auf Fertig.

Schritte:

  1. Tippe im Theme-Editor auf einen Abschnitt oder Block mit einem Bild.
  2. Tippe auf dem Bild auf Bearbeiten.
  3. Tippe auf Fokuspunkt hinzufügen.
  4. Tippe auf den wichtigsten Teil des Bildes, um den Fokuspunkt festzulegen.
  5. Tippe auf Fertig.

Fokuspunkt entfernen

Schritte:

  1. Klicke im Theme-Editor auf einen Abschnitt oder Block mit einem Bild.
  2. Tippe auf dem Bild auf Bearbeiten.
  3. Klicke auf Fokuspunkt entfernen.
  4. Klicke auf Fertig.

Schritte:

  1. Tippe im Theme-Editor auf einen Abschnitt oder Block mit einem Bild.
  2. Tippe auf dem Bild auf Bearbeiten.
  3. Tippe auf Fokuspunkt entfernen.
  4. Tippe auf Fertig.

Schritte:

  1. Tippe im Theme-Editor auf einen Abschnitt oder Block mit einem Bild.
  2. Tippe auf dem Bild auf Bearbeiten.
  3. Tippe auf Fokuspunkt entfernen.
  4. Tippe auf Fertig.

Bildformate

Shopify unterstützt die folgenden Bildformate:

  • JPEG
  • Progressives JPEG
  • PNG
  • GIF
  • HEIC
  • WebP

Wann sollten JPEG-Bilder verwendet werden?

JPEG-Bilder sind ideal für Fotografie und andere Standbilder mit komplexen Farben. Das JPEG-Format verfügt über eine Palette mit Millionen von Farben. Zudem zeichnet sich JPEG durch eine verlustbehaftete Komprimierung aus, die dazu beitragen kann, Seitenladezeiten ohne eine merkliche Abnahme der Bildqualität schnell zu halten.

Verwende das JPEG-Format für die folgenden Arten von Bildern:

  • Produkte
  • Banner oder Slideshows
  • Seiten und Blog-Beiträge

Wann sollten PNG-Bilder verwendet werden?

PNG-Bilder sind ideal für Grafiken und Symbole mit kontrastarmen Farben und ohne Farbverlauf. Das PNG-Format unterstützt zudem Transparenz.

Verwende das PNG-Format für die folgenden Arten von Bildern:

  • Logos
  • Symbole
  • Rahmen und Ränder

Automatische Bildkomprimierung und Formatauswahl

Damit Ladezeiten schnell bleiben, komprimiert Shopify automatisch Bilder, wenn sie in deinem Onlineshop angezeigt werden. Bei der Komprimierung eines Bildes wird die Dateigröße reduziert, um ein schnelleres Laden der Seite zu ermöglichen.

Darüber hinaus ermittelt Shopify automatisch das optimale Dateiformat, das du für die Bereitstellung deiner Bilder verwenden solltest. Wenn beispielsweise festgestellt wird, dass der Webbrowser eines Käufers moderne Bildformate wie WebP und AVIF (AV1 Image File Format) unterstützt, stellt Shopify dein Bild in diesem Format bereit.

Um die Leistung durch eine Reduzierung der Dateigröße zu verbessern, werden GIFs automatisch in das animierte WebP-Format umgewandelt.

Upload-Beschränkungen

Bild-Uploads bei Shopify sind in Bezug auf Megapixel und die Dateigröße (gemessen in Megabyte) begrenzt. Megapixel geben an, aus wie vielen Millionen Pixeln ein Bild besteht. Megabyte werden verwendet, um anzuzeigen, wie viele Millionen Byte Speicherplatz ein Bild belegt.

Bilder, die in Shopify hochgeladen werden, können eine der folgenden Einschränkungen nicht überschreiten:

  • 20 Megapixel
  • 20 Megabyte

Um die Megapixel deines Bildes festzustellen, kannst du die folgende Gleichung verwenden: (pixel width x pixel height)/1,000,000. Ein Bild mit einer Auflösung von 4900x6930 entspricht beispielsweise 33,9 Megapixel, basierend auf der Gleichung: (4900x6930)/1,000,000 = 33.9 MP.

Farbprofile

Wenn du ein Bild in deinem Onlineshop anzeigst, sehen die Farben im Bild möglicherweise anders als im Original aus, das du in Shopify hochgeladen hast. Dies kann passieren, wenn ein Bild ein Farbprofil aufweist. Hierbei handelt es sich um eine Gruppe von Daten, die in einer Datei mit der Erweiterung .ICC oder .ICM gespeichert sind. Farbprofile werden häufig in Bilder eingebettet, um die Darstellung der Farben auf verschiedenen Geräten zu standardisieren. Wenn Bilder in deinem Onlineshop angezeigt werden, werden ihre Farbprofile entfernt.

Farbprofile werden aus folgenden Gründen entfernt:

  • Nicht alle Geräte können die Farbprofile .ICC oder .ICM lesen. Wenn sie also bestehen bleiben, kann dies zu einer uneinheitlichen Farbgebung auf verschiedenen Geräten führen.
  • Wenn ein hochgeladenes Bild kein Farbprofil enthält, wird sRGB (das am häufigsten verwendete Farbprofil für die Anzeige von Bildern im Internet) vom Webbrowser übernommen. Dadurch wird sichergestellt, dass deine Bilder auf allen gängigen Webbrowsern und Geräten gleich aussehen.
  • Farbprofile können viel Speicherplatz belegen, was zu hohen Ladezeiten führen kann.

Das Farbprofil aus einem Bild entfernen

Du kannst das Farbprofil aus deinem Bild entfernen, indem du es ohne das Farbprofil speicherst, bevor du es in Shopify hochlädst. Die Vorgehensweise hängt von deinem Bildbearbeitungsprogramm ab.

Ein Farbprofil mit Adobe Illustrator oder Adobe Photoshop entfernen

So entfernst du ein Farbprofil mit Adobe Illustrator oder Adobe Photoshop:

  1. Klicke auf Bearbeiten > Profil zuweisen.

  2. Wähle Farbmanagement auf dieses Dokument nicht anwenden aus.

  3. Klicke auf OK.

Ein Farbprofil mit Adobe InDesign entfernen

So entfernst du ein Farbprofil mit Adobe InDesign:

  1. Klicke auf Bearbeiten > Profil zuweisen.

  2. Wähle für RGB-Profil und CMYK-Profil die Option verwerfen (aktuelle Arbeitsfläche verwenden) aus.

  3. Klicke auf OK.

Detailliertere Informationen finden Sie in der Adobe- Dokumentation zu Farbprofilen.

Best Practices für Slideshows, Bildbanner und Bilder in voller Breite

Viele Shopify-Themes enthalten große Bilder oder Slideshows, die sich an die Höhe deines Browsers oder deine Bildschirmgröße anpassen.

Wenn du eines dieser Themes verwendest oder eine große Slideshow oder ein Hintergrundbild hast, ist es wichtig zu verstehen, welche Arten von Bildern am besten aussehen.

Da große Bilder nicht auf alle Geräte passen, zeigt Shopify abhängig vom verwendeten Gerät manchmal nur einen Teil des Bildes an. Wenn deine Slideshow viele große Bilder enthält, wirst du möglicherweise feststellen, dass Teile der Bilder nicht sichtbar sind.

Empfehlungen

Um sicherzustellen, dass deine Bilder gut zu deinem Theme passen, solltest du Folgendes beachten:

  • Bilder, die du für Slideshows oder Hintergründe verwendest, sollten keinen Text enthalten. Wenn der Text Teil des Bildes selbst ist, wird er möglicherweise basierend auf deinem Theme verschoben, zugeschnitten oder angepasst. Verwende den Theme-Editor, um deinen Slideshows Text und Links hinzuzufügen.

  • Wähle für Slideshows oder den Hintergrund einfache Bilder aus, damit überlagernder Text einfach zu lesen ist.

Breite Bilder auf hohen Bildschirmen

Breite Bilder können links und rechts abgeschnitten werden, wenn das für die Anzeige verwendete Gerät einen hohen Bildschirm hat (wie z. B. ein Handy oder Tablet). Wenn im folgenden Beispiel die Personen der wichtigste Teil des Bildes sind, kannst du einen Fokuspunkt auf der rechten Seite des Bildes platzieren:

Breite Bilder auf hohen Bildschirmen

Hohe Bilder auf breiten Bildschirmen

Hohe Bilder werden möglicherweise oben und unten abgeschnitten, wenn das für die Anzeige verwendete Gerät einen breiten Bildschirm hat (wie z.  B. ein Laptop oder ein PC). Wenn im folgenden Beispiel die Schuhe der wichtigste Teil des Bildes sind, kannst du den Fokuspunkt unten im Bild platzieren, um zu verhindern, dass sie ausgeschnitten werden:

Hohe Bilder auf breiten Bildschirmen

Bereit, mit Shopify zu verkaufen?

Kostenlos testen