Wenn ein potenzieller Kunde bei Ihnen landet Shopify Website , verwenden sie die Bilder, um zu entscheiden, ob sie etwas kaufen möchten. Ihre Aufgabe als Händler ist es daher, sicherzustellen, dass die Bilder die Ladegeschwindigkeit der Website nicht beeinträchtigen (um die Leute abzudrängen) und zu format und die Bilder richtig dimensionieren.
So wirken die Bilder nicht gestreckt oder abgeschnitten. In unserem ultimativen Shopify Bildgrößen-Leitfaden zeigen wir Ihnen die Bedeutung bestimmter Bildgrößen für Shopify Fotografie und stellen Sie die idealen Größen für Dinge wie Ihr Logo, Bannerbild und Produktbilder bereit.
Lesen Sie weiter, um alles darüber zu erfahren Shopify Bildgrößen!
Warum sollten Sie sich darum kümmern Shopify Bildgrößen?
Es ist mühsam, Bilder zu verwalten und hochzuladen. Dennoch sind sie oft die Hauptübeltäter, wenn es um langsame Website-Geschwindigkeiten, SEO-Probleme und niedrige Conversions auf einer E-Commerce-Website geht.
Und das Schwierige an allen Website-Erstellern und E-Commerce-Plattformen ist, dass Sie sich an ganz bestimmte Bildgrößen halten müssen, um sicherzustellen, dass sie optimiert sind und vorzeigbar aussehen.
Um das zusammenzufassen, hier ist der Grund Shopify Bildgrößen sind wichtig:
- Geben Sie jedes Bild ein Shopify erfordert eindeutige Abmessungen, z. B. wie Logos eine andere Größe haben sollten als Bannerbilder.
- Es ist wahrscheinlicher, dass Benutzer zu zahlenden Kunden werden, wenn sie die Bilder auf der rechten Seite deutlich sehen können format.
- Richtig dimensionierte und optimierte Bilder können Ihr SEO-Potenzial steigern.
- Fotos mit schlechter Größe können zu gestreckten oder abgeschnittenen Bildern führen, was zu einer hässlichen Website führt.
- Möglicherweise stellen Sie fest, dass Bilder mit der falschen Größe Ihre Website verlangsamen oder verhindern, dass Kunden überhaupt warten möchten.
Zusammen mit diesen Punkten: Gestochen scharfe Bilder in guter Größe stellen ein gewisses Maß an Professionalität dar und vermitteln Kunden emotionale Reaktionen darauf, dass Sie ein vertrauenswürdiges Unternehmen sind und Ihre Produkte von höchster Qualität sind. Schlechte Fotos wirken einfach so, als würden Sie sich keine Gedanken über Ihre Produkte oder deren Präsentation machen. Ihre Kunden fragen sich vielleicht: „Wo sparen sie sonst noch?“
Werfen Sie vor diesem Hintergrund einen Blick auf unsere Kurzanleitung zu den Besten Shopify Bildgrößen für Bereiche wie Produktseiten, Bannerbilder und Logos.
Das Beste Shopify Bildgrößen (basierend darauf, wo die Bilder verwendet werden)
Das alles sind keine harten Regeln, aber es ist am besten, sich so weit wie möglich an die „Idealgröße“ zu halten. Themen haben gelegentlich ihre eigenen Bildstandards, also behalten Sie diese im Auge. Anderewise, erklären wir Ihnen, wann Sie bei den Maßen etwas Spielraum haben.
Gibt es eine Go-to-Bildgröße, die Across verwendet werden kann Shopify?
Nein, aber wenn Sie diesen Ansatz wählen möchten, empfehlen wir Folgendes:
- Stellen Sie sicher, dass alle Bilder groß genug sind, um die komplizierten Details des Produkts zu zeigen.
- Halten Sie die Bilder jedoch klein genug, um die Leistung der Website nicht zu beeinträchtigen.
- Eine gute Faustregel ist, bei 2048 × 2048 Pixeln zu bleiben square Bilder.
- Vermeiden Sie alles, was kleiner als 800 × 800 Pixel ist square Bilder.
- Vermeiden Sie alles, was größer als 4472 × 4472 ist square Bilder.
Für Nicht-square Bilder, empfehlen wir auf jeden Fall, die folgenden Anleitungen zu verwenden. Es ist auch erwähnenswert, dass einige Themen Bilder unterschiedlich zuschneiden, sodass Sie möglicherweise raten und prüfen müssen, welche Bildgrößen für Ihren Online-Shop am besten geeignet sind.
Werfen Sie für die beste Anleitung einen Blick auf das Ideal Shopify Bildgrößen unten, alle nach Bildtyp kategorisiert:
1. Shopify Produktbildgröße (Ideale Größe: 2048 × 2048 Pixel)
Produktbilder dienen als primäre Medien, mit denen Verkäufe getätigt werden. ShopifyDie Themes von bieten eine ziemlich gute Arbeit beim Zuschneiden und Optimieren von Produktbildern für Sie, aber Sie sollten sich niemals auf die automatisierten Tools verlassen.
Das empfohlene Abmessungen für Produktbilder auf Shopify sind 2048 x 2048 Pixel.
Dies ist ein wunderbarer Ort, um sicherzustellen, dass Ihre Bilder Ihre Seitengeschwindigkeit nicht verlangsamen, und gleichzeitig sicherzustellen, dass Kunden den Detailreichtum Ihrer Originalfotos sehen.
Wir schlagen vor, a square Bild für Produktfotos, um ungewolltes Beschneiden zu vermeiden Shopify Themen.
Der Screenshot unten zeigt ein Bild, das als 2048 × 2048 Pixel hochgeladen wurde und zu keinem Zuschneiden führte.
Längere und breitere Bilder können immer noch für Produktfotos funktionieren, aber es gibt weniger Kontrolle darüber, was das Thema mit Ihren Bildern macht. Möglicherweise stellen Sie fest, dass Landschaftsfotos im Vergleich zum Hochformat verkleinert werden format.
2. Shopify Bildgröße der Sammlung (Ideale Größe: 2048 × 2048 Pixel)
Das Hinzufügen einer Sammlung erfordert nicht unbedingt ein Bild, aber Sie können damit eine separate Seite für diese Sammlung erstellen, fast wie eine Zielseite, die nur für eine kleine Teilmenge von Produkten erstellt wurde.
Ein Sammlungsbild wird unter hochgeladen Sammlung erstellen Abschnitt in Shopify.
Danach können Sie dieser Sammlung ein Produkt hinzufügen und es in einem Inhaltsblock auf der Startseite oder als eigene Seite anzeigen.
Wenn du das verlässt Bild Feld leer auf einer Kollektionsseite, wird eines der vorgestellten Produktbilder aus dieser Kollektion als Standard verwendet.
Die empfohlene Shopify Die Bildgröße für Sammlungen beträgt 2048 × 2048 Pixel.
Das square Abmessungen helfen bei der Erstellung einer standardisierten format kollektionsübergreifend, besonders wenn sie nebeneinander ausgestellt werden.
Das findest du auch square Bilder sind einfacher zu bearbeiten, wenn Sie Inhaltsblöcke verwenden, die Sammlungen präsentieren.
Wie immer können Ihre Ergebnisse je nach verwendetem Thema variieren. Einige Themen bieten tatsächlich weitere Möglichkeiten mit Ihren Sammlungsbildern, sodass Sie das Bild wie ein Banner auf einer separaten Sammlungsseite teilen können. In diesem Fall kann die optimale Größe Ihres Sammlungsbildes völlig anders sein als das, worüber wir hier gesprochen haben. Insgesamt besteht Ihr bester Aktionsplan darin, Tests mit Ihrem Thema durchzuführen. Laden Sie mehrere Bilder in einzigartigen Größen in Ihre Sammlungen hoch. Notieren Sie diejenigen, die funktionieren, und verwenden Sie dann immer diese Dimensionen. Stellen Sie einfach sicher, dass die Bilder nicht zu groß oder zu klein sind, und Sie werden in Ordnung sein.
3. Shopify Logobildgröße (Ideale Größe: 450 B × 250 H Pixel)
Das Logo sticht als Aushängeschild Ihres E-Commerce-Shops hervor. Es wird direkt angezeigt, wenn jemand auf Ihrer Homepage landet, und auf der gesamten Website, da es normalerweise im Kopfbereich sichtbar ist.
Shopify Benutzer, die Probleme mit Logogrößen haben, stellen möglicherweise fest, dass das Logo nicht groß genug ist oder das Navigationsmenü auf irgendeine Weise deformiert wird. Oder Sie stellen möglicherweise fest, dass das Logo unten oder oben viel weißen Raum lässt.
Um die meisten dieser Probleme zu beheben, empfehlen wir die Verwendung von Logoabmessungen von 250 Pixel in der Höhe und 450 Pixel in der Breite.
In der Tat Shopify empfiehlt, niemals höher als diese Maße für Breite und Höhe zu gehen. Allerdings können Sie kleiner werden, solange Ihr Thema dies zulässt.
Hin und wieder wirft die Seitenleiste etwas aus dem Rahmen, oder vielleicht hat Ihr Navigationsmenü zu viele Elemente, die das Logo in eine seltsame Richtung drängen. Unabhängig davon ist es am besten, mit den Abmessungen Ihres Logos und den Website-Einstellungen herumzuspielen, um das beste Aussehen zu erzielen.
Als Alternative sehen einige Themen großartig aus square Logos, aber halten Sie es unter der 250 x 250-Pixel-Marke, damit es nicht zu viel Platz einnimmt.
Für die größte Vielseitigkeit gehen Sie zu Einstellungen > Marke in Shopify hinzufügen a Standard und Square Bild. Auf diese Weise können Sie je nach Situation beides hochladen.
4. Shopify Bannerbildgröße (Ideale Größe: 2000 B × 600 H Pixel)
Dies sind die größeren Bilder, die Sie regelmäßig als Hero-Bild oder Image-Banner bezeichnen und die Sie oben auf einer Homepage platzieren können, um neue Produkte zu präsentieren und Text mit einer Schaltfläche einzufügen. Es ist wichtig, dass Bannerbilder eine hohe Auflösung haben, um Körnigkeit nach der Größenänderung und bei der Anzeige auf verschiedenen Geräten zu vermeiden.
Shopify hat auch eine Kopfzeile Inhaltsabschnitt, der ähnlich funktioniert wie der Banner Image Inhaltsbereich.
Unabhängig davon, für welches Sie sich entscheiden, empfehlen wir, sich an die Abmessungen von 1200 Pixel Breite x 600 Pixel Höhe für Banner und Hero-Bilder zu halten.
Allerdings können Sie oft mit 1200–2000 Pixeln für die Breite und 400–600 Pixeln für die Höhe auskommen. Und wie immer hängt es von Ihrem Thema ab.
Schließlich ist es auch wise , um die Einstellungen für alle Bildbanner und Heldenbilder anzupassen. Sie können die Bannerhöhe für die meisten Themen ändern und angeben Shopify wo Sie den Banner-Inhalt platzieren möchten, z. B. in der unteren rechten Ecke oder oben, um eine bessere Sicht auf das Bild hinter dem Inhalt zu erhalten.
5. Shopify Diashow-Bildgröße (Ideale Größe: 2000 B × 600 H Pixel)
Ähnlich wie bei einem Banner müssen Sie in Diashows hochauflösende Bilder verwenden. Diese Inhaltsabschnitte ermöglichen es Ihnen, mehrere Fotos in einem Bereich einer Seite anzuzeigen. Sie gleiten dann nacheinander zum nächsten Bild.
Da sie Bannern so ähnlich sind, behalten Sie tatsächlich die gleiche Breite und Höhe bei wie bei einem Hero- oder Banner-Bild. Die Empfehlung ist eine Breite von 2000 Pixel und eine Höhe von 600 Pixel. Die Höhe kann jedoch zwischen 400 und 600 Pixel und die Breite zwischen 1200 und 2000 Pixel betragen.
Achten Sie darauf, alle Diashow-Einstellungen zu verwalten, um die besten zu ermitteln formatting für Ihre Diashow. Möglicherweise müssen Sie die Inhaltsbox an eine andere Stelle verschieben, oder vielleicht würde die Diashow besser aussehen, wenn Sie die Höhe etwas erweitern würden.
Eine der Hauptregeln einer Diashow ist es, immer gleichgroße Bilder für dieselbe Diashow hochzuladen. Sie können gerne die Abmessungen anpassen, wenn Sie eine separate Diashow erstellen, aber stellen Sie einfach sicher, dass die Bilder, die in einer Diashow kombiniert werden, alle die gleichen Abmessungen haben, für Kontinuität und Benutzererfahrung.
So optimieren Sie Shopify Bilder
Die Optimierung Ihrer Bilder hilft Ihnen dabei, das Laden von Fotos in Ihrem E-Commerce-Shop zu verbessern. Es hilft Ihnen auch dabei, ein benutzerfreundlicheres Erlebnis auf der Website zu schaffen, da die Bilder das Einkaufserlebnis ergänzen und nicht überwältigen sollen.
Bei der Optimierung Ihrer Bilder sind mehrere Aspekte zu berücksichtigen Shopify. Diese Bereiche umfassen ein optimales Bild formats, Komprimierungen, Bildquellen, Styling und mehr. Lesen Sie weiter, um alles über die Best Practices und Schritte zur Optimierung von Bildern in zu erfahren Shopify.
Schritt 1: Wählen Sie das optimale Bild Format
Shopify Bildgrößen sind wichtig, aber der erste Schritt bei jeder Fotooptimierung sollte die Auswahl des besten Bildes sein format.
Es gibt zahlreiche Bild formats, dass Shopify erlaubt.
Das macht sie besonders:
- JPEG/JPG: Vielleicht die häufigste Datei format für Bilder, und das zu Recht. JPEGs lassen sich gut komprimieren und bieten eine hervorragende Qualität. Wir empfehlen sie für Produktseiten, besonders wenn Sie feine Details auf den Fotos haben.
- PNG: Dieser Dateityp ist tatsächlich besser als JPEGs, wenn es darum geht, die Qualität nach dem Reduzieren der Bildgröße beizubehalten. Sie werden jedoch feststellen, dass PNGs nicht so stark komprimiert werden. Sie eignen sich am besten, wenn Sie einen transparenten Hintergrund benötigen (wird von JPEGs nicht unterstützt), daher mögen wir sie für Logos und einige Bannerbilder.
- GIF: Das GIF ist ein Bild format für Animationen. Es ist im Wesentlichen so, als würde man ein kurzes Video in ein bewegtes Bild verwandeln, was hilfreich ist, um ein Produkt ohne die überwältigende Größe eines Videos kurz zu erklären. Wir mögen sie auf Homepages, Produktseiten und Blogbeiträgen. Überbeanspruchen Sie GIFs jedoch nicht, da ihnen die satte Farbqualität anderer fehlt formats wie JPEG, TIFF und PNG.
- WebP: Vielleicht das vielseitigste aller Bilder formats wird WebP immer häufiger, da es eine stärkere Komprimierung und Qualität als JPEG und PNG bietet, zusammen mit den Transparenzvorteilen von PNG. Ganz zu schweigen davon, dass Sie mit WebP auch Animationen erstellen können. Erwägen Sie die Verwendung von WebP für alle Arten von Bildern in Shopify. Wir erwarten, dass WebP in Zukunft häufiger im Internet verwendet wird.
Abgesehen davon, Shopify unterstützt formats wie HEIC, progressives JPEG und AVIF. HEIC ist das Bild format Standard, der auf allen Apple-Geräten verwendet wird. Es ist extrem kompakt, kann mehrere Bilder in einem Bild enthalten und bietet eine hervorragende Qualität. Sie sind jedoch mit den meisten Nicht-Apple-Geräten nicht kompatibel, was es schwierig macht, sie zu empfehlen. Das AVIF-Bild format hat aufgrund seiner hohen Qualität und dramatischen Komprimierungsraten ziemlich starke Vorteile. Kurz gesagt, Ihre Leistung mit einem AVIF sollte eigentlich stärker sein als mit JPEG- und WebP-Bildern. Allerdings dauert es eine Weile, bis desktop und mobile Browser, um es als Datei zu übernehmen format Standard. Daher können wir es derzeit nicht empfehlen. Erst wenn fast jeder mit einer Internetverbindung die Bilder online ansehen kann.
Wählen Sie basierend auf dem, wofür Sie das Bild verwenden möchten, das Passende aus format von oben. Fahren Sie dann mit dem nächsten Schritt fort, damit Ihre Bildstile auf Ihrer Website gleich bleiben.
Schritt 2: Nehmen Sie für alle Fotos den gleichen Stil auf
Kontinuität ist der Schlüssel zum Fotografieren im E-Commerce. Es legt das Gesamtbild Ihrer Marke fest und schafft ein einheitliches Gefühl auf Ihrer gesamten Website.
Beispielsweise ist es üblich, dass Marken für alle Produktbilder eine Hintergrundfarbe verwenden.
Dies gilt auch für die Abmessungen und den Stil der Bilder. Wenn die meisten Ihrer Produktbilder im Querformat sind, verzichten Sie darauf, ein paar Fotos im Querformat einzumischen. Sie können gerne sowohl Lifestyle- als auch Produktfotos in die Mischung integrieren, aber es ist am besten, bei den meisten Ihrer Shootings bei einem Stil zu bleiben.
Schritt 3: Erstellen Sie eine Mischung aus Produkt- und Lifestyle-Fotografie
Wie bereits erwähnt, möchten Sie höchstwahrscheinlich für die meisten Ihrer Produktfotos einen bestimmten Fotografiestil verwenden. Es ist jedoch unerlässlich, einige Lifestyle-Fotos einzufügen, um die Standard-Produktfotos mit einfarbigen Hintergründen und unterschiedlichen Ansichten der Produkte zu ergänzen.
E-Commerce-Unternehmen haben den Nachteil, dass Kunden die Produkte nicht direkt anprobieren oder anfassen können. Hier kommen Lifestyle-Fotos ins Spiel. Benutzer können sehen, wie die Produkte in Aktion aussehen. Wie ein Hemd über den Körper fällt oder die Größe eines Skateboards, auf dem tatsächlich jemand steht.
Schritt 4: Wählen Sie geeignete Dateinamen und Titel
Jede Bilddatei hat einen Namen und Shopify nimmt diesen Dateinamen und veröffentlicht ihn in den Metadaten Ihrer Website (jede E-Commerce-Plattform tut dies).
Also, wenn Sie Fotos speichern als neues-foto(1).jpg auf Ihrem Computer und laden Sie sie in Ihren Shop hoch, die Suchmaschinen haben keinen Zugriffformation über den Inhalt des Fotos. Dies könnte Ihrem SEO schaden.
Führen Sie beim Optimieren von Bildern diese Schritte durch, um sicherzustellen, dass die Suchmaschinen (und diejenigen mit Sehbehinderungen) verstehen können, was in dem Bild vor sich geht:
- Fügen Sie einen Dateinamen hinzu, der an den Inhalt des Bildes erinnert.
- Wenn Sie zufällig einen generischen Dateinamen hochladen, ändern Sie das Bild Titel in Shopify. Dies ersetzt die Vorgabe.
- Verwenden Sie Alt-Tags für eine noch stärkere Darstellung dessen, was auf dem Bild zu sehen ist. Dies sind die Hauptelemente, auf die die Suchmaschinen achten, da sie zeigen, dass Ihre Benutzererfahrung für Sehbehinderte verbessert wird.
Schritt 5: Bilder vor oder während des Hochladens komprimieren
Shopify bietet eine automatische Komprimierung für alle auf seine Server hochgeladenen Bilder, aber Sie sollten sich nicht vollständig darauf verlassen.
Am besten verwenden Sie entweder ein Drittanbieter-Tool, um Bilder vor dem Hochladen zu komprimieren Shopify, oder installieren Sie eine Shopify plugin die Fotos beim Hochladen automatisch komprimiert.
Es ist viel einfacher, die App-Route zu gehen, aber die meisten von ihnen erfordern ein Abonnement, daher verstehen wir, wenn Sie ein begrenztes Budget haben müssen.
Einige Apps, die sich gut für die Bildkomprimierung eignen, sind:
Testen Sie diese Apps mit ihren kostenlosen Testversionen, um zu verstehen, wie gut sie Bilder komprimieren und wie automatisiert der Prozess für Sie ist. Danach können Sie sich zu einem Abonnement verpflichten. Für Tools von Drittanbietern empfehlen wir TinyPNG und Image Resizer.
Schritt 6: Erwägen Sie kostenlose Bildfinder-Apps
Obwohl es E-Commerce-Marken dringend empfohlen wird, ihre eigenen Fotos zu machen (anstatt nach kostenlosen Alternativen zu suchen oder sie von der Website eines Herstellers zu nehmen), gibt es einige Bereiche eines Online-Shops, die für die Verwendung mit kostenlosen Bildern geeignet sind.
Beispielsweise benötigen Sie möglicherweise eine Landschaftsaufnahme von jemandem, der über eine Schlucht blickt, um einen Blog-Beitrag zu ergänzen. Andererseits möchten Sie vielleicht ein Foto als Hintergrund für ein Hero-Bild verwenden, sodass Sie das eigentliche Produktbild und die Beschreibung auf dem Hintergrund ablegen können.
Für diese Situationen empfehlen wir die Verwendung einiger dieser von Creative Commons lizenzierten Bildseiten:
- Unsplash
- Burst (Ab Shopify)
- Pexels
- offenes Vers
Es ist wichtig darauf hinzuweisen, dass eine Creative-Commons-Lizenz nicht bedeutet, dass Sie das Bild einfach kostenlos nehmen und auf Ihre Website stellen können. Gelegentlich ist das der Fall, aber Sie müssen jedes Bild darauf überprüfen, welche Rechte Sie für die Verwendung haben.
Zum Beispiel sagt Ihnen die Creative Commons-Lizenzierung:
- Wenn Sie das Bild für kommerzielle oder nichtkommerzielle Zwecke verwenden können
- Wenn Sie den Urheber erwähnen müssen oder wenn es einfach empfohlen wird, dies zu tun
- Wenn Sie das Bild in irgendeiner Weise ändern dürfen
Darüber hinaus gibt es viele kostenlose Bildbearbeitungs-Apps, mit denen Sie die Kontrolle über die Größenänderung, Filter und das Zuschneiden übernehmen können, ohne einen Cent zu bezahlen:
Wir schlagen vor:
Schritt 7: Führen Sie A/B-Tests durch, um die besten Bilder herauszufinden und Formats
Nachdem Sie Ihren Fotos relevante Dateinamen gegeben, ihre Größe geändert, sie zugeschnitten und sich für das perfekte entschieden haben format und Größe, es ist Zeit zu sehen, wie sie in Ihrem Geschäft aussehen.
Glücklicherweise müssen Sie nicht die Daumen drücken und hoffen, dass die Bilder die besten für die Konvertierung sind. Sie haben die Möglichkeit, mehrere Varianten derselben Bilder auf Produktseiten, Landingpages und Homepages hochzuladen und dann zu sehen, welche von ihnen in Bezug auf Conversions am besten abschneiden.
Beide Thema Wissenschaftler und Shogun bieten A/B-Testfunktionen für mehrere Teile Ihrer Shopify .
Das Tolle an A/B-Tests ist, dass das Experiment nie vorbei ist. Es ermöglicht Ihnen, jeden Aspekt Ihrer Website im Auge zu behalten. Sie können Bilder austauschen, die im Laufe der Zeit an Dynamik verlieren, und mehrere Tests über einen Zeitraum hinweg durchführen.
Shopify Bildgrößen-Guide: Unser Fazit
Bleiben bei square Bilder ist eine Möglichkeit sicherzustellen, dass Ihre E-Commerce-Fotografie unbeschnitten bleibt. Möglicherweise stellen Sie jedoch fest, dass diese Regel nicht immer zutrifft, wenn es um Ihre geht Shopify Thema.
Daher empfehlen wir, mehrere Bildgrößen für Produkte, Sammlungen und Banner hochzuladen, um zu verstehen, was Ihr Thema am besten verarbeiten kann. Anderewise, wir mögen den 2046 × 2046-Pixel-Standard. Für Banner, Logos und Diashows sollten Sie jedoch die spezifischeren Abmessungen verwenden, die oben in diesem Artikel erwähnt wurden.
Bitte teilen Sie uns in den Kommentaren unten mit, wenn Sie eine Klärung benötigen Shopify Bildgrößen!
Ihre Nachricht 0 Antworten