Auch verfügbar aufEnglish Français Español Nederlands Português 日本語

Leitfaden

Bild-SEO für Shopify: Größen, Dateigröße und Geschwindigkeit

Verfasst von RankEngine · redigiert von Moad Ouadrhiri · Aktualisiert 5. September 2026

9 Min. Lesezeit

Kurzantwort: Bild-SEO auf Shopify ist hauptsächlich ein Geschwindigkeitsproblem, kein Keyword-Problem. Produktfotos sind das größte Element auf der Seite und normalerweise das Largest Contentful Paint-Element, daher beeinflussen Dateigröße, Pixeldimensionen und Ladepriorität das Ranking mehr als Dateinamen. Laden Sie Bilder mit 2048 px auf der längsten Seite hoch, halten Sie das erste Bild unter etwa 200 KB, setzen Sie Breite und Höhe, laden Sie nur unterhalb der Falte verzögert und lassen Sie Shopifys CDN die verkleinerten WebP-Varianten bereitstellen. Dieser Leitfaden behandelt Größen, Dateigrößen, Auflösung, Größenanpassung und Formate; für Alt-Text siehe Produktbild-Alt-Text, für die Vorschau beim Teilen siehe Social Sharing Images.

Shopify liefert Bilder über sein eigenes CDN und generiert automatisch responsive Varianten, was bedeutet, dass viele allgemeine Bild-SEO-Ratschläge hier nicht zutreffen. Was bleibt, ist eine kurze Liste, und die meisten Punkte betreffen Gewicht und Dimensionen.

Warum Bilder die Shopify Core Web Vitals dominieren

Auf einer typischen Produktseite ist das Hero-Bild das LCP-Element — das größte Element im sichtbaren Bereich, und das, was Google misst. Wenn es 3,5 Sekunden dauert, bis es geladen ist, fällt die Seite beim LCP durch, egal wie schnell der Rest des Themes ist.

Zwei Dinge machen es langsam: Die Datei ist größer als der Raum, in den sie gerendert wird, und sie wird nicht priorisiert. Ein 2400 px Bild, das bei 800 px angezeigt wird, verschwendet drei Viertel der Bytes. Shopifys image_url-Filter mit einem Breitenparameter behebt dies, und die meisten modernen Themes verwenden ihn bereits — aber Bilder, die in Rich-Text-Felder, Blogtexte und benutzerdefinierte Abschnitte eingefügt werden, umgehen ihn normalerweise vollständig.

Bildgröße, Dateigröße und Auflösung sind drei verschiedene Dinge

Die meisten Bildratschläge scheitern, weil sie diese vermischen.

Bildgröße sind die Pixeldimensionen — 2048 × 2048. Sie entscheidet, wie scharf das Bild sein kann und wie groß es angezeigt werden kann.
Dateigröße sind die Bytes auf der Festplatte — 180 KB. Sie entscheidet, wie lange das Bild zum Herunterladen benötigt. Sie hängt von Dimensionen, Format, Kompression und dem Detailgrad des Fotos ab.
Auflösung (DPI) ist eine Druckanweisung. Browser ignorieren sie. Ein 1600 px Bild bei 72 DPI und dasselbe Bild bei 300 DPI sind dasselbe Webbild; die Regel "bei 72 DPI für das Web speichern" ändert nichts außer den Metadaten.

Die Variable, die neben den Pixeln wichtig ist, ist das Geräte-Pixel-Verhältnis. Ein Telefon mit einem 2× Bildschirm benötigt ungefähr die doppelte CSS-Breite in echten Pixeln, um scharf auszusehen: Eine 400 px breite Produktkarte benötigt auf diesem Gerät ein 800 px Bild und auf einem 1× Monitor ein 400 px Bild. Dafür sind srcset und sizes da — das Theme listet die Varianten auf, die Shopify generieren kann, und der Browser wählt die passende aus. Themes, die auf Shopifys image_tag-Filter basieren, geben diese automatisch aus; ein handgeschriebener img-Tag in einem benutzerdefinierten Abschnitt erhält eine Größe für alle.

Zielgrößen für Bilddateien je nach Platzierung

Eine einzige Regel "Bilder unter 100 KB halten" ist in beide Richtungen falsch — zu locker für Thumbnails, zu streng für ein Banner in voller Breite. Arbeiten Sie nach Platzierung:

