Bilder in Align verwenden

Ausgewählte Links

1. Shopify-Dokumentation zu Bildern
2. Shopify-Dokumentation zum Hinzufügen kostenloser Stockfotos zu Ihrem Theme
3. Shopify-Dokumentation zum Hochladen von Bildern
4. Shopify-Dokumentation zum Korrigieren der Farben hochgeladener Bilder
5. Kostenlose Stockfotos von Burst
6. Burst-Namensnennungslizenz
7. Shopify Theme-Editor
8. Shopify-Dokumentation zu Medieneinstellungen des Themes
9. Shopify-Dokumentation zum Bildseitenverhältnis
10. Shopify-Seite „Files“

Hilfreiche Videos

Learn With Shopify-Video: So entwerfen Sie einen E-Commerce-Shop, der verkauft: Bewährte Strategien und Best Practices

Learn With Shopify-Video: So entwerfen Sie einen E-Commerce-Shop, der verkauft: Bewährte Strategien und Best Practices

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Verwenden Sie hochwertige Bilder, die Ihre Marke unterstützen und auf allen Bildschirmgrößen scharf bleiben. Dieser Leitfaden erklärt, wie Sie Bilder für Ihr Company XYZ Align-Theme finden oder hochladen, geeignete Formate auswählen, Fokuspunkte festlegen und Banner sowie Diashows für responsive Layouts vorbereiten.

Verwandte Ressourcen

1. Bildrichtlinien
2. Kostenlose Stockfotos von Burst
3. Richtlinien für Theme-Bilder
4. Bildfarben korrigieren

Kostenlose Stockfotos hinzufügen

Burst bietet kostenlose hochauflösende Stockfotos aus zahlreichen Kategorien. Sie können die Bilder im Shopify Theme-Editor durchsuchen und in bildfähigen Bereichen Ihres Align-Shops verwenden, etwa in Diashows, Blogbeiträgen und Produktseiten.

Burst-Bilder sind unter einer lizenzgebührenfreien Lizenz verfügbar, sodass Sie sie nach Bedarf verwenden und bearbeiten können. Eine Namensnennung wird empfohlen, ist jedoch nicht erforderlich.

Ein Stockfoto hinzufügen

1. Öffnen Sie den Theme-Editor
2. Wählen Sie den Abschnitt aus, der die zu aktualisierende Bildauswahl enthält.
3. Wählen Sie Explore free images.
4. Suchen Sie nach einem Bild oder durchsuchen Sie eine Kategorie.
5. Wählen Sie ein Bild aus, um eine Vorschau in Align anzuzeigen, und wählen Sie anschließend Select.
6. Passen Sie bei Bedarf die Einstellungen für Bilddarstellung oder Animation in der Seitenleiste an.
7. Wählen Sie Save.

Bilder hochladen

Verwenden Sie Bilder für Logos, Produkte, Diashows, Banner und Blogbeiträge. Sie können Bilder zuschneiden und ihre Größe ändern sowie Ihre Medieneinstellungen im Theme anpassen, um in Ihrem gesamten Shop einen einheitlichen Rahmen oder Schatten auf Medien anzuwenden.

Wählen Sie ein geeignetes Bildseitenverhältnis, damit jedes Bild in das vorgesehene Align-Layout passt.

Tipp

Laden Sie das hochwertigste Bild hoch, das Ihnen zur Verfügung steht. Bilder müssen vor dem Hochladen nicht manuell komprimiert werden.

Ein Bild im Theme-Editor hochladen

Sie können Bilder im Theme-Editor oder auf der Seite Files hochladen. Hinweise zur Dateiverwaltung finden Sie unter Dateien auf Ihre Website hochladen

1. Gehen Sie in Ihrem Shopify-Admin zu Online Store > Themes

2. Wählen Sie neben Align oder der zu bearbeitenden Align-Theme-Kopie Customize.

3. Wählen Sie über das Vorlagenmenü die zu aktualisierende Seite oder Vorlage aus.

