Shopify Bildgrößen: Produktfotos, Banner & Mobile-Zuschnitt erklärt

Das Wichtigste in Kürze

• Shopify dokumentiert Größen für Produktbilder, nicht für Banner. Produktbilder können bis zu 5000 x 5000 px groß sein und müssen unter 20 MB liegen, wobei 2048 x 2048 px für quadratische Fotos empfohlen werden.¹ Die Banner-Dimensionen hängen von deinem Theme ab.
• Für ein Desktop-Banner in voller Breite ist 3840 x 1600 px ein sicherer Upload. Dawn fordert nie ein Banner an, das breiter als 3840 px ist.²
• Banner werden auf Mobilgeräten abgeschnitten, weil sich die Form der Box ändert. Die richtige Lösung ist ein separates Mobile-Bild, was Horizon unterstützt und Dawn nicht.³
• Unscharfe Bilder sind fast immer ein Breitenproblem. Entweder ist die Datei für den Platz bei 2x-Auflösung zu klein, oder das Theme fordert vom CDN eine zu kleine Version an.

Eine Tabelle mit Shopify-Bildgrößen beantwortet die halbe Frage. Die andere Hälfte ist, warum ein Banner, das in der richtigen Größe exportiert wurde, auf einem Smartphone trotzdem abgeschnitten wird. Dieser Guide gibt dir zuerst die Tabelle, erklärt dann, was Shopify nach dem Upload mit der Datei macht, warum Banner abgeschnitten werden und wie man Unschärfe behebt.

Jede Zahl ist als dokumentiert (Shopify veröffentlicht sie) oder empfohlen (wir haben sie aus dem Theme-Code abgeleitet) gekennzeichnet, damit du weißt, was Regeln und was Erfahrungswerte sind.

Warum du uns vertrauen kannst

Wir sind seit über vier Jahren im Shopify-Bereich tätig und haben mit hunderten von Shopify-Marken an ihren Storefronts gearbeitet. Jacques hat über 15 Jahre Erfahrung in der Webentwicklung. Wir bauen Fudge, einen KI-Storefront-Editor mit einer Bewertung von 4.9 im Shopify App Store und dem „Built for Shopify“-Status. Die hier genannten Zahlen wurden am Tag des Schreibens aus der Shopify-Dokumentation und dem Quellcode der Themes Dawn und Horizon abgelesen.

Was sind die richtigen Shopify-Bildgrößen in 2026?

Die harten Upload-Limits

• Produkt- und Kategoriebilder: bis zu 5000 x 5000 px oder 25 Megapixel, und unter 20 MB.¹
• Bilder für dein Theme: Shopifys Theme-Bilder-Seite nennt 20 Megapixel und 20 MB als Upload-Limits.⁶ Die beiden Angaben weichen leicht ab, aber da in der Tabelle nichts die 7 Megapixel übersteigt, liegen beide weit über dem, was du benötigst.
• Was das CDN ausliefert: Der image_url-Filter akzeptiert eine Breite oder Höhe von bis zu 5760 px und vergrößert ein Bild nie über seine Originalabmessungen hinaus.⁷

Shopify-Bildgrößen vs. das, was Käufer herunterladen

Die Datei, die du hochlädst, ist nicht die Datei, die ein Käufer herunterlädt. Das Shopify-CDN generiert auf Anfrage kleinere Versionen in dem modernen Format, das der jeweilige Browser unterstützt, einschließlich WebP und AVIF.⁶

Das Theme entscheidet, welche Version angefragt wird. Es listet mehrere Breiten desselben Bildes in einem srcset-Attribut auf, und ein sizes-Attribut teilt dem Browser mit, wie breit das Bild auf dem Bildschirm erscheinen wird. Der Browser wählt dann die kleinste Version, die diesen Platz auf dem entsprechenden Gerät ausfüllt.

Shopifys image_tag-Filter schreibt dieses Markup, inklusive der width- und height-Attribute, die verhindern, dass die Seite beim Laden von Bildern springt (Layout Shift).⁷ Wie das integrierte CDN im Vergleich zu Drittanbietern abschneidet, erfährst du in unserem Shopify Image CDN Vergleich.

Warum ein 2x-Bild wichtig ist und ein 6000 px-Bild nicht

Smartphones und viele Laptops packen zwei oder drei Gerätepixel in jeden CSS-Pixel. Eine Produktkarte, die auf dem Bildschirm 400 px breit ist, benötigt ein 800 px großes Bild, um bei 2x scharf auszusehen.

Mehr als 2x bringt nichts, da das Theme die Obergrenze festlegt. Das Banner in Dawn fordert maximal 3840 px an und seine Produktgalerie 1946 px.² Ein Banner mit 6000 x 3375 px hat zudem 20,25 Megapixel und überschreitet damit das Limit für Theme-Bilder.

