Optimal optimiert: Bilder in deinem Shopify Shop

Ein berühmtes Sprichwort sagt “Bilder sagen mehr als tausend Worte” und tatsächlich ist die Kraft von Bildelementen auch im Kontext von Online-Shops mächtig und das Thema daher absolut elementar. Immerhin transportieren die gewählten Bildwelten die Philosophie deines Shopify-Shops und stellen, gekonnt eingesetzt, eine direkte emotionale Verbindung zu deiner Zielgruppe her. Zudem setzen Bilder deine Produkte bestmöglich in Szene und inspirieren so zum Kauf. Bei der Relevanz ist es nicht weiter verwunderlich, dass Bilder auch in unseren Blog-Beiträgen immer wieder Thema sind.

Wie anspruchsvoll es allerdings sein kann, die richtigen Bilder zu erhalten oder auszuwählen, zeigt sich auch in unseren Kundenprojekten immer wieder. Mit lizenziertem, professionellem Bildmaterial vom Hersteller oder einem guten (Produkt-)Fotografen für die eigenproduzierten Produkte kann dies erfahrungsgemäß am besten gelingen. Für generische Themen, die richtige Stimmung oder den Weg zur Zielgruppe müssen aber auch hochwertige Stockbilder, wenn sie gekonnt ausgewählt werden, nicht unbedingt ein Ausschlusskriterium darstellen. Egal, ob die Wahl der idealen Bildwelt zur richtigen Zielgruppenansprache oder die technischen Aspekte optimierter Bilder für einen besseren Geschwindigkeits-Score – es lohnt sich definitiv, Zeit, Ressourcen und Mühe zu investieren.

Da wir uns dem Thema Bildwelten bereits im Zuge der Zielgruppenansprache gewidmet haben und wir immer wieder Nachfragen zum Thema Bildoptimierung bekommen, widmen wir uns diesbezüglich heute eher den technischen Aspekten, auch bei diesem Thema deinen Shopify-Shop bestmöglich aufzustellen. Das Thema Shop-Geschwindigkeit spielt hierbei eine besondere Rolle, denn bei jeder zusätzlichen Sekunde Seitenladezeit verlassen ungefähr 10 % der Nutzer einen Onlineshop. Lass uns also schauen, was Shopify für dich tut und was sonst bei diesem Thema noch wichtig ist.

Das optisch perfekte Bild

Nicht nur eine stimmige Bildkomposition, sondern auch das richtige Format an sich ist für den Einsatz von Bildern in den unterschiedlichen Elementen deines Shopify-Shops elementar. Nur so entsteht auf der Startseite sowie auf den Produkt-, Kategorie- und Unterseiten ein ansprechender Look. In vielen Themes aus dem Shopify Theme Store hast du die Möglichkeit, Bildhöhen selbst zu bestimmen sowie für mobile Ansichten Extra-Bildmaterial einzusetzen. Zudem gibt Shopify in den Elementen oftmals sogar direkte Empfehlungen zu idealen Formaten und Bildgrößen. Besonders wenn du auf den Bildelementen Texte, Buttons o.ä. platzieren möchtest, empfehlen wir dir, auf diese Aspekte bei der Bildkomposition explizit zu achten, so dass der von dir gewünschte, ansprechende Eindruck entsteht. Hierbei solltest du bedenken, dass durch das Responsive Design die Darstellung anders sein kann als auf deinem PC, Laptop oder Smartphone und generell eine gute Lesbarkeit und ein angenehmer Eindruck bestehen sollte.

Aus unserer Praxis möchten wir dir an dieser Stelle zudem noch folgende kurze Tipps ans Herz legen:
Bildqualität: Die Bildqualität transportiert immer auch die Produktqualität. Bemühe dich um eine sehr gute Qualität und durchdachte Kompositionen (Farbe, Ausleuchtung, Details, Schärfe an der richtigen Stelle) deiner Bilder und dein Produkt wird sich besser verkaufen.
Bildbearbeitung: Wenn die Basis deiner Bilder stimmt, kannst du mit Software noch etwas herausholen. Aber auch hier gibt es Grenzen im Bereich Kontrast, Helligkeit oder Farbwerten. – Schau bitte unbedingt, dass es nicht zu unnatürlich wirkt und im schlimmsten Fall ein zu großer Gap zwischen Produktrealität und Bild liegt.
Bildnamen: Aus SEO-Gründen solltest du nicht einfach die Standard-Dateinamen verwenden, sondern gerade wenn es um Bild-SEO geht, im Dateinamen und im Alt-Attribut relevante Schlüsselwörter verwenden, damit die Suchmaschinentauglichkeit deines Shopify-Shop verbessert wird. Die Erstellung, schlüsselwortreicher Dateinamen ist für die Bildoptimierung also entscheidend, denn für die Suchmaschinen sind nicht nur die Texte in deinem Shopify relevant, sondern unter anderem auch die Dateinamen deiner Bilder.

Wenn du diese Tipps durchgehend beherzigst, wird dein Shop also nicht nur besser aussehen, sondern auch mehr Besucher und damit potenzielle Kunden erhalten – und das bei überschaubarem Mehraufwand.

Bildoptimierung durch Shopify

Shopify bietet verschiedene Funktionen zur Bildoptimierung, um die Ladezeiten von Shops zu verbessern und die Benutzerfreundlichkeit zu erhöhen. Lass uns die Ansatzpunkte von Shopify zu diesem Thema näher betrachten.

Bildkomprimierung