4. Wählen Sie in der Seitenleiste des Theme-Editors den Abschnitt oder Block aus, der das Bild enthält.

5. Wählen Sie Select Image.

   • Um ein Bild von Ihrem Computer hochzuladen, wählen Sie Upload.
   • Um ein kostenloses Stockfoto von Burst auszuwählen, wählen Sie Explore free images.

6. Wählen Sie ein Bild aus, um eine Vorschau anzuzeigen, und wählen Sie anschließend Select.

7. Wählen Sie Save.

Ein Bild aus einem Metafeld hinzufügen

Wenn Sie Metafelder für Bilder haben, verwenden Sie die Auswahl für dynamische Quellen, um ein Bild mit einer Theme-Einstellung zu verbinden. Informationen zu unterstützten Bildformaten und weitere Details finden Sie unter Metafeld-Inhaltstypen und -werte

Bildbanner verwenden

Bildbanner können ein oder zwei Bilder mit Text und einer Aktionsschaltfläche kombinieren. Auf Desktop-Bildschirmen werden zwei Bannerbilder nebeneinander angezeigt; auf kleineren Bildschirmen kann dieses Layout schwer zu betrachten sein.

Wenn Sie zwei Bilder verwenden, aktivieren Sie Stack images on mobile in den Theme-Einstellungen des Image banner. Weitere Hinweise finden Sie unter Bildbanner, Diashows und Bewährte Verfahren für Diashows und Bildbanner

Einen Bildfokus festlegen

Ein Fokuspunkt kennzeichnet den wichtigsten Bereich eines Bildes. Er sorgt dafür, dass dieser Bereich im Bildausschnitt bleibt, wenn Align ein Bild für verschiedene Layouts und Bildschirmgrößen zuschneidet.

Jedes Bild kann einen Fokuspunkt haben, den Sie jederzeit ändern oder entfernen können. Ein für ein Bild festgelegter Fokuspunkt gilt überall dort, wo dasselbe Bild verwendet wird.

Fokuspunkte sind nur für Theme-Bilder verfügbar, nicht für Produkt-, Blog- oder Kollektionsbilder.

Einen Fokuspunkt hinzufügen

Sie können einen Fokuspunkt über Files oder direkt im Theme-Editor hinzufügen.

1. Wählen Sie im Theme-Editor einen Abschnitt oder Block mit einem Bild aus.
2. Wählen Sie beim Bild Edit.
3. Wählen Sie Add focal point.
4. Ziehen Sie den blauen Kreis oder wählen Sie den Bereich aus, der sichtbar bleiben soll.
5. Wählen Sie Done.

Um den Fokuspunkt später zu verschieben, öffnen Sie das Bild erneut und wählen Sie einen neuen Bereich aus.

Einen Fokuspunkt entfernen

1. Wählen Sie im Theme-Editor einen Abschnitt oder Block mit einem Bild aus.
2. Wählen Sie beim Bild Edit.
3. Wählen Sie Remove focal point.
4. Wählen Sie Done.

Hinweis

Je nachdem, wie Align ein Bild zuschneidet und dessen Größe ändert, wird der Fokuspunkt möglicherweise nicht optisch zentriert angezeigt.

Ein Bildformat auswählen

Zu den unterstützten Bildformaten gehören:

• JPEG
• Progressive JPEG
• PNG
• GIF
• HEIC
• WebP

Das am besten unterstützte Format wird automatisch für den Browser jeder Besucherin und jedes Besuchers ausgewählt. Mehr erfahren über die Möglichkeiten zur Bildtransformation.

JPEG für Fotografien verwenden

JPEG eignet sich gut für Fotografien und andere Standbilder mit komplexen Farben. Die verlustbehaftete Komprimierung kann die Dateigröße reduzieren und gleichzeitig eine gute visuelle Qualität bewahren.

Verwenden Sie JPEG für:

• Produkte
• Banner und Diashows
• Seiten und Blogbeiträge

PNG für Grafiken verwenden

PNG eignet sich gut für Grafiken und Symbole mit flachen Farben, insbesondere wenn Transparenz benötigt wird.