Shopify Banner-Größe: Warum wird mein Banner auf dem Handy abgeschnitten?

Shopify veröffentlicht keine Banner-Größe, weil das Banner eine Box ist, deren Form durch die Theme-Section und nicht durch dein Bild bestimmt wird. Die Section skaliert dein Bild so, dass es die Box ausfüllt, und schneidet alles ab, was nicht hineinpasst.⁶

Dawn macht diese Mathematik leicht verständlich. Wenn die Höhe auf „Mittel“ und den Standardeinstellungen steht, ist das Bildbanner auf dem Desktop mindestens 560 px hoch und der Bildbereich auf dem Handy 340 px hoch.²

• Auf einem 1440 px breiten Laptop ist die Box 1440 x 560 px groß, also etwa 2,6:1.
• Auf einem 390 px breiten Smartphone ist die Box 390 x 340 px groß, also etwa 1,15:1.

Ein 2,4:1 Desktop-Banner, das diese Handy-Box abdeckt, zeigt nur etwa die mittleren 48 % seiner Breite. Ein 16:9-Bild zeigt etwa 65 %, verliert dafür aber rund 30 % seiner Höhe auf dem Laptop.

Keine einzelne Datei passt perfekt in beide Boxen. Es gibt vier Möglichkeiten, damit umzugehen. Wenn das Banner noch nicht eingerichtet ist, lies zuerst Wie man das Homepage-Banner in Shopify ändert.

Lösung 1: Einen Fokuspunkt setzen

Ein Fokuspunkt (Focal Point) teilt dem Theme mit, welcher Teil des Bildes immer im Bildausschnitt bleiben muss. Klicke auf das Bild unter Inhalt → Dateien, im Theme-Editor oder im Medienbereich eines Produkts, klicke auf den wichtigsten Bereich oder ziehe den blauen Punkt dorthin und speichere.⁶

Jedes Bild hat einen Fokuspunkt, der überall dort gilt, wo das Bild verwendet wird. Es funktioniert ab Dawn 7.0.0 und in jedem Horizon-Theme.

Ein Fokuspunkt entscheidet, was vom Zuschnitt verschont bleibt. Er verhindert den Zuschnitt nicht.

Lösung 2: Die Section an das Bild anpassen lassen

Stelle in Dawn die Bannerhöhe auf An erstes Bild anpassen (Adapt to first image). Die Section übernimmt nun das eigene Seitenverhältnis des Bildes, sodass nichts abgeschnitten wird.

Der Nachteil zeigt sich auf dem Handy: Ein 2,4:1-Banner wird auf einem 390 px breiten Smartphone zu einem schmalen Streifen von etwa 160 px Höhe.

Lösung 3: Text nicht ins Bild einbauen

Fest in die Grafik integrierter Text (eingebacken) wird zusammen mit dem Rest des Bildes abgeschnitten und schrumpft auf dem Handy zur Unleserlichkeit. Shopifys Empfehlung lautet, Text aus Slideshows und Hintergrundbildern herauszuhalten und ihn direkt im Theme-Editor als echtes Textelement hinzuzufügen.⁶

Echter (Live-)Text behält bei jeder Breite die richtige Größe, bricht automatisch um und ist für Suchmaschinen sowie Screenreader lesbar. Wenn du Text zwingend einbauen musst, platziere ihn innerhalb der mittleren 40 % der Breite.

Sale-Grafiken sind hier oft die Übeltäter. Unser Guide zur Black Friday Homepage behandelt, was in dieser Woche noch geändert werden sollte.

Lösung 4: Ein separates Mobile-Bild verwenden

Das ist die saubere Lösung: Ein breites Bild für den Desktop und ein 4:5-Hochformat für Handys, wobei jedes optimal für seine eigene Box gestaltet ist.

Horizon unterstützt dies nativ. Die Hero-Section verfügt über eine Checkbox Auf Mobilgeräten andere Medien anzeigen, die Mobile-Image-Picker einblendet. Das Theme gibt dann ein picture-Element aus, das die Bildquelle unter 750 px austauscht.³

Dawn tut dies nicht. Das Bildbanner hat zwar zwei Image-Picker, aber „Bild 2“ wird auf dem Desktop neben „Bild 1“ angezeigt und auf dem Handy gestapelt. Es ist keine echte Mobile-Alternative.²

Ein häufiger Workaround sind zwei Banner-Sections, bei denen per CSS jeweils eine pro Bildschirmgröße ausgeblendet wird. Shopifys Performance-Richtlinien empfehlen stattdessen ein picture-Element, damit der Browser auch wirklich nur das passende Bild herunterlädt.⁸

Der Fudge-Weg. Fudge fügt die fehlende Einstellung und das responsive Markup direkt in die Banner-Section deines Themes ein, sodass du nur noch die beiden Bilddateien bereitstellen musst. Sag Fudge:

