Shopify-Bilder optimieren: Größen, Formate und Komprimierung

Beispiel: ein Hauptproduktfoto vorbereiten

Angenommen, du hast ein scharfes Produktfoto mit 3600 × 2400 Pixeln und dein Shop verwendet quadratische Hauptbilder. Die folgenden Schritte zeigen einen Arbeitsablauf, keine gemessenen Komprimierungsergebnisse oder zugesicherten Downloadgrößen.

1. Zuschnitt wählen. Teste ein Quadrat mit 2400 × 2400 Pixeln, das das gesamte Produkt zeigt. Passt es nicht hinein, ändere die Komposition, statt wichtige Teile abzuschneiden.
2. Einheitlichkeit prüfen. Vergleiche das Bild mit zwei bestehenden Produktkarten. Passe den Außenraum an, damit das Produkt ähnlich groß wirkt.
3. Passende Ausgangsdatei vorbereiten. Vergleiche eine Kopie mit 2048 × 2048 Pixeln mit dem Zuschnitt in voller Größe. Erhalte genug Details für Produktansicht und Zoom. Vergrößere kein kleines Original nur für diesen Zahlenwert.
4. Format wählen. Nutze ein klares JPG für ein Foto vor einfarbigem Hintergrund oder PNG bei nötiger Transparenz. Erstelle Komprimierungskandidaten aus dem guten Original.
5. Hochladen und prüfen. Prüfe Produktseite, Kollektion und Smartphone-Ansicht. Wichtige Kanten dürfen nicht fehlen; Zoom sollte nützliche Details zeigen.
6. Ausgelieferte Version prüfen. Bei Unschärfe oder langsamer Seite untersuche zuerst die vom Theme geladene Version, bevor du erneut exportierst.

Funktioniert dieser Ablauf für eine kleine Auswahl, übertrage ihn auf ähnliche Produkte. Prüfe Ausnahmen einzeln. Glänzender Schmuck und ein schlichter Karton können trotz gleicher Maße und Komposition unterschiedliche Qualitätseinstellungen brauchen.

Was Shopify bereits automatisch übernimmt

Unterscheide zwischen dem Bild, das du hochlädst, und der Version, die der Browser des Kunden lädt. Wird der Upload von 4 MB auf 1 MB verkleinert, sinkt die Datenmenge für den Kunden nicht zwangsläufig im selben Verhältnis.

Shopify erstellt verschiedene Bildgrößen und kann WebP oder AVIF ausliefern, wenn der Browser sie unterstützt. Laut der Anleitung für Theme-Bilder ist eine manuelle Komprimierung vor dem Upload nicht nötig. Im Adminbereich bleibt die ursprüngliche Qualität erhalten, während der Shop eine optimierte Version anzeigen kann.

Ein klares, gut gestaltetes Original ist deshalb wertvoller als eine möglichst kleine Datei um jeden Preis. Stark komprimierte Details kann Shopify nicht wiederherstellen. Lädt dein Theme dagegen eine winzige Version eines scharfen Fotos und vergrößert sie, liegt das Problem nicht am Original.

Gehe vom sichtbaren Problem aus: Bei ungünstigem Zuschnitt korrigierst du Bildaufbau oder Theme-Einstellung, bei einem unscharfen Original brauchst du ein besseres Foto. Lädt ein scharfes Bild langsam, untersuche die ausgelieferte Version. Erneutes Komprimieren ist nicht für alle drei Probleme der richtige erste Schritt.

Bildmaße passend zum Einsatz wählen

Richte die Maße nach der größten sinnvollen Ansicht, nicht nur nach der kleinen Produktkarte. Ein scharfes Vorschaubild kann für Galerie oder Zoom zu klein sein. Pixelmaße geben Breite und Höhe an; die Dateigröße in KB oder MB beschreibt die enthaltene Datenmenge.

Für Produkt- und Kollektionsbilder erlaubt Shopify bis zu 5000 × 5000 Pixel beziehungsweise 25 Millionen Pixel bei einer Dateigröße unter 20 MB. Für quadratische Produktbilder empfiehlt es 2048 × 2048 Pixel als Ausgangspunkt, nicht als Pflicht für jeden Shop. Prüfe die Anforderungen an Produktmedien, bevor du viele Bilder vorbereitest.

Die Upload-Grenzen können je nach Bereich abweichen. Shopifys Dokumentation zum Bereich Dateien nennt 20 MB und 25 Millionen Pixel für Bilder, die Anleitung zu Theme-Bildern dagegen 20 Millionen Pixel für andere Bild-Uploads. Beachte die Hinweise und Fehlermeldungen des jeweiligen Upload-Feldes statt einer vermeintlich einheitlichen Grenze im gesamten Adminbereich.

