Das kennen Sie sicher: Die Produktseite in Shopify sieht professionell aus, die Fotos im Editor sind gestochen scharf, und dann springen mobile Besucher ab, während Ihr PageSpeed-Wert hartnäckig im niedrigen sechsstelligen Bereich stagniert. Das Problem ist meist nicht „schlechtes Design“. Vielmehr sind die Bilddateien zu groß für das Layout, und jedes zusätzliche Byte muss übertragen werden, bevor der Kunde das Produkt, den Preis oder den „In den Warenkorb“-Button sieht.

Deshalb sind Bildentscheidungen für einen Onlineshop nie nur Designentscheidungen. Sie beeinflussen die Seitenladegeschwindigkeit , die Bildqualität und wie viel von der Seite Google schnell genug crawlen und rendern kann, um relevant zu sein. Wenn Sie eine praktische Abkürzung zum Anpassen der Bildgröße suchen, ohne raten zu müssen, ist Yassine Maltis Leitfaden zur Bildgrößenanpassung eine hilfreiche Ergänzung. Er hilft Ihnen, die Funktionsweise zu verstehen, bevor Sie die nächste Bildersammlung hochladen.

Inhaltsverzeichnis

Warum die Dateigröße von Bildern in einem Shopify-Shop wichtig ist

Ein Händler kann eine optisch ansprechende Produktseite im Shopify-Adminbereich betrachten und dabei das eigentliche Problem übersehen. Die Seite mag auf einem Laptop über WLAN flüssig laufen, auf Mobilgeräten jedoch ruckeln, das Titelbild erscheint erst spät, und der Kunde scrollt über den sichtbaren Bereich hinaus, bevor die Seite richtig geladen ist. Genau in diesem Unterschied zwischen einer optisch ansprechenden und einer schnell ladenden Seite entscheiden die Bilddateigrößen darüber, ob ein Besuch zu Umsatz oder Frustration führt.

Der versteckte Wettbewerb auf jeder Seite

Jedes Bild in einem Online-Shop konkurriert mit Text, Skripten, Schema-Markup und der Geduld des Kunden. Ist das Hauptbild zu groß, verbraucht es nicht nur Bandbreite, sondern verzögert auch die Beurteilung des Angebots durch den Besucher. Die Dateigröße eines Bildes beeinflusst sowohl die Conversion-Rate als auch die Web-Vitals .

Shopify-Händler bemerken dies meist zuerst auf Produkt- und Kategorieseiten. Wenige große Fotos können das gesamte Layout, insbesondere in mobilen Netzwerken, überladen wirken lassen. Diese Überladung macht sich an den wichtigsten Stellen bemerkbar: im Hero-Bereich, in der Kategorieübersicht, beim Produktzoom und bei den Vorschaubildern. Ein Hero-Bild hat eine andere Funktion als ein Vorschaubild und sollte daher nicht so viel Speicherplatz benötigen. Dasselbe gilt für Kategorieübersichten, wo sich wiederholte Bilder schnell anhäufen und das Scrollen unnötig verlangsamen.

Die Dateigröße von Bildern beeinflusst auch, wie schnell die Seite nutzbar wird, weshalb sie in die Layoutplanung einbezogen werden sollte. Die ursprünglichen Bildabmessungen sind wichtig, aber die endgültige Dateigröße ist das, was der Browser laden und dekodieren muss. Wie Yassine Malti in seinem Leitfaden zur Bildgrößenänderung erklärt, kann eine kleinere Exportdatei die visuelle Wirkung des Bildes erhalten und gleichzeitig unnötigen Datenverbrauch reduzieren.

Der praktische Nutzen

Der Grund dafür ist einfach: Die zugrundeliegende Pixelanzahl bildet die Basis, Komprimierung und Format bestimmen die endgültige Dateigröße. Ein 24-Megapixel-Bild mit 24-Bit-RGB enthält etwa 72 Millionen Byte Rohdaten, während dasselbe Bild als JPEG bei 100 % Qualität etwa 423,41 KB oder bei 90 % JPEG-Qualität rund 211,7 KB groß sein kann – je nach Exportoptionen ( Scantips ). Dieser Unterschied erklärt, warum zwei Shops mit nahezu identisch aussehenden Bildern sehr unterschiedliche Ladezeiten erzielen können.