Verwenden Sie PNG für:

• Logos
• Symbole
• Rahmen und Zierelemente

Automatische Optimierung und Upload-Limits verstehen

Shopify komprimiert Bilder automatisch, damit sie schneller geladen werden, und wählt für jeden Browser das am besten geeignete Bereitstellungsformat aus. Kompatible Browser können beispielsweise moderne Formate wie WebP oder AVIF erhalten; GIFs werden zur Reduzierung der Dateigröße in animierte WebP-Dateien umgewandelt.

Ein hochgeladenes Bild darf keinen der folgenden Grenzwerte überschreiten:

1. 25 Megapixel
2. 20 Megabyte

Berechnen Sie Megapixel mit (pixel width x pixel height)/1,000,000. Ein Bild mit 4900 × 6930 Pixeln hat beispielsweise 33,9 MP: (4900x6930)/1,000,000 = 33.9 MP.

Hinweis

Für Produktbilder gelten andere Upload-Limits für Bild- und Dateigrößen.

Farbprofile verwalten

Farben können nach dem Hochladen anders aussehen, wenn ein Bild ein .ICC- oder .ICM-Farbprofil enthält. Shopify entfernt diese Profile, damit Bilder auf verschiedenen Geräten und in verschiedenen Browsern einheitlicher angezeigt werden und keine größeren Dateigrößen entstehen.

Wenn ein Bild kein Farbprofil enthält, verwenden Browser sRGB, das gängigste Webfarbprofil. Wenn eine genaue Farbübereinstimmung wichtig ist, speichern Sie das Bild vor dem Hochladen ohne eingebettetes Profil.

Ein Farbprofil in Adobe Illustrator oder Photoshop entfernen

1. Wählen Sie Edit > Assign Profile.
2. Wählen Sie Don’t Color Manage This Document.
3. Wählen Sie OK.

Ein Farbprofil in Adobe InDesign entfernen

1. Wählen Sie Edit > Assign Profile.
2. Wählen Sie für RGB Profile und CMYK Profile die Option Discard (Use Current Working Space).
3. Wählen Sie OK.

Weitere Informationen finden Sie in der Adobe-Dokumentation zu Farbprofilen

Diashows, Banner und Bilder in voller Breite vorbereiten

Große Bilder und Diashows passen sich der verfügbaren Bildschirmgröße an, sodass Teile eines Bildes möglicherweise zugeschnitten werden. Planen Sie diesen Zuschnitt, bevor Sie Bilder zu Align-Layouts in voller Breite hinzufügen.

1. Lassen Sie Text aus dem Bild selbst heraus. Verwenden Sie den Theme-Editor, um Text und Links hinzuzufügen, damit sie sich an das Layout anpassen können.

2. Wählen Sie einfache Bilder, wenn Text darüber angezeigt wird, damit der Text lesbar bleibt.

3. Legen Sie für das wichtige Motiv einen Fokuspunkt fest.

   • Breite Bilder können auf hohen Bildschirmen links und rechts zugeschnitten werden.
   • Hohe Bilder können auf breiten Bildschirmen oben und unten zugeschnitten werden.

Nutzungshinweise

1. Wählen Sie zuerst das Layout. Stimmen Sie das Bildseitenverhältnis auf den Align-Abschnitt ab, in dem es angezeigt wird.
2. Schützen Sie das Hauptmotiv. Verwenden Sie Fokuspunkte für Bilder, die in mobilen oder Desktop-Layouts zugeschnitten werden können.
3. Halten Sie Bannertext getrennt. Fügen Sie Überschriften, Text und Links im Theme-Editor hinzu, statt sie in ein Bannerbild einzubetten.
4. Verwenden Sie das richtige Format. Wählen Sie JPEG für Fotografien und PNG für transparente Grafiken wie Logos und Symbole.
5. Prüfen Sie farbsensible Bilder. Entfernen Sie eingebettete Farbprofile vor dem Hochladen, wenn Farbänderungen auffallen würden.