Ein ansprechendes Ergebnis kann nur dann erzielt werden, wenn die Auflösung des genutzten Bildmaterials ausreichend groß ist und in jeder Ansicht die Bilder klar angezeigt werden. Dieses Ziel sollte jedoch nicht dazu führen, dass du Bilder in überdimensionaler Größe einbindest. Bei der Erstellung qualitativ hochwertiger Bilder mit einer möglichst geringen Dateigröße musst du drei Hauptfaktoren beachten: das verwendete Bildformat (JPEG, PNG oder WebP), den Grad der Bildkomprimierung und die Bildhöhe und -breite. Mit einer optimalen Wahl bei diesen drei Aspekten kannst du die Bildgröße minimieren.

Als Shopify-Shop-Betreiber musst du diesen Aufwand jedoch gar nicht betreiben, denn Shopify komprimiert deine Bilder automatisch, bevor sie in deinem Onlineshop angezeigt werden. Dies geschieht ohne sichtbaren Qualitätsverlust, sodass die Bilder weiterhin gut aussehen, aber weniger Speicherplatz benötigen und schneller geladen werden. Die Bildkomprimierung erfolgt über das Content Delivery Network (CDN) von Shopify. Dies ist ein Netzwerk aus verschiedenen miteinander verbundenen Servern, die das Laden deines Onlineshops für datenintensive Anwendungen beschleunigt. Es komprimiert deine Bilder automatisch mit einer Qualitätseinstellung, die für den E-Commerce bestens geeignet ist. Wenn du den Code deines Themes anpasst oder ein individuelles Shopify Theme erstellst, solltest du unbedingt darauf achten, dass du in deinem Liquid Code image_url und image_tag verwendest, um automatisch die Vorteile vieler responsiver Bildfunktionen zu nutzen.

Resizing

Bei vielen Themes aus dem Shopify Theme Store wird nur eine bestimmte Größe eines Bildes basierend auf der Größe des Bildschirms, auf dem das Bild angezeigt wird, geladen. Das Theme passt die Größe der Bilder damit automatisch an die Größe des Bildschirms deiner Nutzer an. Dies verhindert, dass zu große Bilder geladen werden müssen, die dein Shopbesucher gar nicht sehen kann, was Bandbreite und Ladezeit spart.

Lazy Loading

Themes aus dem Shopify Theme Store laden Bilder erst, wenn sie im Sichtbereich des Benutzers sind. Dies kann die Ladezeit der Seite erheblich verbessern, insbesondere wenn viele Bilder auf einer Seite vorhanden sind. Dies bewirkt, dass dein Shopify-Shop nicht zu langsam wird, denn das ist schlecht für die Kundenzufriedenheit und die Conversion-Rate. Wie wertvoll das ist, wird klar, wenn man sich die Statistik anschaut: Bei einer Verzögerung von nur zwei Sekunden bei der Seitengeschwindigkeit kann die Absprungrate um 103 % steigen. Zwei Sekunden fühlen sich für Menschen sehr lange an, immerhin können sie nur Verzögerungen bis zu einer Zehntelsekunde wahrnehmen und alles, was länger dauert, fühlt sich nicht wie "sofort" an.

WebP-Unterstützung

Shopify unterstützt das WebP-Bildformat, ein neueres, von Google ins Leben gerufene Format, das bei gleicher Qualität kleinere Dateigrößen als JPEG bietet. Das sorgt für schnellere Ladezeiten, geringeren Bandbreitenverbrauch und weniger erforderlichem Speicherplatz.

Responsive Darstellung

Bildoptimierung bedeutet auch, dass deine Bilder sowohl auf dem Desktop als auch auf mobilen Endgeräten ohne Einschränkungen gut zu betrachten sind. In vielen Themes aus dem Shopify Theme Store kannst du für Desktop und Mobile unterschiedliche Bilder hinterlegen. Diese Möglichkeit solltest du unbedingt nutzen, sodass auf allen Endgeräten ein möglichst optimales Nutzererlebnis garantiert ist.

Reduzierung von Elementen

Einige Shopbetreiber neigen dazu, ihren Shop mit Bildern und Informationen zu überladen. Shopify hat auch hierfür eigene Schutzmaßnahmen, die dies verhindern sollen. So kannst du beispielsweise nicht mehr als 50 Produkte auf einer Kategorieseite oder 25 Abschnitte auf einer Seite verwenden. Allerdings können auch diese Schutzmaßnahmen nicht komplett verhindern, dass sich Bilder auf die Leistung deines Onlineshops auswirken. Wenn du mit der Geschwindigkeit deines Shopify-Shops nicht zufrieden bist, kannst du beispielsweise auch einmal testen, ob deine Slideshow vielleicht zu umfangreich ist. In der Regel reicht die Verwendung von 2 bis 3 Slides aus. Auch nur ein Feature-Bild zu verwenden, kann hilfreich sein.

Shopify sorgt mit den dargestellten Maßnahmen von sich aus dafür, dass deine Shopbesucher ein optimales Nutzererlebnis haben.

Fazit

Optimierte Bilder sind wichtig, um die Ladezeiten deines Shopify-Shops zu verbessern und die Benutzerfreundlichkeit zu erhöhen. Dies kann zu einer höheren Konversionsrate und einem besseren SEO-Ranking Ihres Shops führen. Shopify hat das Thema Bilder von sich aus auf dem Zettel und tut einiges dafür, dass deine Bilder optimal optimiert sind und deinen Onlineshop nicht überlasten. Du siehst, auch in Sachen Bildoptimierung ist Shopify als Shopsystem für dein E-Commerce-Projekt eine fantastische Wahl. Solltest du Unterstützung bei deinem Projekt wünschen, komm gerne auf uns zu!