Ein 700 Pixel breit angezeigtes Produktfoto kann auf einem Bildschirm mit zwei Bildpixeln pro Anzeigepixel von einer 1400 Pixel breiten Version profitieren. Das ist ein Planungsbeispiel, keine Regel zum Verdoppeln aller Uploads. Für Zoom können mehr Details nötig sein; kleine Karten sollten weiterhin kleinere Versionen erhalten.

Mache nicht jedes Foto quadratisch, nur weil quadratische Produktkarten üblich sind. Eine hohe Flasche, Kleidung und ein Landschaftsfoto brauchen womöglich unterschiedliche Bildaufbauten. Halte die Form dort einheitlich, wo sie den Produktvergleich erleichtert.

Ein Banner mit 1200 × 600 Pixeln hat ein Seitenverhältnis von 2:1. Eine Datei mit 2400 × 1200 Pixeln behält diese Form und bietet mehr Details für hochauflösende Displays. Das sind Beispielmaße, keine Shopify-Bannervorgaben. Im schmalen, hohen Mobilbereich können große Teile der Seiten verschwinden. Ein separates Mobilbild hilft, sofern dein Theme es unterstützt.

JPG oder PNG passend zum Inhalt wählen

Teste JPG für normale Fotos ohne Transparenz. Teste PNG für transparente Hintergründe oder Grafiken mit scharfer Schrift und feinen Linien, die in JPG leiden. Vergleiche die Dateien, statt ein Format für den gesamten Katalog vorauszusetzen.

Ein PNG-Foto kann deutlich größer als ein JPG sein. Eine Konvertierung lohnt sich nur, wenn das Produkt weiterhin korrekt dargestellt wird. Prüfe Stoffe, Schmuck, Holzmaserung und kleine Aufdrucke. Eine kleine Datei, die diese Details verdeckt, ist kein gutes Produktbild.

WebP hochzuladen ist eine Möglichkeit, keine Voraussetzung für moderne Auslieferung. Shopify kann das Ausgabeformat unabhängig vom Upload-Format wählen. Eine im Browser geladene AVIF-Datei bedeutet ebenfalls nicht, dass du AVIF hochladen musst. Prüfe die akzeptierten Formate des jeweiligen Feldes.

Weißer Hintergrund bedeutet nicht Transparenz: Ein bereits vorhandenes weißes Rechteck hinter dem Produkt verschwindet durch Speichern als PNG nicht. Prüfe transparente Bilder vor dem tatsächlichen Seitenhintergrund, besonders an hellen Kanten und Schatten. Unser Leitfaden zu Bildformaten erklärt ihre jeweiligen Einsatzmöglichkeiten.

Einheitliche Produktfotos ohne abgeschnittene Details

Das Seitenverhältnis beschreibt das Verhältnis von Breite und Höhe. 2000 × 2000 und 1000 × 1000 Pixel ergeben dieselbe quadratische Form, enthalten aber unterschiedlich viele Details. Einheitliche Form genügt nicht: Produkte sollten auch einen ähnlichen Anteil der Hauptbilder ausfüllen.

Vergleiche eine Reihe von Produktkarten. Füllt ein Schuh das Bild aus und steht ein anderer in viel Weißraum, wirkt die Reihe trotz identischer Maße uneinheitlich. Passe den Bildaufbau an, um Vergleiche zu erleichtern. Lass genügend Platz, damit alle Produktkanten sichtbar bleiben.

Zuschneiden entfernt Bildbereiche, Skalieren verändert die Maße und Strecken verzerrt die Proportionen. Nutze den Bildzuschnitt für den Bildaufbau und die Größenänderung zum proportionalen Verkleinern. Eine ins Quadrat gestreckte Flasche vermittelt eine falsche Vorstellung ihrer Form.

Mit dem Produktbild-Optimierer kannst du eine Serie gemeinsam vorbereiten: Lege Arbeitsfläche und Abstände fest, schneide jedes Foto zu oder verschiebe es und vergleiche die Serie unter Alle Bilder. Ähnliche Produkte sollten ungefähr gleich viel Platz im Bild einnehmen. Unterschiedliche Bildausschnitte korrigiert eine gemeinsame Arbeitsfläche nicht automatisch. Exportiere ein klares JPG oder bei benötigter Transparenz ein PNG und prüfe es in deinem Theme. Das Werkzeug erstellt Dateien; Shopify übernimmt weiterhin die Auslieferung und das Theme die Darstellung.