Praktische Regel: Wenn ein Bild für den Verkauf wichtiger ist als für die Dekoration, legen Sie vor dem Hochladen eine Zieldateigröße fest.

Das ist der Standard, den Händler anwenden sollten. Legen Sie ein Budget für jeden Platz im Shop fest und wählen Sie die passende Datei aus. Ein Hero-Banner kann mehr Platz beanspruchen als ein Vorschaubild, aber keines von beiden sollte den Rest der Seite unnötig belasten. Sobald diese Vorgehensweise etabliert ist, lassen sich Produktseiten leichter verwalten, und jeder neue Upload findet seinen Platz, anstatt zu einer zusätzlichen Belastung zu werden.

Bildgröße vs. Dateigröße und warum beides wichtig ist

Händler verwenden diese Begriffe oft synonym und wundern sich dann, warum ein Bild im Adminbereich einwandfrei aussieht, aber den Shop verlangsamt. Die Bildgröße gibt die Pixelabmessungen (Breite mal Höhe) an. Die Dateigröße hingegen bezeichnet die Größe der exportierten Datei in Bytes auf der Festplatte, üblicherweise in KB oder MB, und variiert je nach Komprimierung, Format und Farbtiefe. Zwei Bilder können die gleichen Abmessungen haben und dennoch sehr unterschiedliche Ladezeiten verursachen.

Ein Diagramm zum Vergleich der Bildgröße in Pixeln mit der Dateigröße in Bytes für digitale Fotografie und Grafik.

Pixel bestimmen die Decke

Pixel bestimmen, wie viele visuelle Details eine Datei enthalten kann. Ein 24-Megapixel-Bild mit 24-Bit-RGB-Farbtiefe umfasst etwa 72 Millionen Byte Rohdaten, da 24 Millionen Pixel × 3 Byte pro Pixel = 72.000.000 Byte . Diese Rohdatenmenge ist der Ausgangspunkt für den Export, nicht die endgültige Dateigröße, die der Browser empfängt.

Die Exportoptionen haben einen schnellen Einfluss auf das Ergebnis. Dasselbe Quellfoto kann als JPEG bei 100 % Qualität etwa 423,41 KB groß sein, bei 90 % JPEG-Qualität hingegen nur etwa 211,7 KB . Die Pixelanzahl bleibt gleich, während beim Export mehr oder weniger Details des Originals erhalten bleiben.

Komprimierung und Format entscheiden über das Ergebnis

Viele Shopify-Audits verlaufen an dieser Stelle mangelhaft. Händler gehen fälschlicherweise davon aus, dass große Bilder zu groß für das Web sind, doch Abmessungen und Dateigröße sind voneinander unabhängig. Ein großformatiges Bild kann durchaus eine akzeptable Dateigröße haben, wenn es optimal exportiert wird. Auch eine unscheinbare Grafik kann unnötig groß werden, wenn sie im falschen Format oder in der falschen Qualität gespeichert wird.

Dieser Unterschied ist je nach Funktion im Shop relevant. Ein Hero-Banner kann visuell präsenter sein als ein Vorschaubild, aber auch ein Produktbild muss klein genug sein, damit die Seite schnell geladen wird. Produktaufnahmen im Zoom benötigen genügend Pixeldetails, um auch aus der Nähe gut sichtbar zu sein, während Vorschaubilder oft Bandbreite verschwenden, wenn beim Export deutlich mehr Details gespeichert werden, als im Layout dargestellt werden können.

Faustregel: Die Pixelanzahl bestimmt, wie viele visuelle Details das Bild darstellen kann. Die Dateigröße bestimmt, wie viel Ihr Kunde herunterladen muss.

Wenn Sie diese beiden Zahlen getrennt halten, wird die Bildplanung einfacher. Ein schmales Vorschaubild profitiert nicht von übergroßen Abmessungen. Ein Zoombild auf einer Produktseite benötigt zwar genügend Pixel, um scharf zu sein, die exportierte Datei muss aber dennoch die Anforderungen der Core Web Vitals und die Kompatibilität mit dem restlichen Seiteninhalt erfüllen.

JPEG, PNG, WebP und AVIF im Vergleich

