Hinweis: Der folgende Artikel hilft Ihnen weiter: Der vollständige Leitfaden zur Shopify-Bannergröße mit Best Practices
Online-Käufer sind visuelle Wesen, denn wenn ihnen das, was sie sehen, nicht gefällt, ist es unwahrscheinlich, dass sie ihren Kauf abschließen. Wenn Sie also Conversions und Einnahmen maximieren möchten, ist Ihr Shopify-Bannergröße muss perfekt sein. Eine geringfügige Fehlausrichtung oder ein Größenunterschied kann den Unterschied zwischen einem erfolgreichen Verkauf oder gar keinem Verkauf ausmachen.
Shopify-Bildgrößen können für Händler ein Minenfeld sein.
Es ist notwendig, die besten Bildgrößen auszuwählen, damit Ihr Shop auf jedem Gerät großartig aussieht. Andernfalls würde Ihr Umsatz leiden.
In diesem Beitrag gehen wir auf alles ein, was Sie über Shopify-Bildgrößen wissen müssen. Am Ende können Sie alle Ihre Bilder optimieren und das bestmögliche Einkaufserlebnis aller Zeiten bieten.
Umriss
Warum sind Shopify-Bannergrößen wichtig?
Stellen Sie sich vor, Sie betreten ein Geschäft und finden überall in den Regalen verstreute Waren vor. Gehen Sie davon aus, dass das Layout des Ladens schwierig zu navigieren war und dass es dem Merchandising an einem einheitlichen Stil oder einer erkennbaren Ästhetik mangelte.
Du würdest dich wahrscheinlich umdrehen und zur Tür hinausgehen, oder?
Dies passiert, wenn die Größe Ihrer Shopify-Bilder nicht richtig optimiert ist. Ihr Geschäft wirkt möglicherweise überladen, unorganisiert und unprofessionell. Mit anderen Worten, überhaupt nicht gut.
Außerdem können Bilder in der falschen Größe die Ladezeit Ihres Shops verlangsamen. Und wir alle wissen, dass ein langsam ladender Store Ihre Conversions völlig zerstören kann.
Wenn es in Ihrem Geschäft derzeit so aussieht, als ob Ihre Produktbilder direkt vom Hersteller stammen oder es körnige Fotos mit niedriger Auflösung enthält, ist es an der Zeit, Maßnahmen zu ergreifen.
Verbessern Sie die Benutzererfahrung
Es hilft bei der Steigerung der UX da Kunden viel eher dazu neigen, Produkte mit klaren, zoombaren Fotos zu kaufen, als solche ohne.
Die richtige Bildgröße für jede Verwendung kann das Benutzererlebnis wirklich verbessern, da sie die Augen schont und verhindert, dass Sie scrollen oder hineinzoomen müssen, um das gesamte Bild zu sehen.
Erhöhen Sie die Bahngeschwindigkeit
53 % der Besucher Verlassen Sie eine mobile Website, wenn das Laden länger als 3 Sekunden dauert. Ihre Kunden können Produktseiten schnell laden, indem Sie die ideale Größe für Shopify-Produktbilder verwenden. Dadurch erfahren auch Ihre Umsätze einen Schub.
Es dauert länger, bis der Server die Seite lädt, wenn ein Benutzer auf eine Website mit großen Bildgrößen zugreift. Kleinere Bildgrößen werden tendenziell schneller auf allen Geräten geladen; In der Sprache der Bild-SEO wird dies als „Contentful Paint“ bezeichnet.
Hier ist ein Beispiel für schlechte Seitenladegeschwindigkeiten:
Dies zeigt die übermäßige Ladegeschwindigkeit des Servers, die 2,1 Sekunden für das erste Bild und 4,1 Sekunden für das größte Bild beträgt. Erhöhen Sie die Geschwindigkeit Ihrer Seite, um eine hohe Absprungrate zu verhindern die Hälfte der Nutzer Verlassen Sie den Einkaufswagen, wenn das Laden der Seiten länger als 6 Sekunden dauert.
Verbessern Sie das Website-Ranking
Ihre UX kann unter langsamen Ladezeiten leiden, was sich auch auf Ihre SEO auswirkt.
Das Website-Ranking kann sich auf die Gesamtposition Ihrer Website oder auf die Nähe Ihrer Webseite zur ersten Seite der Suchergebnisse beziehen, wenn ein Benutzer einen bestimmten Ausdruck eingibt.
Die Qualität Ihrer Bilder wird vom Google-Algorithmus berücksichtigt, der anhand verschiedener Messwerte entscheidet, was auf der ersten Seite der Suchergebnisse erscheint.
Wie Sie sehen, ist UX das zugrunde liegende Element. Wenn Sie UX auf höchstem Niveau bereitstellen, stellen Sie Ihre E-Commerce-Website in den Mittelpunkt. Wenn Sie keine fantastische UX bereitstellen, schädigen Sie Ihre Website ernsthaft.
Daher ist es grundsätzlich ratsam, für Shopify-Produktbilder die beste Größe zu verwenden. Die Zufriedenheit Ihrer Kunden sorgt dafür, dass sie wiederkommen.
Verbessern Sie die Conversion-Rate
Ihre Kunden werden ein saubereres und angenehmeres Einkaufserlebnis genießen, wenn Sie die Bilder für Ihren Shop optimieren, was die Conversions und den Umsatz Ihres Unternehmens steigert.
Empfehlungen zur Bildgröße für Shopify-Shops
Bildgröße des Shopify-Banners
400-600 Breite x 1200 Höhe
Shopify-Bannerbilder ähneln Diashows und enthalten häufig überlagerten Text. Sie befinden sich oben auf Ihrer Homepage und sind das Erste, was neue Besucher sehen. Sorgen Sie also dafür, dass sie zählen.
Die Verwendung hochauflösender Bilder ist hier wie bei Ihren Diashow-Bildern nicht verhandelbar. Es lohnt sich auch, die Hintergrundbeleuchtung beizubehalten, damit Ihr Text hervorsticht. Viele Hintergrundgeräusche mindern den Kontrast und verwirren die Besucher.
Für jedes Thema gelten unterschiedliche Anforderungen an Bannerbilder. Überprüfen Sie daher unbedingt, was für Ihren Shop am besten geeignet ist. Sie sollten auch darüber nachdenken, die Höhe Ihrer Bilder für mobile Geräte festzulegen. Wenn es um Bannerbilder geht, sieht das, was auf dem Desktop gut aussieht, auf Mobilgeräten möglicherweise schlecht aus.
Bildgröße des Shopify-Logos
450 Höhe x 250 Breite
Das Logo ist für viele Händler eine der verwirrendsten Shopify-Bildgrößen. Ich bin mir sicher, dass ich Logos hochgeladen habe, die völlig fehl am Platz zum Rest der Website aussehen.
Die offizielle Bildgrößenempfehlung für das Shopify-Logo beträgt 450 Höhe x 250 Breite. Dies bedeutet nicht, dass Ihr Bild genau diese Abmessungen haben muss. Allerdings ist die Seitenleiste in vielen Themes 250 Pixel breit. Halten Sie Ihr Logo also unter dieser Zahl, um ein saubereres Erscheinungsbild zu erzielen.
Sie können auch ein quadratisches Bild (Seitenverhältnis 1:1) verwenden, das fast überall auf Ihrer Website gut aussieht. Achten Sie noch einmal auf die maximalen Abmessungen – 200 x 200 Pixel sind hier eine sichere Wahl.
Shopify Hero-Bildgröße
1280-2500 Breite x 720-900 Höhe
Der Hauptunterschied zwischen einem Heldenbild und einem Hintergrundbild besteht darin, dass Heldenbilder normalerweise eine geringere Höhe haben – etwa halb so groß. Dieser Bildtyp ist eine gute Wahl, wenn Sie mehr Text sofort auf dem Bildschirm anzeigen müssen, ohne dass Benutzer scrollen müssen.
Hier ist ein Beispiel:
Wie du sehen kannst, Schwarz und fett Ich habe mich dafür entschieden, so breit wie möglich zu sein, mit einer kürzeren Bildhöhe mit festem Seitenverhältnis.
Shopify-Diashow-Bildgröße:
1200-2000 Breite x 400-600 Höhe
Bei vielen Themen wird Ihre Homepage-Diashow das Erste sein, was Ihre Besucher sehen. Deshalb müssen Sie sicherstellen, dass Ihre Bildparameter korrekt sind.
Da die Diashow von einem Bild zum nächsten „gleitet“, empfiehlt es sich, sicherzustellen, dass alle Bilder das gleiche Seitenverhältnis haben. Dadurch bleibt alles konsistent und professionell.
Bildoptimierung: Beste Bildformate für die Shopify-Bannergröße
Nachdem Sie nun die idealen Bildgrößen für Ihren Shopify-Shop kennen, müssen Sie als Nächstes über die Bildformate nachdenken, die Sie verwenden werden.
Schauen wir uns einige der beliebtesten Bildformate an, die in der E-Commerce-Fotografie verwendet werden.
JPG/JPEG
Das beliebteste Bilddateiformat für Shopify-Shops ist wahrscheinlich JPG. Es verfügt über eine gute Farbpalette und eine kleine Dateigröße, was ein schnelles Laden ermöglicht. Die Komprimierungskapazität von JPG bietet einen fantastischen Kompromiss zwischen Qualität und Größe. Aus diesem Grund empfiehlt Shopify den Einzelhändlern tatsächlich, JPG für die Bilder auf der Produktseite zu verwenden.
Das beliebteste Dateiformat für Bilder ist dieses.
Wenn es darum geht, die Bildqualität bei kleinsten Dateigrößen aufrechtzuerhalten, zeichnen sich JPEGs aus. Für E-Commerce-Websites, die die Leichtigkeit und Geschwindigkeit ihrer Websites beibehalten müssen, sind das hervorragende Neuigkeiten.
JPEGs eignen sich aufgrund ihres hervorragenden Farbumfangs, der hohen Auflösung und der geringen Dateigröße ideal für Produktfotos.
JPEGs werden häufig verwendet für:
- Produkte
- Banner oder Diashows
- Blogbeiträge und -seiten
PNG
PNG ist ein weiteres äußerst beliebtes Bildformat, das in Shopify-Shops verwendet wird. Da Sie mit PNG die Größe der Bilddatei reduzieren können, ohne die Gesamtbildqualität zu beeinträchtigen, eignet es sich hervorragend für E-Commerce-Websites. Darüber hinaus unterstützt PNG Transparenz, sodass Sie mehr Kontrolle über das Design Ihres Shops haben. Ein Problem bei PNG besteht darin, dass es eine verlustfreie Komprimierung verwendet, was häufig zu sehr großen Bilddateien führt.
PNGs, ein neueres Bildformat, sind normalerweise größer als JPEGs, haben aber eine bessere Qualität.
Es ist möglich, dieses verlustfreie Format ohne Einbußen bei der Bildqualität zu komprimieren. Außerdem kann es aus diesem Grund nicht so stark komprimiert werden wie ein JPEG.
PNGs ermöglichen im Gegensatz zu JPEGs transparente Hintergründe und eignen sich daher hervorragend für Logos und Symbole.
PNGs werden häufig verwendet für:
- Logos
- Symbole
- Bordüren und Borten
GIF
Kurze Animationen oder Produkterklärungen können vom allgemein anerkannten GIF-Bildformat profitieren, das in Shopify-Dropshipping-Shops sehr verbreitet ist. Da das GIF-Bildformat nur etwa 250 Farben zulässt, werden Ihre Bilder nicht besonders lebendig sein. In Kombination mit anderen Bildformaten können sie jedoch sehr effektiv sein.
GIFs, das traditionelle Dateiformat für Bewegtbilder, ermöglichen es Geschäftsinhabern, ihren Geschäften etwas Bewegung zu verleihen.
GIFs sind das einzige Format, das für Animationen geeignet ist, obwohl sie für normale Bilder und Fotos keine gute Option sind. PNGs können dies, sie können jedoch nicht so klein komprimiert werden wie GIFs.
TIFF
Mehrere Webbearbeitungstools unterstützen das nützliche Bildformat TIFF. Dies bedeutet, dass die Bildbearbeitung und -anpassung für Marketingkampagnen für Designer und Einzelhändler einfach ist. Mit TIFF ist eine hohe Auflösung verfügbar, und Sie können mehrere Bilder in einer Datei speichern. Allerdings ist die Dateigröße ähnlich wie bei PNG aufgrund der verlustfreien Komprimierung tendenziell größer.
JPG/JPEG ist immer eine kluge Wahl, wenn Sie sich nicht sicher sind, welche Bildgröße Sie verwenden sollen. Wie bereits erwähnt, ist JPG das einzige Bildformat, das Dateigröße und Bildqualität erfolgreich in Einklang bringt.
WebP
Google hat WebP, eines der neuesten Bildformate, entwickelt, um qualitativ hochwertige Bilder mit viel kleineren Dateigrößen bereitzustellen.
Da Shopify WebP-Bilder automatisch an Browser liefert, die es unterstützen, müssen Sie sich keine Gedanken über das manuelle Hochladen dieses Formats machen.
Top 5 Best Practices
1. Berücksichtigen Sie die Dateigröße
Die Verringerung der Dateigröße Ihrer Bilder ist eine der effektivsten Möglichkeiten, langsame Seitengeschwindigkeiten zu bekämpfen. Eine gute Faustregel für die Bildgröße besteht darin, sie für eine optimale Leistung unter 70 KB zu halten.
Zum Glück komprimiert Shopify Ihre Bilder bereits bis zu einem gewissen Grad. Sie können jedoch auch kostenlose Tools wie verwenden TinyPNG oder JPEG komprimieren um auch Ihre Bilder zu komprimieren. Mit solchen Tools können Sie die Menge der Komprimierungen steuern und viele Dateien gleichzeitig in großen Mengen verarbeiten.
2. Machen Sie Bilder responsiv
Ihre Bilder sollten auf allen Geräten gut funktionieren.
Das Gerät des Käufers bestimmt die Abmessungen und den Maßstab Ihrer Bilder. Um die besten Ergebnisse zu erzielen, sollte das Bild mit der höchsten Qualität, das in die 20-MB- oder 20-Megapixel-Grenze passt, mit 72 dpi hochgeladen werden.
3. Verwenden Sie eine einheitliche Bearbeitung für alle Ihre Bilder
Das Auge genießt Konsistenz. Achten Sie bei der Auswahl der Bilder für Ihr Geschäft immer auf Konsistenz, um ihm ein eleganteres Erscheinungsbild zu verleihen. Sehen Sie sich an, wie Shuppasorgt beispielsweise für ein elegantes Browsing-Erlebnis, indem es ein einfaches Produktfoto mit einem Palettenhintergrund kombiniert.
Natürlich können Sie ein professionelles Fotoshooting planen, um gleichwertige Bilder zu erhalten. Wenn Ihr Budget jedoch knapp ist, können Sie dieses konsistente visuelle Einkaufserlebnis mithilfe digitaler Tools wie Canva und Photoshop erreichen.
4. A/B-Tests
Zu guter Letzt sollten Sie verschiedene Variationen Ihrer Bilder testen, um herauszufinden, welche die beste Leistung erbringen. Sie könnten Folgendes testen:
- Wie viele Produktbilder gibt es auf jeder Seite?
- Die Arten von Bildern, die am effektivsten sind
- Wie viele Bilder (10, 20, 100) haben Sie auf jeder Produktkollektionsseite?
Um zu sehen, wie Benutzer mit Ihren Bildern interagieren, verwenden Sie ein Heatmapping-Tool wie hotjar. Oder Sie könnten eine einfache Umfrage nach dem Kauf auf Ihrer Dankesseite als weitere unkomplizierte Methode nutzen, um Kundenfeedback zu ihren bevorzugten Bildtypen einzuholen.
5. Geben Sie Ihren Bildern Namen
Die meisten Einzelhändler blättern durch Hunderte von Produktbildern, ohne den Namen der Standardkamera zu ändern.
Aber als jemand, der Spaß an SEO hat, kann ich Ihnen versichern, dass dies ein schwerwiegender Fehler ist. Sie sehen, Ihre Bildnamen beeinflussen den Rang Ihrer Produktseiten für verschiedene Schlüsselwörter.
Zusätzlich zum Crawlen des Textes auf Ihren Seiten analysieren Suchmaschinen auch die Dateinamen von Bildern, um den Inhalt der Seite zu ermitteln.
Nimm das Alle Vögel Produktseite zur Veranschaulichung:
Anstatt einfach den Standardnamen der Kameradatei (DCHIMAGE110.jpg) zu verwenden, hat Allbirds jede Datei mit einem aussagekräftigen Titel umbenannt: ‘TR3MJBK080_SHOE_ANGLE_GLOBAL_MENS_TREE_RUNNER_JET_BLACK_BLACK.avif’
Dies macht es für Google einfacher, diese Seite zu verstehen und potenziellen Kunden zu präsentieren, die nach Begriffen wie „Mens Tree Runners“ suchen.
FAQ
Hier sind einige der am häufigsten gestellten Fragen zu Shopify-Bild- und Bannergrößen, die wir im Internet sehen:
Reduziert Shopify die Bildgröße automatisch?
Obwohl Shopify die Bildgröße für Einzelhändler automatisch verkleinert und komprimiert, reicht dies manchmal nicht aus, um eine schnelle Storefront zu erstellen.
In diesen Situationen ist die Verwendung einer kostenlosen Anwendung wie z TinyPNG oder JPEG komprimieren Es wird empfohlen, Bilder schnell zu komprimieren, ohne die Qualität zu beeinträchtigen.
Gibt es eine beste Shopify-Bildgröße?
In Shopify gibt es empfohlene Größen für verschiedene Arten von Bildern, anstatt einen einheitlichen Standard vorzugeben.
Die Größen Ihrer Shopify-Banner, Ihrer Produktbilder und Ihres Logos sollten sich alle voneinander unterscheiden.
Glücklicherweise sollte Ihnen der obige Leitfaden das gesamte Wissen vermitteln, das Sie zur Optimierung der Bilder für Ihren Shop benötigen.
Abschluss
Es kann schwierig sein, die Größe Ihrer Shopify-Bilder zu optimieren. Eine dieser Aufgaben, von denen Sie erwarten, dass sie in ein oder zwei Stunden erledigt sind, am Ende aber viel, viel mehr Zeit benötigen.
Wenn Sie jedoch das Einkaufserlebnis Ihrer Kunden verbessern möchten, müssen Sie sich die Zeit nehmen, Ihre Bilder für Verkauf und Leistung zu optimieren.
Bedenken Sie, dass Kunden Ihre Produkte im E-Commerce nicht in den Händen halten können. Das weist darauf hin, dass einer der wichtigsten Faktoren, die ihre Kaufentscheidungen beeinflussen, tatsächlich Ihre Bilder sind.
Beachten Sie, dass für viele Shopify-Themes besondere Anforderungen an die Bildgröße gelten. Überprüfen Sie daher immer noch einmal, ob Ihre Bilder angemessen sind.