Je nach Theme kannst du in Shopifys Bildeinstellungen einen Fokuspunkt setzen, damit ein wichtiger Bereich beim Zuschneiden sichtbar bleibt. Das hilft bei Gesichtern oder Produkten im Banner, macht aber eine breite Komposition nicht vollständig auf einem schmalen Bildschirm sichtbar. Prüfe beide Ansichten.

Verwende für Werbeüberschriften und Schaltflächen möglichst die Textfelder des Themes. In ein Banner eingebetteter Text wird auf dem Smartphone womöglich zu klein oder abgeschnitten. Echter Seitentext kann umbrechen und markiert werden; eine echte Schaltfläche funktioniert als Link statt nur als Bild.

Wann Komprimieren vor dem Upload hilft

Komprimierung hilft bei unnötig großen Dateien, langsamen Uploads oder überschrittenen Dateigrenzen. Sie bringt weniger, wenn das Original bereits klar und handlich ist und Shopify eine passende Version liefert. Verschlechtere nicht die Qualität, nur um jedes Produktfoto unter einen willkürlichen Wert wie 100 KB zu drücken.

Bewahre eine unveränderte Kopie auf. Sind die Maße für den Einsatz zu groß, verkleinere zunächst eine Kopie und teste dann deren Komprimierung. Bei einem kleinen Inhaltsbereich kann das mehr sparen als wiederholtes Komprimieren eines riesigen Originals. Produktzoom kann größere Maße rechtfertigen.

Für einen Vergleich mit einer komprimierten Kopie nutze Pixilos Bildkomprimierung. Sie verarbeitet bis zu 20 JPG-, PNG- oder WebP-Bilder gleichzeitig, jeweils höchstens 25 MB, und behält Format und Maße bei. Ihre Upload-Grenzen unterscheiden sich von Shopifys. Beginne mit wenigen typischen Bildern und prüfe sie vor dem Rest.

PNG wird hier verlustfrei komprimiert: Die Pixel bleiben unverändert. Bereits gut komprimierte PNGs werden vielleicht nur wenig kleiner. JPG- und WebP-Komprimierung können feine Details verändern; prüfe die heruntergeladene Kopie. Wird die Datei nicht kleiner, behält Pixilo das Original.

Vergleiche Produktfotos in der Kundenansicht und gegebenenfalls im Zoom. Prüfe feine Strukturen, kleine Beschriftungen, gleichmäßige Hintergründe und transparente Kanten. Kehre zum Original zurück, wenn wichtige Details verloren gehen. Unser Leitfaden zur Optimierung von Produktbildern behandelt diese Qualitätsprüfung genauer.

Hilfreiche Alt-Texte und klare Dateinamen schreiben

Bilder-SEO beginnt mit einem Bild, das beim Verständnis des Produkts hilft. Gib ihm vor dem Upload einen sinnvollen Namen, etwa olivgruener-canvas-rucksack-vorderansicht.jpg. Vermeide lange Suchwortlisten. Der Name sollte das Foto von Seitenansichten oder Detailaufnahmen unterscheiden.

Alt-Text ist die textliche Alternative zum Bild. Beschreibe die relevante Ansicht, etwa: „Olivgrüner Canvas-Rucksack von vorn mit zwei Außentaschen.“ Bei Detailaufnahmen beschreibst du das Detail statt die Hauptbildbeschreibung zu wiederholen. Ergänze keine Preise, Rabatte oder Suchbegriffe, die das Bild nicht erklärt.

Googles Anleitung zur Bilder-SEO empfiehlt beschreibende Dateinamen und hilfreiche Alt-Texte ohne Keyword-Stuffing. Auch der umliegende Seitentext liefert Kontext. Ein Dateiname ist ein kleiner Hinweis, kein Ersatz für eine hilfreiche Produktseite.

Alt-Text für ein Shopify-Produktbild hinzufügen

1. Öffne im Shopify-Adminbereich Produkte und wähle das Produkt aus.
2. Klicke im Medienbereich auf das Bild, um die Vorschau zu öffnen.
3. Wähle Alt-Text hinzufügen, gib eine kurze Beschreibung ein und wähle Alt-Text speichern.
4. Wiederhole das für weitere hilfreiche Ansichten und beschreibe jeweils den sichtbaren Inhalt.

Die Schritte folgen Shopifys Anleitung für Alt-Texte bei Produktmedien. Theme-Banner haben eigene Bildeinstellungen. Prüfe vorgeschlagene Beschreibungen am Foto, bevor du sie übernimmst: Farbe, Material und Produktdetails müssen stimmen.