Jedes Bildformat erfüllt in einem Shopify-Shop einen anderen Zweck. Produktfotos, Logos und Screenshots erfordern jeweils eine unterschiedliche Bearbeitung, selbst wenn sie zum selben Theme gehören. Wählen Sie das Format anhand der Funktion des Bildes auf der Seite, nicht aus Gewohnheit.

Eine Infografik, die die Bildformate JPEG, PNG, WebP und AVIF vergleicht und ihre Merkmale sowie Anwendungsfälle beschreibt.

JPEG und PNG haben nach wie vor ihren Platz.

JPEG ist nach wie vor der Standard für Fotos. Es lässt sich gut komprimieren, funktioniert fast überall und sorgt in der Regel dafür, dass Produktbilder für das Web ausreichend klein sind. PNG eignet sich für Bilder, die scharfe Kanten, flächige Farben, Transparenz oder Text erfordern. Daher werden Logos und UI-Grafiken oft in diesem Format gespeichert, obwohl die Dateien meist größer sind.

Diese Trennung ist bei Shopify wichtig, da Shops üblicherweise beide Dateiformate mischen. Ein Lifestyle-Foto im PNG-Format ist meist größer als für den Shop nötig. Ein Logo im JPEG-Format kann unsauber aussehen oder an Transparenz verlieren, was später unnötige Nachbearbeitung erfordert. Das Format sollte sich nach dem Zweck richten, nicht nach Gewohnheit.

Eine Produktkarte ist ein gutes Beispiel. Bei einem klaren Produktfoto hält JPEG die Dateigröße in der Regel gering, ohne die Darstellung für den Kunden zu beeinträchtigen. Handelt es sich hingegen um ein Abzeichen, ein Symbol oder ein Logo vor farbigem Hintergrund, schützt PNG die Kanten besser und vermeidet unschöne Lichthöfe.

WebP und AVIF reduzieren die Dateigrößen

Moderne Formate reduzieren die Dateigröße in der Regel weiter. Ein Beispielbild vergleichbarer Qualität: JPEG (75 %) ist etwa 1,25–1,53 MB groß , WebP ( verlustbehaftet) etwa 0,72–0,88 MB , AVIF etwa 0,57–0,69 MB und JPEG XL etwa 0,55–0,67 MB ( W3Techs ). Das ist eine deutliche Reduzierung gegenüber früheren Exportgewohnheiten und erklärt, warum viele Online-Shops die Dateigröße verringern können, ohne dass die Fotos unscharf wirken.

Der Haken dabei ist, dass die Formatwahl weiterhin vom Inhalt abhängt. WebP und AVIF eignen sich hervorragend für Produktfotos, Grafiken mit Transparenz verhalten sich jedoch anders. Besteht eine Datei hauptsächlich aus einem Foto, sollte man ein Format wählen, das solche Bilder effizient komprimiert. Handelt es sich hingegen um ein Logo oder eine Grafik mit Transparenz, sollte man ein Format verwenden, das saubere Kanten gewährleistet.

In einem Shopify-Shop bedeutet das üblicherweise ein eigenes Format für das Hero-Banner, ein anderes für das Logo und ein weiteres für Detailaufnahmen der Produkte. Die richtige Wahl hängt weniger von einem modernen Look ab, sondern vielmehr davon, wie die Seite schnell lädt und gleichzeitig das Bild an seinem vorgesehenen Platz klar dargestellt wird.

Entscheidungsregel: Bei Fotos mit Personen, Produkten oder Texturen JPEG oder WebP wählen. Für flache Grafiken, Logos oder Screenshots PNG wählen. Falls Ihr Workflow einen Fallback zulässt, sind AVIF oder WebP die saubereren Optionen für den Live-Shop.

Wie Auflösung und Komprimierung die Zahlen verändern

Eine Datei kann auf dem Bildschirm gut aussehen und trotzdem viel größer sein als nötig. Genau das merken Händler bei Shopify als Erstes, denn dasselbe Bild kann sich als Hero-Banner, Kategorie-Kachel, Produkt-Zoomfoto oder kleines Vorschaubild ganz anders verhalten. Die Auflösung bestimmt, wie viele Pixel der Browser übertragen muss, und die Komprimierung legt fest, wie viel davon vor dem Laden der Seite entfernt wird.

Mehr Pixel bedeuten mehr Daten

Ein größeres Bild bietet nicht nur mehr Speicherplatz, sondern auch mehr Rohdaten, die der Browser verarbeiten muss. Wie bereits erwähnt, enthält ein 24-Megapixel-Bild vor der Komprimierung etwa 72 Millionen Byte Rohdaten . Exportiert man dieselbe Szene mit einer höheren Pixelanzahl, als der Online-Shop benötigt, wird die Datei größer, selbst wenn das Foto nach der Anzeige nahezu identisch aussieht.

Deshalb verursachen übergroße Exportdateien mehr als nur Speicherplatzprobleme. Sie erhöhen die Übertragungsgröße, belasten den Browser und können die Ladezeit des Bildes genau dort verlangsamen, wo Kunden eine schnelle Seitendarstellung erwarten. Eine Kachel im Kollektionsraster benötigt nicht so viel Speicherplatz wie ein zoombares Produktbild, und ein Vorschaubild benötigt noch deutlich weniger.

Komprimierung spart Geld, aber sie macht keine zusätzlichen Pixel kostenlos.

Komprimierung reduziert die Größe großer Quelldateien auf ein für Shopify effizientes Format, beseitigt aber nicht die Kosten für die Verwendung von mehr Pixeln als für die jeweilige Platzierung erforderlich. Wird ein Produktfoto in einer Galerie mit Zoomfunktion verwendet, ist es wichtig, dass es auf einem guten Bildschirm scharf dargestellt wird und genügend Details aufweist. Wird dasselbe Bild hingegen nur in einer Kollektionskarte verwendet, ist der Versand der Vollbildversion unnötig.

Die einfachste Erklärung ist folgende: Die Pixelanzahl bestimmt das Datenvolumen , da zu große Abmessungen unnötiges Gewicht verursachen. Die Qualitätseinstellung legt das maximale Einsparpotenzial fest , da sie bestimmt, wie viele Details beim Export erhalten bleiben. Das Format steuert, wie effektiv die Komprimierung ist , da verschiedene Dateitypen unterschiedlich stark komprimiert werden.

Für Hinweise zur Bildgrößenbestimmung im Zusammenhang mit Shopify-Anwendungsfällen ist dieser Shopify-Bild-SEO-Leitfaden eine hilfreiche Ergänzung. Er hilft dabei, die Exportentscheidung mit der tatsächlichen Platzierung zu verknüpfen, anstatt alle Shopbilder gleich zu behandeln.

Hero-Bild, Kollektionskachel und Vorschaubild erfordern jeweils unterschiedliche Detailstufen. Genau das übersehen Händler oft, und deshalb kann eine kleine Änderung der Auflösung im Editor harmlos erscheinen, während sie im Browser die Shop-Größe erhöht.

Core Web Vitals und die SEO-Kosten großer Bilder

Große Bilder schaden der Suchmaschinenoptimierung (SEO) direkt, da Google die Nutzererfahrung misst, nicht die Absicht hinter dem Upload. Auf vielen Shopify-Seiten ist das größte sichtbare Bild maßgeblich für die Ladezeit. Ist dieses Bild zu groß, verlangsamt sich der Largest Contentful Paint (LCP) , und der Besucher muss länger warten, bis die Seite nutzbar ist.

Ein Balkendiagramm, das veranschaulicht, wie sich zunehmende Bilddateigrößen negativ auf die Ladezeiten der Largest Contentful Paint-Seite auswirken.

LCP wird in der Regel für das Falsche verantwortlich gemacht.

Händler geben oft zuerst Apps, Skripten oder dem Theme-Code die Schuld, und manchmal haben sie Recht. Doch das Hero-Bild ist oft der einfachste Weg, um etwas zu bewirken. Ein zu großes Hero-Foto kann den Seitenaufbau hemmen, insbesondere auf Mobilgeräten, wo die Verbindungsqualität schwankt und der Bildschirm klein genug ist, dass übergroße Elemente leicht ins Auge fallen.