Platzierung	Typische Anzeigebreite	Zielgröße der Datei	Warum
Homepage-Hero / Banner in voller Breite	1600–2000 px	≤ 200 KB (WebP), ≤ 300 KB (JPEG)	Fast immer das LCP-Element auf der Homepage
Erstes Produktbild (Galerie-Leitbild)	800–1200 px	≤ 200 KB	LCP-Element auf der Produktseite
Zusätzliche Galerie-Bilder	800–1200 px	≤ 100–150 KB	Beim Interagieren oder verzögert geladen
Sammlungsgitter-Karten	300–500 px	≤ 50 KB	Dutzende pro Seite; die Summe ist entscheidend
Blog-Inline-Bilder	700–900 px	≤ 100 KB	Umgehen normalerweise die Variantenlogik des Themes
Logos, Icons, Abzeichen	≤ 300 px	≤ 10 KB, SVG wenn möglich	Auf jeder Seite wiederholt

Dies sind Arbeitstargets, keine Gesetze: Eine detaillierte Stoffaufnahme benötigt mehr Bytes als ein Produkt auf weißem Hintergrund bei denselben Dimensionen. Der Test, der zählt, ist, ob das erste Bild auf der Seite das LCP-Budget einhält.

Formate: JPEG, PNG, WebP und was Shopify für Sie tut

JPEG für Fotografien. Exportqualität 75–82 ist der Bereich, in dem sich ein Produktfoto sichtbar nicht mehr verändert, aber die Datei weiter schrumpft.
PNG nur für flache Grafiken, die Transparenz benötigen — Logos, Abzeichen, Illustrationen mit harten Kanten. Ein PNG-Foto ist routinemäßig fünfmal so groß wie dasselbe JPEG.
WebP ist kleiner als beide bei gleicher visueller Qualität, und Shopifys CDN liefert WebP automatisch an Browser, die es akzeptieren. Eine Umwandlung vor dem Hochladen bringt daher auf dem Storefront nichts; was hilft, ist, dass eine App, die ein übergroßes Original durch eine WebP-Version ersetzt, jede Variante verkleinert, die Shopify daraus generiert.
SVG für Logos und Icons: auflösungsunabhängig und normalerweise nur wenige Kilobyte.

Bilder für Shopify verkleinern: Wo man es macht

Es gibt drei Orte, um die Größe zu ändern, und sie sind nicht austauschbar.

Vor dem Hochladen (bevorzugt für neue Bilder). Verkleinern Sie auf 2048 px auf der längsten Seite und komprimieren Sie dann. Jedes Bildbearbeitungsprogramm oder ein kostenloser Webkompressor kann dies tun, und es bedeutet, dass das Original, das Shopify behält, bereits schlank ist. Exportieren Sie eine ganze Fotoserie in derselben Größe und im selben Seitenverhältnis, damit das Sammlungsgitter gleichmäßig bleibt.

Innerhalb von Shopify, durch das Theme. Shopifys Varianten sind die Bereitstellungsschicht: Das Theme fordert eine Breite an und das CDN liefert diese Größe. Dies ist automatisch und korrekt, aber es verkleinert nur die Dimensionen — ein schweres, rauschendes Original produziert immer noch schwerere Varianten als ein sauberes.

Durch eine App, die das Original umschreibt. Dies ist der einzige Weg, der Bilder im Katalog ohne erneutes Hochladen repariert. RankEngines Autopilot hat eine Auto Image Compression-Regel, die übergroße Produktbilder in WebP umwandelt und das Original über die Admin-API ersetzt (productCreateMedia, dann productDeleteMedia), und sein Aktivitätsprotokoll zeichnet jede Umwandlung mit der Größe davor und danach auf — siehe Einrichten von Autopilot-Regeln. Manuelles erneutes Hochladen hat einen Kostenpunkt, den der App-Weg vermeidet: Es ändert die Bild-URL, was Links und zwischengespeicherte Verweise auf die alte Datei bricht.

Der Kompromiss zwischen Leistung und Qualität, ehrlich

Kompressionsanleitungen versprechen oft keinen sichtbaren Verlust. Die ehrliche Version: Es gibt einen Verlust, und die Frage ist, ob ein Käufer ihn in der Größe, in der das Bild angezeigt wird, sehen kann. Überprüfen Sie das Ergebnis auf der echten Produktseite bei 100 %, auf einem Telefon, nicht in der vergrößerten Vorschau des Editors. Streifen in einem glatten Verlauf, Halos an harten Kanten und matschige Stofftexturen sind die drei Anzeichen; wenn Sie sie sehen, erhöhen Sie die Qualität um fünf Punkte und exportieren Sie erneut. Der Gewinn von 82 auf 60 ist klein in Bytes und groß in Artefakten, weshalb der nützliche Bereich schmal ist.