Beschreibungen in den Dateieigenschaften deines Computers werden nicht automatisch zu Alt-Text. Ein Theme kann dasselbe Bild unterschiedlich einsetzen. Dekorative Bilder brauchen möglicherweise eine leere Textalternative; verlinkte Bilder sollten das Linkziel verständlich machen.

Unser Leitfaden zu Alt-Texten und Dateinamen erklärt diese Fälle mit Beispielen. Beschreibungen unterstützen Barrierefreiheit und Verständnis, garantieren aber keine Rankings und ersetzen keine fehlenden Produktinformationen.

Den veröffentlichten Shop auf Smartphone und Computer prüfen

Die Vorschau im Adminbereich genügt nicht. Beginne mit diesen Prüfungen im veröffentlichten Shop; dafür brauchst du keine Entwicklertools.

• Produkt auf dem Smartphone öffnen. Ist es vollständig sichtbar? Lassen sich wichtige Aufdrucke lesen und Materialien erkennen?
• Eine Kollektionsreihe prüfen. Haben die Hauptbilder einheitliche Formen und Außenabstände?
• Galerie und Zoom ausprobieren. Bringen weitere Fotos nützliche Details? Zeigt die gewählte Farbe oder Variante das richtige Produkt?
• Seite neu laden. Erscheint das Hauptfoto zügig, und bleiben Text und Schaltflächen beim Laden an ihrem Platz?
• Auf einem größeren Bildschirm wiederholen. Prüfe breite Banner und größere Produktansichten, statt dich allein auf die schmale Vorschau zu verlassen.

Unscharfe oder langsam ladende Bilder genauer untersuchen

Bleibt ein Bild unscharf, prüfe, ob das Theme eine kleine Version vergrößert. Lädt eine kleine Karte ein riesiges Bild, kontrolliere die angebotenen kleineren Versionen. Responsive Bilder lassen den Browser passende Größen für Layout und Bildschirm wählen.

Shopifys image_tag-Dokumentation erklärt Größenvarianten im Theme-Code. Bei nötigen Korrekturen sollte der Entwickler angeforderte Maße sowie die Attribute srcset und sizes prüfen. Ein Problem im Theme-Code löst du nicht durch separate Uploads jeder Vorschaubildgröße.

Wenn du mit Entwicklertools vertraut bist, zeigt der Netzwerkbereich die tatsächlich geladenen Dateien. Alternativ kannst du dem Theme-Entwickler die betroffene Seite und das Bild schicken.

1. Öffne Produktseite und Entwicklertools und wähle Netzwerk (Network).
2. Deaktiviere bei geöffnetem Bereich den Browser-Cache für den Test und lade neu. So untersuchst du einen frischen Download statt einer gespeicherten Kopie.
3. Filtere nach Bildern und suche das Hauptproduktfoto. Prüfe die Vorschau, damit du es nicht mit einer kleinen Galerie-Miniatur verwechselst.
4. Prüfe übertragene Größe, Bildmaße und den Antwort-Header Content-Type. Eine JPG-ähnliche URL kann WebP oder AVIF liefern.
5. Wiederhole den Test nach Neuladen mit Smartphone-Layoutbreite. Die kleinere Ansicht sollte nicht unnötig die größte verfügbare Version laden.

Bewerte die Auslieferung nicht nur anhand der Dateigröße. Hochauflösende Displays oder Zoom können größere Versionen rechtfertigen. Suche klare Missverhältnisse: eine winzige Datei über die ganze Galerie gestreckt oder volle Originalauflösung für jede kleine Kollektionskarte.

Das Hauptbild oben sollte schnell verfügbar sein. Weiter unten können Bilder meist warten, bis Besucher sich ihnen nähern. Shopifys Entwicklerhinweise raten vom verzögerten Laden der ohne Scrollen sichtbaren Bilder ab. Erscheint das erste Foto deutlich spät, lass das Ladeverhalten prüfen. Sofortiges Laden sämtlicher Galeriebilder kann ein neues Problem schaffen.

Ladegeschwindigkeit und Layoutbewegungen getrennt prüfen

Ist das Hauptproduktfoto das größte sichtbare Element, kann es den Messwert Largest Contentful Paint (LCP) beeinflussen. Er erfasst, wann das größte sichtbare Bild oder der größte Textblock erscheint. Eine kleinere Datei hilft nur, wenn deren Download zur Verzögerung beiträgt. Beginnt die Anfrage zu spät, kann sie trotz Komprimierung langsam bleiben. Googles LCP-Anleitung erklärt den Unterschied.