Eine weitere Kennzahl, die vom Bildgewicht beeinflusst wird, ist die kumulative Layoutverschiebung (CLS) . Wenn Ihr Theme nicht ausreichend Platz für Bilder reserviert, springt das Layout beim Laden der Dateien. Das wirkt auf Kunden unübersichtlich und erschwert die Nutzung der Seite. Shopify-Themes übernehmen oft bereits einen Teil dieser Arbeit, aber nicht immer ausreichend, um Händler vor einem ineffizienten Bild-Workflow zu bewahren.

Die Zielgrößen sind nicht zufällig.

Technische Richtlinien für die Webdarstellung empfehlen üblicherweise Produktfotos mit einer Auflösung von 800 bis 1000 Pixeln und einer Dateigröße von 80 bis 150 KB , Hero-Bilder unter 200 KB und ein Gesamtbildbudget von unter 500 KB pro Seite. Dieselben Richtlinien legen JPEGs oft auf 200 bis 600 KB , WebP auf 150 bis 450 KB , AVIF auf 80 bis 300 KB und PNG auf 500 KB bis 3 MB fest ( Vizua ). Diese Bereiche ergeben sich aus dem Zusammenhang zwischen Bildgröße und Seitenleistung.

Eine Seite muss nicht künstlich klein sein, um schnell zu laden. Wichtig ist jedoch eine effiziente Ladezeit. Wenn Ihre Bilder zu lange laden, zwingen Sie den Browser zu unnötigen Aufgaben, die das Einkaufserlebnis nicht verbessern. Das wirkt sich direkt auf die Suchmaschinenoptimierung aus, nicht nur theoretisch.

Für einen Shopify-spezifischen Blickwinkel auf den umfassenderen Auditprozess ist dieser Bild-SEO-Leitfaden für Shopify ein nützlicher Referenzpunkt.

Zielbilddateigrößen nach Shopify-Platzierung

Am einfachsten lässt sich das Rätselraten vermeiden, indem man für jede visuelle Rolle im Shop ein Dateigrößenbudget festlegt. Ein Hero-Banner hat eine andere Funktion als ein Vorschaubild, und eine Kollektionsübersicht sollte nicht mit der gleichen Dateigröße wie ein zoombares Produktbild exportiert werden. Sobald Händler den jeweiligen Platzierungen Bilddateigrößen zuweisen, lässt sich der Shop leichter schnell halten und deutlich einfacher prüfen.

Lassen Sie sich bei Ihren Exportentscheidungen vom Ladenlayout leiten.

Vollflächige Bilder benötigen in der Regel mehr Platz als kleine Layoutblöcke. Richtlinien für responsives Design empfehlen vollflächige Bilder mit einer Breite von ca. 1600 Pixeln und einer Größe von 200 bis 300 KB , kleinere Layoutbilder (25 % bis 50 %) mit ca. 800 Pixeln und 70 bis 350 KB sowie Bilder, die etwa doppelt so groß wie die Anzeigefläche sind, um auch auf hochauflösenden Bildschirmen scharf zu wirken. In der Praxis bedeutet dies, dass dasselbe Quellfoto oft in zwei verschiedenen Formaten exportiert werden muss: einmal für den vorgesehenen Platz und einmal für die höhere Auflösung, die ein hochauflösender Bildschirm erfordert.

Zielvorgaben für die Bilddateigröße nach Shopify-Platzierung Platzierung Zielbreite Zieldateigröße Empfohlenes Format
Heldenbanner Held am Seitenanfang Ungefähr 1600 Pixel 200 bis 300 KB JPEG oder WebP
Miniaturansicht des Sammlungsrasters Kollektionsfliesen Etwa 400 bis 600 Pixel 40 bis 80 KB JPEG oder WebP
Produktfoto Hauptproduktgalerie Etwa 800 bis 1200 Pixel 100 bis 200 KB JPEG, WebP oder AVIF
Miniatur- oder Farbmusterbild Kleiner Stützschlitz Etwa 200 bis 400 Pixel So leicht wie möglich halten JPEG oder PNG, je nach Inhalt

Ein Hero-Bild hat eine größere Wirkung, da es einen größeren Teil des Anzeigebereichs ausfüllt. Eine Kategoriekachel hingegen nicht. Diesen Unterschied sollten Händler beim Exportieren von Bildern für Shopify-Bereiche beachten, denn die Dateigröße sollte dem Platz entsprechen, den das Bild auf der Seite einnimmt.

