Hochladen von Bildern

Du kannst viele verschiedene Arten von Bildern in deinem Onlineshop verwenden, einschließlich deines Firmenlogos, Produktbilder, Slideshows, Banner und Bilder für Blog-Beiträge. Je nachdem, wie und wo du ein Bild verwenden möchtest, empfiehlt es sich, es in einer bestimmten Größe oder einem bestimmten Format hochzuladen.

Bilder hochladen

Es gibt zwei verschiedene Orte, an denen du Bilder für deinen Onlineshop hochladen kannst:

Bilder auf der Seite Dateien hochladen

Du kannst Bilder auf der Seite Dateien deines Shopify-Adminbereichs hochladen. Diese Methode ist nützlich, da du während der Bearbeitung eines beliebigen Themes auf diese Bilder zugreifen kannst. Weitere Informationen findest du unter Hochladen von Dateien auf deine Website.

Bilder im Theme-Editor hochladen

Du kannst Bilder im Theme-Editor zu deinem Theme hinzufügen.

Schritte:

  1. Suche das Theme, das du bearbeiten möchtest, und klicke auf Anpassen.

  2. Klicke in der Theme-Editor-Toolbar auf den Abschnitt, dem du ein Bild hinzufügen möchtest. Wähle einen Abschnitt mit einer Bildauswahl:

    Einen Abschnitt der Toolbar des Theme-Editors, der über eine Bildauswahl verfügt. Es stehen eine Schaltfläche „Bild auswählen“ und ein Link „Kostenlose Bilder entdecken“ zur Verfügung.

  3. Fügeein Bild hinzu, indem du auf Bild auswählen klickst. Um ein Bild von deinem Computer hochzuladen, klicke auf Hochladen. Um ein kostenloses Bild aus Burst zu verwenden, klicke auf Kostenlose Bilder.

  4. Klicke auf Speichern.

Bildformate

Shopify unterstützt die folgenden Bildformate:

  • JPEG oder JPG
  • Progressives JPEG
  • PNG
  • GIF

Shopify stellt Bilder im WebP-Format in unterstützten Browsern bereit.

Hinweis: Mit Ausnahme der Konvertierung nicht unterstützter Formate in unterstützte Formate ändert Shopify deine Bilder beim Hochladen nicht. Wenn ein Bild in einem nicht unterstützten Format hochladen, konvertiert Shopify es in JPEG oder PNG. Die meisten Bildformate werden in JPEG konvertiert.

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

Komprimierungsraten

Damit die Ladezeiten schnell bleiben, komprimiert Shopify in deinem Onlineshop angezeigte Bilder. Das Komprimieren eines Bilds umfasst das Reduzieren der Dateigröße, um ein schnelleres Laden der Seite zu ermöglichen. Mit der Komprimierung können auf gegebenem Festplatten- oder Speicherplatz mehr Bilder gespeichert werden. Außerdem wird die für den Zugriff auf die Bilder benötigte Zeit stark reduziert. Die Komprimierung kann je nach Format, Größe und ursprünglicher Qualität deines Bilds zu einer Änderung der Bildqualität führen.

Die Bildqualität von Shopify nach der Komprimierung gestaltet sich wie folgt:

  • JPEG: Zwischen 65 – 90
  • PNG: 90
  • GIF: keine Qualitätsänderung

Bei JPEG-Bildern hängt die Qualität eines komprimierten Bildes von der Qualität des ursprünglichen JPEG-Bildes sowie von der Ausgabegröße ab:

Komprimierungsraten
Originalqualität Ausgabegröße Ausgabequalität
86 oder mehr Höhe oder Breite von 1024 px oder mehr 85
65 – 85 Höhe oder Breite von 1024 px oder mehr Originalqualität
64 oder weniger Höhe oder Breite von 1024 px oder mehr 65
76 oder mehr Höhe und Breite beide weniger als 1024 px 75
65 – 75 Höhe und Breite beide weniger als 1024 px Originalqualität
64 oder weniger Höhe und Breite beide weniger als 1024 px 65

Upload-Begrenzungen

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 bei Shopify hochgeladen werden, dürfen die folgenden Größen nicht überschreiten:

  • 20 Megapixel
  • 20 Megabyte

Hinweis: Es gibt unterschiedliche Bild-und Dateigrößenbeschränkungen für das Hochladen von Produktbildern.

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 einigen 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 Ihre 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ählen du für die Profile RGB und CMYK die Option Verwerfen (Aktuellen Arbeitsfarbraum verwenden).

  3. Klicke auf OK.

Weitere Informationen findest du in der Adobe-Dokumentation zu Farbprofilen.

Best Practices für Slideshows und Bilder in voller Breite

Viele Shopify-Themes enthalten große Bilder oder Slideshows, die sich an die Höhe deines Browsers (Boundless und Brooklyn) oder Ihre Bildschirmgröße anpassen (Venture).

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:

  • Einige Themes haben eine Einstellung für die Bildposition, mit der du festlegen kannst, welcher Teil eines Bilds das Zentrum ist. Wenn dein Theme keine solche Einstellung hat, stelle sicher, dass das Zentrum jedes Bilds in der Mitte liegt. Wenn deine Bilder auf einigen Bildschirmen abgeschnitten werden, ist das Zentrum sichtbar, während Bereiche um es herum verborgen sind.

  • 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 verwendete Gerät einen hohen Bildschirm hat (wie z. B. ein Handy oder Tablet):

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

Hohe Bilder auf breiten Bildschirmen

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren