Bilder hochladen

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 auch durch Zuschneiden und Größenänderung bearbeiten und deine Medieneinstellungen in deinem Theme anpassen, um den Rahmen oder Schatten für alle in deinem Shop angezeigten Medien zu ändern.

Damit Bilder in deinem Onlineshop genau so angezeigt werden, wie du es möchtest, musst du das richtige Bildseitenverhältnis verwenden. Bilder werden mit dem Shopify Content Delivery Network (CDN) automatisch für deine Storefront optimiert.

Ein Bild im Theme-Editor hochladen

Du kannst Bilder in deinem Theme-Editor zu deinem Theme hinzufügen. Du kannst Bilder auch im Abschnitt Inhalt > Dateien deines Shopify-Adminbereichs hochladen. Weitere Informationen findest du unter Dateien hochladen und verwalten.

Schritte:

Bilder mithilfe von Metafeldern hinzufügen

Wenn du Metafelder für deine Bilder eingerichtet hast, kannst du die dynamische Quellenauswahl verwenden, um ein Bild zu deinem Onlineshop hinzuzufügen. Weitere Informationen zu Metafeldern und unterstützten Bildformaten findest du unter Werte zu Metafeldern hinzufügen.

Einen Fokuspunkt für ein Bild festlegen

Mit Fokuspunkten kannst du den wichtigsten Teil eines Bildes in deinem Onlineshop definieren. Wenn du einen Fokuspunkt für ein Bild festlegst, wird dieser zum Fokusbereich. Fokuspunkte werden immer im Bildausschnitt angezeigt, auch wenn dein Theme dein Bild zuschneidet, um es an das Layout anzupassen. Fokuspunkte geben dir mehr Kontrolle darüber, wie dein Bild bei unterschiedlichen Bildschirmgrößen und in Fällen, in denen Themes unterschiedliche Seitenverhältnisse verwenden, angezeigt wird.

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

Fokuspunkt-Kompatibilität mit kostenlosen Shopify-Themes

Du kannst einen Fokuspunkt für die folgenden Versionen der kostenlosen Themes von Shopify festlegen:

• Alle Themes der Horizon-Familie
• Colorblock Version 3.0.0 und höher
• Craft Version 5.0.0 und höher
• Crave Version 5.0.0 und höher
• Dawn Version 7.0.0 und höher
• Origin Version 1.0.0 und höher
• Publisher Version 1.0.0 und höher
• Refresh Version 2.0.0 und höher
• Ride Version 3.0.0 und höher
• Rise Version 1.0.0 und höher
• Sense Version 5.0.0 und höher
• Spotlight Version 0.0.1 und höher
• Studio Version 4.0.0 und höher
• Taste Version 4.0.0 und höher
• Trade Version 1.0.0 und höher

Wenn du ein Theme eines Drittanbieters verwendest, sieh in der Dokumentation deines Themes nach, ob es die Verwendung von Fokuspunkten unterstützt.

Einen Fokuspunkt zu einem Bild hinzufügen

Wenn du einem Bild einen Fokuspunkt hinzufügst und das Bild dann an mehreren Stellen in deinem Onlineshop verwendest, gilt derselbe Fokuspunkt überall dort, wo du das Bild verwendest.

Je nachdem, wie dein Theme deine Bilder zuschneidet und ihre Größe ändert, ist der Fokuspunkt möglicherweise nicht immer visuell zentriert.

Schritte:

1. Klicke in deinem Shopify-Adminbereich an einem der folgenden Standorte auf ein Bild:
   • Im Abschnitt Inhalt > Dateien.
   • Im Theme-Editor.
   • Im Abschnitt Medien deiner Produktangebote im Bereich Produkte.
   • Im Shopify Messaging-E-Mail-Editor.
   • Im Abschnitt Metafelder jeder Ressource, die ein Metafeld vom Typ „Dateireferenz“ zum Hinzufügen eines Bildes hat.
2. Klicke entweder auf das Bild oder ziehe den blauen Punkt, um den Teil des Bildes auszuwählen, für den du einen Fokuspunkt festlegen möchtest.
3. Klicke auf „Speichern“.

Einen Fokuspunkt aus einem Bild entfernen

Schritte:

1. Klicke in deinem Shopify-Adminbereich an einem der folgenden Standorte auf ein Bild:
   • Im Abschnitt Inhalt > Dateien.
   • Im Theme-Editor.
   • Im Abschnitt Medien deiner Produktangebote im Bereich Produkte.
   • Im Shopify Messaging-E-Mail-Editor.
   • Im Abschnitt Metafelder jeder Ressource, die ein Metafeld vom Typ „Dateireferenz“ zum Hinzufügen eines Bildes hat.
2. Klicke auf „Entfernen“.
3. Klicke auf „Als neu speichern“.

Bildformate

Die folgenden Bildformate werden unterstützt:

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

Verwendung von JPEG-Bildern

JPEG-Bilder eignen sich ideal für die Fotografie und andere Standbilder mit komplexen Farben. Das JPEG-Format verfügt über eine Palette mit Millionen von Farben. JPEG hat auch eine verlustbehaftete Komprimierung, die dazu beitragen kann, die Ladezeiten von Seiten kurz zu halten, ohne dass die Bildqualität merklich leidet. Verwende das JPEG-Format für die folgenden Arten von Bildern:

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

Verwendung von PNG-Bildern

PNG-Bilder eignen sich ideal für Grafiken und Symbole mit flachen Farben und ohne Farbverläufe. Das PNG-Format unterstützt auch die Transparenz in Bildern. Verwende das PNG-Format für die folgenden Arten von Bildern:

• Logos
• Symbole
• Ränder und Zierelemente

Automatische Bildkomprimierung und Formatauswahl

Bilder werden nicht komprimiert, wenn du sie in den Shopify-Adminbereich hochlädst, was zur Beibehaltung ihrer ursprünglichen Qualität beiträgt. Die folgenden Maßnahmen können jedoch ergriffen werden, um die Seitenladezeiten für deine Kundschaft kurz zu halten:

• Wenn Bilder über dein Shop-Theme bereitgestellt werden, können sie für qualitativ hochwertige Bilder komprimiert werden
• Shopify ermittelt automatisch das bestmögliche Dateiformat für die Bereitstellung deiner Bilder
• Wenn der Webbrowser von Kund:innen moderne Bildformate wie WebP und AVIF (AV1 Image File Format) unterstützt, werden deine Bilder in diesen Formaten bereitgestellt
• GIFs werden automatisch in das animierte WebP-Format konvertiert, um die Leistung durch Reduzierung der Dateigröße zu verbessern

Beachte für die beste Bildqualität die folgenden Aktionen:

• Lade Bilder mit höherer Auflösung hoch, bis zu 5000 x 5000 Pixel oder 25 Megapixel
• Wähle weniger verlustbehaftete Bildtypen wie PNG für Strichzeichnungen, Text und ikonische Grafiken mit Transparenz
• Verwende JPEG für Produktbilder oder Slideshows
• SVG-Dateien werden unterstützt, haben aber Einschränkungen – sie können nicht transformiert (Größe geändert, zugeschnitten usw.) werden, ohne dass ein gerastertes Format (JPEG, WebP, PNG) angefordert wird

Andere Dateitypen wie PSD (Photoshop Document), TIFF (Tagged Image File Format) und BMP (Bitmap) werden akzeptiert, aber beim Upload in JPEG/PNG konvertiert.

Beschränkungen für den Bildupload

Bilduploads auf Shopify unterliegen Beschränkungen sowohl in Bezug auf Megapixel (MP) als auch auf die Dateigröße, die in Megabyte (MB) gemessen wird. Megapixel geben an, aus wie vielen Millionen Pixeln ein Bild besteht. Megabyte geben an, wie viele Millionen Byte an Arbeitsspeicher oder Speicherplatz ein Bild belegt.

Auf Shopify hochgeladene Bilder dürfen keinen der folgenden Grenzwerte überschreiten:

• 20 Megapixel
• 20 Megabyte

Um den Megapixel-Wert deines Bildes zu ermitteln, kannst du die folgende Formel verwenden:

(Pixelbreite x Pixelhöhe)/1.000.000

Ein Bild mit einer Auflösung von 4900 x 6930 Pixeln hat beispielsweise 33,9 Megapixel, basierend auf der Gleichung: (4900x6930)/1.000.000 = 33,9 MP.

Farbprofile für Bilder

Wenn du ein Bild in deinem Onlineshop ansiehst, können die Farben im Bild anders aussehen als im Originalbild, das du auf Shopify hochlädst. Dies kann passieren, wenn ein Bild ein Farbprofil hat, bei dem es sich um einen Datensatz handelt, der in einer Datei mit der Erweiterung .ICC oder .ICM gespeichert ist.

Farbprofile werden oft 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.

Die Entfernung von Farbprofilen hat folgende Gründe:

• Nicht alle Geräte können Farbprofile vom Typ .ICC oder .ICM lesen, weshalb das Beibehalten dieser Profile zu Inkonsistenzen bei den Bildfarben auf verschiedenen Geräten führen kann.
• Wenn ein hochgeladenes Bild kein Farbprofil enthält, wird vom Webbrowser sRGB angenommen. Das ist das gängigste Farbprofil zur Anzeige von Bildern im Web. Dadurch wird sichergestellt, dass deine Bilder in allen gängigen Webbrowsern und auf allen Geräten gleich angezeigt werden.
• Farbprofile können viel Speicherplatz beanspruchen, was zu längeren Seitenladezeiten führen kann.

Farbprofil aus einem Bild entfernen

Du kannst das Farbprofil aus deinem Bild entfernen, indem du es ohne das Farbprofil speicherst, bevor du es auf Shopify hochlädst. Dieser Prozess variiert je nach Bildbearbeitungsprogramm.

Lies die Adobe-Dokumentation zum Thema Ein Farbprofil zuweisen oder entfernen (Illustrator, Photoshop) und Ein Farbprofil zuweisen oder entfernen (InDesign).

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

Viele Shopify-Themes verfügen über große Bilder oder Slideshows, die sich an die Höhe deines Browsers anpassen oder sich deiner Bildschirmgröße anpassen.

Wenn du eines dieser Themes verwendest oder eine große Slideshow oder ein großes Hintergrundbild hast, musst du wissen, welche Arten von Bildern am besten angezeigt werden.

Da große Bilder nicht auf alle Geräte passen, zeigt Shopify manchmal nur einen Teil des Bildes an, je nachdem, welches Gerät du verwendest. Wenn deine Bild-Slideshow viele große Bilder enthält, kann es sein, dass Teile der Bilder nicht sichtbar sind.

Überlegungen zur Verwendung von Bildern für Slideshows oder Bildbanner

Damit deine Bilder in deinem Theme gut funktionieren, beachte die folgenden Punkte:

• Bilder, die du für Slideshows oder Hintergründe verwendest, sollten keinen Text enthalten. Wenn der Text Teil des Bildes selbst ist, kann er je nach Theme verschoben, zugeschnitten oder angepasst werden. Verwende den Theme-Editor, um Text und Links zu deinen Slideshows und Hintergründen hinzuzufügen.

• Wähle für Bilder, die du in Slideshows oder als Hintergründe verwendest, einfache Bilder aus, damit jeder darüberliegende Text leicht zu lesen ist.

Breite Bilder auf hohen Bildschirmen

Breite Bilder können links und rechts abgeschnitten werden, wenn das Gerät, mit dem sie angezeigt werden, einen hohen Bildschirm hat, z. B. ein Mobiltelefon oder ein Tablet im Hochformat. Wenn im folgenden Beispiel die Personen der wichtigste Teil des Bildes sind, kannst du einen Fokuspunkt auf der rechten Seite des Bildes platzieren.

Hohe Bilder auf breiten Bildschirmen

Hohe Bilder können oben und unten abgeschnitten werden, wenn das Gerät, mit dem sie angezeigt werden, einen breiten Bildschirm hat, z. B. einen Laptop- oder Desktop-Monitor. Wenn im folgenden Beispiel die Schuhe der wichtigste Teil des Bildes sind, kannst du einen Fokuspunkt am unteren Rand des Bildes platzieren.

Ladeverhalten von Bildern

Wenn du eine Seite in deinem Onlineshop besuchst, fällt dir vielleicht auf, dass Bilder zuerst etwas unscharf erscheinen und einen Moment später scharf werden. Dies ist ein erwartetes Verhalten, das dazu beiträgt, die Ladegeschwindigkeit und das Benutzererlebnis deines Shops zu verbessern.

Shopify-Themes verwenden eine Technik namens Lazy Loading, bei der zuerst eine kleinere Version eines Bildes geladen wird, während das Bild in voller Auflösung im Hintergrund lädt. Dies ermöglicht es den Kund:innen, Inhalte sofort zu überprüfen, anstatt darauf zu warten, dass große Bilder vollständig geladen werden. Der Vorgang ist in der Regel in weniger als einer Sekunde abgeschlossen, erweckt aber den Eindruck, dass dein Shop schneller lädt.

Diese Technik ist besonders für bildlastige Shops von Vorteil, da sie die anfänglichen Seitenladezeiten erheblich verbessert und den Kund:innen ein sofortiges visuelles Feedback gibt.

Fehlerbehebung bei Bildproblemen