Was tatsächlich zu tun ist

Laden Sie mit 2048 px auf der längsten Seite hoch. Shopify generiert kleinere Varianten aus dem Original, daher verschwendet das Hochladen größerer Dateien Speicherplatz, ohne etwas zu verbessern. Das Hochladen kleinerer Dateien bedeutet, dass die Zoomansicht unscharf ist.

Lassen Sie Shopify WebP bereitstellen. Es geschieht automatisch basierend auf dem Accept-Header des Browsers. Manuelles Konvertieren vor dem Hochladen bringt nichts und kostet Sie den JPEG-Fallback.

Setzen Sie Breiten- und Höhenattribute. Fehlende Dimensionen verursachen Layoutverschiebungen, während das Bild geladen wird, was eine direkte CLS-Strafe ist. Themes, die image_tag verwenden, erhalten dies kostenlos; handgeschriebene img-Tags in einem benutzerdefinierten Abschnitt normalerweise nicht.

Laden Sie alles unterhalb der Falte verzögert — und nichts darüber. Ein lazy-Attribut auf dem Hero-Bild verzögert das LCP-Element und verschlechtert die Punktzahl. Das erste Bild sollte stattdessen eine hohe Abrufpriorität haben.

Bildposition	Lade-Strategie	Grund
Oberhalb der Falte (Hero / LCP-Element)	fetchpriority="high", kein Lazy-Loading	Lazy-Loading verschiebt das größte sichtbare Malerelement nach hinten und verschlechtert die Punktzahl
Oberhalb der Falte (andere Bilder)	Eager (der Standard)	Sichtbare Bilder sollten nicht verzögert werden
Unterhalb der Falte	loading="lazy"	Bilder außerhalb des Bildschirms werden verzögert, was das anfängliche Seitengewicht reduziert und Bandbreite für das LCP-Element freigibt

Komprimieren Sie vor dem Hochladen, wenn die Quelle eine Kameradatei ist. Shopifys Verarbeitung ist nicht aggressiv. Ein 6 MB DSLR-JPEG wird zu einer 900 KB Variante; dasselbe Bild, das zuerst durch einen Kompressor läuft, wird zu 200 KB ohne sichtbaren Unterschied.

Dateinamen und Alt-Text: die ehrliche Version

Dateinamen sind ein schwaches Signal. Das Umbenennen von IMG_4821.jpg in blue-merino-scarf.jpg lohnt sich, wenn Sie ohnehin hochladen, und es lohnt sich nicht, ein Massen-Upload-Projekt zu starten — erneutes Hochladen bricht bestehende Bild-URLs und alle Links zu ihnen.

Alt-Text ist wichtiger, hauptsächlich für Barrierefreiheit und Google Images, und es wird ausführlich behandelt in Produktbild-Alt-Text. Der kostenlose Alt-Text-Generator schreibt ihn Bild für Bild im Browser.

Das eine, was es wert ist, gemessen zu werden

Führen Sie eine Produktseite durch PageSpeed Insights und schauen Sie sich nur zwei Zahlen an: das LCP-Element (es wird das Bild benennen) und seine Größe. Wenn das LCP-Element ein Bild über 200 KB ist, ist das das ganze Projekt.

Alles andere — Dateinamen, Sitemaps, EXIF-Daten — ist ein Rundungsfehler im Vergleich zu dem Bild, das zwei Sekunden zum Laden benötigt.

Es über einen Katalog hinweg tun

Die Version pro Seite ist einfach. Die Katalogversion ist es nicht: Bei 800 Produkten sind die übergroßen Bilder eine Teilmenge, normalerweise die ältesten oder eine Charge, die aus einem Lieferantenfeed importiert wurde.

RankEngines Geschwindigkeitsprüfung berichtet pro URL LCP mit dem benannten problematischen Bild, und seine Bildtools kennzeichnen übergroße Dateien und fehlende Dimensionen im gesamten Katalog statt pro Seite; die Kompressions- und Alt-Text-Regeln beheben sie dann beim täglichen Autopilot-Lauf innerhalb des pro Store festgelegten Fixlimits, wobei jede Änderung gegen den Store verifiziert und aus dem Protokoll rückgängig gemacht werden kann.