Warum dasselbe Bild möglicherweise mehrfach exportiert werden muss

Eine Produktseite liefert oft mehrere Versionen derselben Datei über responsives Markup aus. Das ist normal. Der Browser sollte für kleinere Bildschirme eine kleinere Datei erhalten und nur dort eine größere, wo das Layout dies erfordert. Diese Konfiguration gewährleistet die Zoomqualität, ohne unnötig große Datenmengen an jeden Besucher zu senden.

Dasselbe Prinzip gilt auch außerhalb der Produktgalerie. Ein Onlineshop benötigt oft unterschiedliche Darstellungsformen für das Hauptbild, die Kollektionskarten und Detailaufnahmen. Damit Ihre Social-Media- und Sharing-Inhalte mit den Bildern Ihres Onlineshops harmonieren, hilft Ihnen dieser Shopify-Leitfaden für Social-Media-Bilder dabei, diese Anforderungen außerhalb der Produktseite in denselben Bild-Workflow zu integrieren.

Shopify-Faustregel: Die Exportgröße richtet sich nach dem Slot. Ein Hero-Element kann großzügig sein, ein Grid-Thumbnail nicht.

Diese Regel verhindert den häufigen Fehler, ein einziges riesiges Bild hochzuladen und darauf zu hoffen, dass das Theme das Problem löst. Themes können zwar helfen, aber sie können eine fehlerhafte Exportentscheidung nicht korrigieren.

Häufige Missverständnisse, die den Umsatz in Geschäften bremsen

Viele langsame Shopify-Shops sind darauf zurückzuführen, dass jemand einer Halbwahrheit geglaubt und diese immer wiederholt hat. Solche Gewohnheiten tauchen bei Audits immer wieder auf, meist weil der Ratschlag zunächst sinnvoll klang und nie mit der tatsächlichen Ladezeit des Shops abgeglichen wurde. Sobald man Gewohnheit und Performance trennt, sind die Lösungen in der Regel unkompliziert.

Fünf Glaubenssätze, die zu vermeidbaren Blähungen führen

  • Höhere Auflösung bedeutet nicht automatisch bessere Qualität. Das gilt jedoch nicht mehr, sobald das Bild größer ist als der von ihm eingenommene Platz. Zusätzliche Pixel verbessern die Ansicht für den Käufer nicht, sondern erhöhen lediglich das Gewicht.
  • PNG ist immer schärfer als JPEG. PNG ist die richtige Wahl für Logos und Grafiken mit harten Kanten, aber Produktfotos benötigen diesen verlustfreien Mehraufwand in der Regel nicht.
  • Shopify optimiert automatisch alles. Shopify hilft in manchen Fällen, aber der ursprüngliche Upload setzt immer noch die Obergrenze für die Dateigröße.
  • WebP schadet der Suchmaschinenoptimierung, weil Google es angeblich nicht lesen kann. Diese Annahme ist überholt. Suchmaschinen können moderne Formate wie normale Bilder darstellen.
  • Die Bildgröße ist nur auf Desktop-Computern relevant. Mobile Nutzer bemerken unnötig große Dateien zuerst, da ihre Geräte und Verbindungen weniger Fehlertoleranz bieten.

Die Korrekturhändler können sie sofort verwenden

Die Lösung beginnt mit der Umsetzung, nicht mit der Gewohnheit. Ein Hero-Bild muss von ausreichender Qualität sein, um den oberen Seitenrand zu füllen. Eine Kollektionskachel sollte klein bleiben, damit das Raster sauber geladen wird. Ein Zoombild kann mehr Details enthalten, da es eine andere Funktion erfüllt, während ein Vorschaubild oder eine Farbmusterkarte so klein wie möglich sein sollte, abhängig vom Layout.

Deshalb führt eine einheitliche Exportregel für jedes Bild zu Problemen. Bei Fotos sollte der Export auf Geschwindigkeit und natürliche Farben optimiert werden. Bei Grafiken mit Text oder Transparenz sollten die Ränder geschützt und eine größere Datei in Kauf genommen werden. Dateien, die für die Anzeige in voller Breite vorgesehen sind, sollten nicht hochgeladen werden, wenn sie in einen schmalen Bereich passen.