“Füge meinem Homepage-Banner eine separate Mobile-Bild-Einstellung hinzu, damit Handys einen 4:5-Hochformat-Ausschnitt anzeigen und der Desktop die breite Version behält. Lass die Überschrift als echten Text über dem Bild.”

Du erhältst den nativen Theme-Code als Entwurf, den du auf beiden Bildschirmgrößen in der Vorschau prüfen kannst, bevor du ihn veröffentlichst.

Der Code, falls du ihn selbst hinzufügst

Dupliziere zuerst dein Theme, gehe dann zu Onlineshop → Themes → ⋯ → Code bearbeiten und öffne die Banner-Section. Füge dem Section-Schema einen Image-Picker hinzu:

{
    "type": "image_picker",
    "id": "mobile_image",
    "label": "Mobile image (4:5)"
}

Gib dann beide Bilder innerhalb eines einzigen picture-Elements aus:

{%- assign desktop_image = section.settings.image -%}
{%- assign mobile_image = section.settings.mobile_image -%}

<picture>
  {%- if mobile_image != blank -%}
    <source
      media="(max-width: 749px)"
      srcset="
        {{ mobile_image | image_url: width: 800 }} 800w,
        {{ mobile_image | image_url: width: 1200 }} 1200w,
        {{ mobile_image | image_url: width: 1600 }} 1600w
      "
      sizes="100vw"
      width="{{ mobile_image.width }}"
      height="{{ mobile_image.height }}"
    >
  {%- endif -%}
  {{
    desktop_image
    | image_url: width: 3840
    | image_tag:
      widths: '750, 1100, 1500, 2000, 3000, 3840',
      sizes: '100vw',
      loading: 'eager',
      fetchpriority: 'high'
  }}
</picture>

Vier Dinge, die du wissen solltest:

• loading: 'eager' und fetchpriority: 'high' gehören nur in das allererste Banner auf der Seite. Weiter unten solltest du loading: 'lazy' verwenden und den Prioritäts-Hinweis weglassen. Siehe hierzu unseren Fix für Hero Banner Eager Loading.
• Der Fokuspunkt kommt vom Desktop-Bild. image_tag schreibt ihn als Inline-object-position-Style, passe die mobile Datei also so an, indem du sie selbst schon optimal zuschneidest.
• Prüfe, ob das CSS das Bild noch erreicht. Dawn stylt das Bild als direktes Kindelement seines Media-Wrappers. Diese Regeln müssen also auf das Bild innerhalb des picture-Elements abzielen.
• In Dawn muss auch die Box aktualisiert werden. Wenn „An erstes Bild anpassen“ ausgewählt ist, liest die Regel oben in image-banner.liquid das Seitenverhältnis des Desktop-Bildes für beide Bildschirmgrößen aus. Leite die Mobile-Regel auf das Mobile-Bild um.

Shopify Produktbild-Größe: Grids (Raster) einheitlich halten

Ein Kategorie-Grid sieht aufgeräumt aus, wenn jedes Beitragsbild (Featured Image) dasselbe Seitenverhältnis hat. Shopifys Dokumentation betont denselben Punkt: Gemischte Formate werden nebeneinander in unterschiedlichen Größen angezeigt.¹

Wähle ein Verhältnis und exportiere alles passend dazu: 2048 x 2048 px für quadratisch oder 2048 x 2560 px für 4:5-Hochformat, was sich sehr gut für Kleidung und hohe Produkte eignet.

Das Theme kann dieses Verhältnis erzwingen. In Dawn haben das Produkt-Grid, die Featured Collection und die Collection-Listen-Sections jeweils eine Einstellung für das Bildverhältnis mit drei Optionen: An Bild anpassen, Porträt (Hochformat) und Quadratisch. Porträt ist im Code 4:5.²

Porträt und Quadratisch schneiden das Bild von der Mitte aus zu, sodass es die Karte ausfüllt – es sei denn, es ist ein Fokuspunkt gesetzt. „An Bild anpassen“ zeigt jedes Foto unbeschnitten an, was die typische Ursache für ungleichmäßige Reihen ist.

Dawn hat keine 2:3-Option. Ein 2:3-Foto in einer Porträt-Karte verliert etwa 17 % seiner Höhe. Prüfe also, ob Köpfe und Säume erhalten bleiben. Zum Austauschen der Dateien siehe Wie man Produktbilder in Shopify aktualisiert.

Der Fudge-Weg. Wenn die Karteneinstellung deines Themes nicht das gewünschte Format bietet, ändert Fudge das Karten-Markup und das CSS für dich. Sag Fudge:

“Mache alle Produktkarten-Bilder auf Kategorieseiten zu einem 4:5-Hochformat, zugeschnitten aus der Mitte, ohne sie zu verzerren.”