Schiebt ein erscheinendes Foto Preis oder Kaufbutton nach unten, hat das Theme möglicherweise zu wenig Platz reserviert. Das trägt zum Messwert Cumulative Layout Shift (CLS) bei, der unerwartete Layoutbewegungen beschreibt. Reserviere den Bildplatz im Layout, statt nur stärker zu komprimieren. Siehe Googles Anleitung zu Layoutverschiebungen und unseren Leitfaden zu Bildern und Core Web Vitals.

Vergleiche dieselbe Seite vor und nach der Änderung unter ähnlichen Bedingungen und ändere jeweils nur eine Sache. Unterscheide den simulierten PageSpeed-Test von gegebenenfalls angezeigten echten Nutzerdaten. Werte schwanken, und Nutzerdaten aktualisieren sich nicht sofort. Dokumentiere das behobene Problem statt nur einen höheren Einzelwert.

Erst die Ursache finden, dann Bilder ändern

Shopifys Anleitung zur Shop-Performance nennt auch Themes, Apps und zusätzlichen Code als Faktoren. Die Berichte beruhen auf echten Besucherdaten. Werden Bilder bereits effizient geladen, konzentriere dich auf den verbleibenden Engpass statt einer weiteren Bild-App oder stärkerer Katalogkomprimierung.

Welche Bilder zuerst verbessern?

Beginne mit Hauptfoto und Kollektionskarte eines häufig besuchten Produkts, danach mit einem auffälligen Startseitenbanner. Priorisiere sichtbare Probleme wie unlesbare Aufdrucke, abgeschnittene Produkte oder spät erscheinende Bilder. Das fünfte Foto einer selten besuchten Galerie ist meist weniger wichtig als das erste Bild, anhand dessen Kunden über das Weiterstöbern entscheiden.

Notiere Seite, Originalmaße, Zuschnitt, Format und die Verbesserung. Behalte das Original, um schlechte Ergebnisse rückgängig machen zu können. Übertrage einen bewährten Ablauf auf ähnliche Produkte und prüfe Ausnahmen einzeln, statt den gesamten Katalog auf einmal zu ersetzen.

Häufig gestellte Fragen

Welche Größe eignet sich am besten für Shopify-Produktbilder?

Es gibt keine ideale Größe für jedes Layout. 2048 × 2048 Pixel sind ein guter Start für quadratische Fotos; Theme, Komposition und Zoom bestimmen den Bedarf. Verwende ein scharfes Original innerhalb der Upload-Grenzen und prüfe die veröffentlichte Produktseite. Vergrößere kein kleines Foto nur auf 2048 Pixel.

Komprimiert Shopify Bilder automatisch?

Shopify optimiert die Auslieferung und kann verschiedene Größen und Formate senden. Das bedeutet nicht, dass das gespeicherte Original durch eine stark komprimierte Kopie ersetzt wird. Zuschnitt und übergroße Maße kannst du vorab verbessern; jedes Bild manuell zu komprimieren ist nicht nötig.

Sollten alle Produktbilder unter 200 KB bleiben?

Nein. Ein willkürliches Dateiziel kann wichtige Details entfernen, besonders bei Zoom-Fotos. Prüfe Größe und Qualität der tatsächlich heruntergeladenen Version. Eine kleine Kollektionsminiatur und eine große Detailansicht haben unterschiedliche Anforderungen.

Ist PNG oder JPG besser für Shopify?

Teste JPG für Fotos ohne Transparenz und PNG für transparente Grafiken oder Schrift, die in JPG leidet. Prüfe insbesondere feine Produktdetails. Shopify kann ein anderes Format ausliefern als das hochgeladene.

Brauche ich eine Bildoptimierungs-App?

Nicht allein für Shopifys automatische Auslieferung. Eine App kann bei bestimmten Aufgaben wie einer großen Bildbibliothek helfen. Kläre zuerst, was die vorhandenen Werkzeuge und das Theme nicht leisten. Prüfe den tatsächlichen Effekt auf einer Beispielseite vor einem shopweiten Einsatz.

Brauche ich für jede Bildschirmgröße ein separates Bild?

Für normale Produktfotos meist nicht: Ein gutes Theme fordert verschiedene Größen desselben Uploads an. Ein eigener mobiler Bildaufbau hilft, wenn der Desktop-Bannerzuschnitt das Motiv auf dem Smartphone nicht sichtbar hält. Das ist eine Layoutfrage, kein Anlass für viele Kopien jedes Produktfotos.