Wie im Abschnitt zur Auflösung erläutert, kann ein 24-MP-Bild nach der Komprimierung zwischen 2 und 8 MB groß sein. Dies verdeutlicht, warum die Pixelanzahl allein nicht ausreicht, um die Webtauglichkeit eines Bildes zu beurteilen. Entscheidend ist, ob die Datei zum jeweiligen Shopify-Platzierungsformat passt. Ein Hero-Bild verträgt mehr Speicherplatz als eine Rasterkarte, und ein Zoombild mehr als ein Vorschaubild. Der Export muss dem jeweiligen Zweck gerecht werden.

Ein damit zusammenhängender Fehler ist die Annahme, dass jedes Bild die gleiche Metadatenbereinigung erfordert. Wenn ein Bild wichtig genug ist, um hervorgehoben zu werden, sollte es vorher geprüft werden. Verwenden Sie den Alt-Text-Generator für Shopify-Bilder, um diesen Arbeitsschritt einheitlich zu gestalten, und vergleichen Sie anschließend die Dateigröße mit dem vorgesehenen Platzhalter.

Das ist der Punkt, den die meisten Shops übersehen. Die Datei muss nicht winzig sein. Sie muss nur geeignet sein.

Eine wiederverwendbare Checkliste für Ihren nächsten Bildstapel

Der effizienteste Bildbearbeitungs-Workflow ist der, den Ihr Team ohne Rätselraten wiederholen kann. Durch die wiederholte Durchführung derselben Prüfungen in derselben Reihenfolge vermeiden Sie zu große Uploads, unerwartete Layoutprobleme und langsame Produktseiten im Katalog. Wenn Sie eine neue Produkteinführung planen oder ein Design aktualisieren, führen Sie den Batch-Prozess mit dieser Routine durch, bevor die Änderungen veröffentlicht werden.

Eine einfache Exportroutine, die zu Shopify passt

  1. Exportieren Sie die Datei in der für die jeweilige Platzierung vorgesehenen Breite. Hero-Elemente, Kollektionskarten, Produktzoombilder und Vorschaubilder haben jeweils unterschiedliche Funktionen. Laden Sie daher keine größere Datei hoch, nur weil das Quellbild dies zulässt.
  2. Wählen Sie das Format je nach Verwendungszweck. Fotos eignen sich in der Regel für JPEG, WebP oder AVIF. Logos und textreiche Grafiken sind im PNG-Format besser aufgehoben, wenn Transparenz oder scharfe Kanten wichtig sind.
  3. Speichern Sie bei Bedarf eine Live-Version und eine Zoom-Version. Die Zoom-Datei kann mehr Details enthalten, die sichtbare Seite sollte diese jedoch nur dann enthalten, wenn das Layout dies unbedingt erfordert.
  4. Verwenden Sie nach Möglichkeit das leichtere, moderne Format. Nutzen Sie WebP oder AVIF für das Livebild und behalten Sie JPEG als Ausweichformat bei, wenn Kompatibilität wichtig ist.
  5. Überprüfen Sie die Bildmetadaten und den Alternativtext vor der Veröffentlichung. Wenn das Bild wichtig genug für die Veröffentlichung ist, sollte es auch geprüft werden. Nutzen Sie den Alternativtextgenerator von RankEngine, um diesen Arbeitsablauf einheitlich zu gestalten.

Screenshot von https://rankengine.app

Was Beständigkeit dir bringt

Kleine Verbesserungen summieren sich im gesamten Katalog. Ein einzelnes, helleres Titelbild wird einen Shop nicht grundlegend verändern, aber eine ganze Reihe gut dimensionierter Produktfotos, Kollektionskacheln und Vorschaubilder kann den Shop übersichtlicher, schneller und benutzerfreundlicher gestalten. Kunden bemerken das, selbst wenn sie nie über Dateigrößen sprechen.

Wenn Ihr Team Bildmetadaten in großem Umfang verarbeitet, kann der Alt-Text-Generator von RankEngine diesen Teil des Arbeitsablaufs am Laufen halten, ohne dass jeder Upload zu einer manuellen Aufgabe wird.

Wenden Sie diese Routine bei Ihrer nächsten Charge an, und Ihr Shop wird sofort schneller laden.