Du erhältst die Änderung als Entwurf zur Überprüfung. Die Fotos benötigen natürlich weiterhin genug Freiraum um das Produkt herum, um diesen Zuschnitt schadlos zu überstehen.

Warum sehen meine Shopify-Bilder unscharf aus?

Unschärfe bedeutet in der Regel, dass dem Browser weniger Pixel geliefert wurden, als der Bildschirm benötigt. Arbeite diese Liste in der angegebenen Reihenfolge ab:

1. Ist es nur für einen kurzen Moment unscharf? Shopify merkt an, dass Bilder anfangs weich erscheinen und dann schärfer werden können, während die vollständige Version noch lädt. Das ist normal.⁶
2. Ist die Quelldatei groß genug? Nimm die maximale Breite, in der das Bild auf dem Bildschirm erscheint, und verdopple sie. Eine 1200 px breite Datei in einem vollflächigen Banner reicht auf keinem Laptop aus.
3. Was genau hat der Browser geladen? Klicke mit der rechten Maustaste auf das Bild, wähle „Untersuchen“ und fahre mit der Maus über die Bild-URL. Chrome zeigt dir die gerenderte Größe und die tatsächliche (intrinsic) Größe an. Wenn die tatsächliche Größe auf einem 2x-Bildschirm kleiner als die gerenderte mal zwei ist, verursacht das die Unschärfe.
4. Welche Breite hat das Theme angefordert? Shopify CDN-URLs enthalten einen width=-Wert. Wenn deine Datei 3000 px breit ist, in der URL aber width=1100 steht, ist das srcset oder sizes des Themes die Fehlerquelle.
5. Wurde die Datei vor dem Upload künstlich vergrößert oder extrem komprimiert? Ein kleines Bild einfach hochzuskalieren fügt nur neue Pixel hinzu, aber keine echten Details. Das CDN vergrößert Bilder ebenfalls nie von sich aus.⁷
6. Befindet sich Text im Bild? Eingebackener Text wird sofort weichgezeichnet und unscharf, sobald das Bild skaliert wird.

Die Fälle 2, 5 und 6 lassen sich beheben, indem du eine bessere Datei exportierst. Fall 4 erfordert einen Fix im Theme.

Der Fudge-Weg. Ein falscher sizes-Wert oder ein srcset, das bei zu kleinen Werten aufhört, erfordert eine Code-Änderung innerhalb der Section. Sag Fudge:

“Mein Hero-Bild sieht auf dem Desktop unscharf aus. Überprüfe, welche Breiten die Section anfordert, und repariere das srcset, damit große Bildschirme ein scharfes Bild erhalten.”

Fudge bearbeitet die Art und Weise, wie die Section das Bild anfordert, und gibt dir das Ergebnis als Entwurf zurück. Die Bilddateien müssen von dir weiterhin in der richtigen Größe exportiert werden – Fudge korrigiert lediglich, wie das Theme sie anfordert und zuschneidet. Die Seite über den Shopify Store Editor zeigt, was das Tool sonst noch so alles anpassen kann.

Welches Dateiformat und welche Dateigröße solltest du hochladen?

Lade JPEG für Fotos und PNG für Logos, Icons und flache Grafiken mit Transparenz hoch. Das ist die generelle Richtlinie von Shopify für Theme-Bilder.⁶ Auf der Seite für Produktmedien steht PNG für Produktfotos an erster Stelle, hier funktioniert also beides.¹ WebP- und HEIC-Uploads werden ebenfalls problemlos akzeptiert.

Das genaue Upload-Format ist heutzutage weniger wichtig als früher, da das CDN es bei der Auslieferung ohnehin meistens in WebP oder AVIF konvertiert, sofern der Browser des Kunden dies unterstützt.

Zur Dateigröße (Gewicht) sagt Shopify ganz klar, dass Bilder vor dem Upload nicht komprimiert werden müssen und dass du die bestmögliche Qualität hochladen solltest.⁶ Die Käufer laden schließlich die verkleinerte und optimierte Version des CDNs herunter, niemals dein massives Original.

Das einzig sinnvolle Ziel bei der Erstellung sind also die Abmessungen in Pixeln, nicht die Anzahl der Kilobytes. Exportiere in den Pixelgrößen aus unserer Tabelle in hoher Qualität, bleibe unter dem 20 MB Limit und lass das Shopify CDN den Rest bei der Komprimierung erledigen. Ein JPEG vor dem Upload schon extrem zu komprimieren, führt nur dazu, dass es später unschön doppelt komprimiert wird.

Falls du deine Originale aus Archivierungsgründen dennoch kleiner haben möchtest, behandelt unser Guide zum Komprimieren von Bildern in Shopify die passenden Tools dafür.

FAQ