Checkliste für Ihre nächste Bildserie

Gleiches Seitenverhältnis für jedes Bild in der Sammlung.
2048 px auf der längsten Seite, exportiert bei JPEG-Qualität 75–82 (oder WebP).
Erstes Bild auf der Seite unter 200 KB; Gitter-Thumbnails unter 50 KB.
Beschreibender Dateiname, wenn Sie ohnehin hochladen; niemals ein erneutes Hochladen nur zum Umbenennen.
Alt-Text, der für das Produkt geschrieben ist, nicht für das Keyword.
Nach der Veröffentlichung: PageSpeed Insights auf einer Produktseite — bestätigen Sie das LCP-Element und seine Größe.

Häufig gestellte Fragen

Welche Größe sollten Shopify-Produktbilder haben?

Laden Sie Produktbilder mit 2048 Pixeln auf der längsten Seite hoch, quadratisch für eine Galerie, die ein konsistentes Gitter benötigt. Shopify generiert die kleineren Varianten, die ein Theme von diesem Original anfordert, sodass ein größeres Hochladen Speicherplatz hinzufügt, ohne Schärfe hinzuzufügen, und ein kleineres die Zoomansicht weich lässt. Halten Sie jedes Bild in einer Sammlung im gleichen Seitenverhältnis, damit das Gitter nicht verschoben wird.

Verkleinert Shopify automatisch Bilder?

Ja, bei der Auslieferung. Shopify behält das Original, das Sie hochladen, und sein CDN liefert verkleinerte Varianten, wenn ein Theme eine Breite anfordert (der image_url-Filter mit einem Breitenparameter), und konvertiert in WebP für Browser, die es akzeptieren. Was Shopify nicht tut, ist ein übergroßes Original zu verkleinern oder es aggressiv zu komprimieren, sodass eine 6 MB Kameradatei Sie bei jeder Variante kostet, bis sie komprimiert oder ersetzt wird.

Was ist eine gute Bilddateigröße für eine Webseite?

Beurteilen Sie nach Platzierung statt nach einer einzigen Zahl. In einem Shopify-Store sind die Arbeitstargets unter 200 KB für das Hero- oder erste Produktbild, etwa 100 KB für jedes zusätzliche Galerie-Bild, unter 50 KB für Sammlungsgitter-Thumbnails und einstellige Kilobytes für Logos und Icons. Das erste Bild auf der Seite ist das, was Google für Largest Contentful Paint misst, also ist es das, was es wert ist, am härtesten zu kürzen.

Welche Auflösung sollten Webbilder haben?

Auflösung für das Web sind Pixeldimensionen, nicht DPI. Die 72 DPI-Regel ist ein Überbleibsel aus der Druckära, das Browser ignorieren: Ein 1600×1600 Pixel Bild sieht bei 72 oder 300 DPI identisch aus. Passen Sie die Bildgröße für den größten Slot an, den es füllt, berücksichtigen Sie hochauflösende Bildschirme, indem Sie etwa die doppelte CSS-Breite an Geräte liefern, die ein 2× Pixelverhältnis melden, und lassen Sie srcset die Variante auswählen.

Wie kann ich Bilder auf Shopify verkleinern, ohne Qualität zu verlieren?

Verkleinern Sie zuerst auf die Zielpixelgröße und komprimieren Sie dann, indem Sie bei einer JPEG-Qualität von etwa 75–82 oder als WebP exportieren, und vergleichen Sie das Ergebnis bei 100 % auf der tatsächlichen Produktseite statt in der Editorvorschau. Machen Sie es vor dem Hochladen oder mit einer App, die das Original ersetzt; Shopifys eigene Varianten verkleinern nur die Dimensionen, sie stellen keine Qualität wieder her, die durch eine überkomprimierte Quelle verloren ging.

Braucht Bild-SEO auf Shopify eine App?

Nicht für einen kleinen Katalog — verkleinern und komprimieren Sie vor dem Hochladen, setzen Sie Breite und Höhe im Theme, und schreiben Sie den Alt-Text von Hand. Bei mehreren hundert Produkten sind die übergroßen Dateien eine Teilmenge, die Sie nicht mit bloßem Auge finden können. RankEngines Autopilot hat eine Auto Image Compression-Regel, die übergroße Produktbilder in WebP umwandelt und das Original ersetzt, und eine KI-Alt-Text-Regel, wobei jeder Lauf protokolliert und rückgängig gemacht werden kann.