Bildgrößen in Shopify: Produkte, Banner und Mobilgeräte

7. März 2025

Für quadratische Produktbilder in Shopify sind 2048 × 2048 Pixel ein gängiger Richtwert, den die Dokumentation empfiehlt. Für Banner, Kollektionen und Mobilgeräte hängt die Größe vom Platz im Theme und vom gewünschten Bildausschnitt ab. Es empfiehlt sich, zuerst das Seitenverhältnis und anschließend die erforderliche Auflösung festzulegen.

Medidas de imágenes en Shopify: productos, banners y móvil

Für quadratische Produktbilder in Shopify ist 2048 × 2048 Pixel ein üblicher Richtwert, den die Dokumentation empfiehlt. Für Banner, Kollektionen und Mobilgeräte hängt die Größe vom Platz im Theme und vom gewünschten Bildausschnitt ab. Es empfiehlt sich, zuerst das Seitenverhältnis und anschließend die benötigte Auflösung festzulegen.

Das richtige Bild muss in der endgültigen Größe scharf aussehen und je nach Gerät mit geeigneten Ressourcen geladen werden. Das Hochladen der größtmöglichen Datei garantiert dieses Ergebnis nicht: Das Theme muss die passenden Versionen anfordern und anzeigen.

Größentabelle für den Einstieg

Dies sind Richtwerte für die Vorbereitung. Passen Sie sie an das Seitenverhältnis und die Abmessungen des Elements an, in dem sie erscheinen.

Verwendung	Ausgangspunkt	Zu prüfen
Quadratisches Produkt	2048 × 2048 px	Details und Zoom; gleicher Bildausschnitt in den Produktdatenblättern.
Vertikales Produkt	1600 × 2000 px, Seitenverhältnis 4:5	Ob Karten und Galerie das Format einhalten.
Desktop-Banner	2000 × 1000 px, Seitenverhältnis 2:1	Ausschnitt, tatsächliche Höhe und Position des Motivs.
Mobil-Banner	1000 × 1400 px, wenn das Element vertikal ist	Gerätespezifische Datei und Bildausschnitt.
Kollektions-Banner	1600 × 900 px oder vom Theme festgelegtes Format	Einheitlichkeit und sichtbarer Inhalt beim Zuschneiden.
Artikel-Banner	1600 × 900 px, Seitenverhältnis 16:9	Lesbarkeit im Header und in der Blogkarte.
Logo	SVG, wenn der Workflow dies unterstützt, oder PNG mit ausreichender Qualität für die angezeigte Größe	Schärfe, Transparenz und Innenabstand.
Favicon	Kleines, lesbares Format, entsprechend dem Theme vorbereitet	Erkennbarkeit in der Größe des Browsertabs.

Maximale zulässige und empfohlene Größe

Die Shopify-Medien-Dokumentation gibt an, dass Produkt- und Kollektionsbilder bis zu 5000 × 5000 Pixel oder 25 Megapixel erreichen können und weniger als 20 MB groß sein müssen. Diese Upload-Bedingungen sind keine Empfehlung für den Download durch jeden Besucher.

In einem Produktdatenblatt kann es sinnvoll sein, Details für den Zoom zu erhalten. In einer kleinen Karte sollte die heruntergeladene Version an den verfügbaren Platz angepasst sein. Unterscheiden Sie stets zwischen der gespeicherten Quelldatei und der vom Theme in jeder Situation bereitgestellten Ressource.

Seitenverhältnis: Warum ein Bild abgeschnitten erscheint

Das Seitenverhältnis setzt Breite und Höhe in Bezug. Ein quadratisches Foto kann ein Panorama-Banner nicht ausfüllen, ohne abgeschnitten zu werden oder Platz zu lassen. Wenn das Element einen Cover-Ausschnitt verwendet, wird ein Teil des Bildes abgeschnitten, um den gesamten Bereich auszufüllen.

Prüfen Sie vor einer Änderung der Auflösung das Format des Abschnitts und die Position des wichtigen Motivs. Wenn sich das Motiv am Rand befindet, kann ein Ausschnitt für Mobilgeräte es verdecken. Die Vorbereitung einer gerätespezifischen Datei bietet in der Regel mehr Kontrolle, wenn sich das Format des Designs stark unterscheidet.

Wie viel Auflösung jeder Platz benötigt

Beginnen Sie mit der Breite, in der das Bild angezeigt wird. Wenn es auf dem Desktop etwa 700 CSS-Pixel einnimmt, kann eine Quelle mit 1400 Pixeln ein Ausgangspunkt für einen Bildschirm mit höherer Pixeldichte sein. Prüfen Sie anschließend die tatsächliche Qualität, den Zoom und die Dateigröße, anstatt allen Bildern einen festen Multiplikator anzuwenden.

Ein vektorbasiertes Logo ist nicht von der Auflösung abhängig wie ein Foto. Vermeiden Sie bei einem PNG das Vergrößern einer kleinen Datei: Das Erhöhen ihrer Abmessungen stellt keine Details wieder her. Suchen Sie die Originaldatei oder exportieren Sie erneut aus der geeigneten Quelle.

Format und Komprimierung

JPEG kann für Fotografien nützlich sein; PNG bewahrt Transparenz und grafische Details, ist aber nicht immer die leichteste Option für ein Foto. Shopify verarbeitet Bilder und kann browsergerechte Formate bereitstellen. Überprüfen Sie das heruntergeladene Ergebnis und seine Qualität, nicht nur die Endung der Originaldatei.

Es gibt keine universelle Dateigröße, die für alle Fotografien funktioniert. Vergleichen Sie verschiedene Komprimierungen und achten Sie dabei auf wichtige Details, Kanten und den Text auf der Verpackung. Bei einem Produktbild sollte eine Ersparnis von einigen Kilobyte die Identifizierung des Artikels nicht verhindern.

Was das Theme tun sollte

Das Theme sollte responsive Bilder verwenden, damit der Browser eine geeignete Version auswählen kann. Es sollte außerdem Platzhalter für die Abmessungen reservieren und unterscheiden, was zu Beginn angezeigt wird und was später geladen werden kann. Der Shopify-Bildservice korrigiert eine Implementierung, die auf allen Geräten eine riesige Version anfordert, nicht von selbst.

Geeignete Versionen für Karten, Galerien und Banner.
Konsistente Seitenverhältnisse für Produkte einer Kollektion.
Reservierte Abmessungen zur Reduzierung von Layout-Verschiebungen.
Korrekte Priorität für das sichtbare Hauptbild.
Aufschiebendes Laden für sekundäre Ressourcen, wenn zutreffend.
Prüfung von Videos und Apps, die die Bilder begleiten.

Alternativer Text und Kontext

Beschreiben Sie, was das Bild vermittelt: Produkt, Format oder relevantes Detail. Wiederholen Sie keine Liste von Schlüsselwörtern und fügen Sie keine Städte ein, um zu ranken. Rein dekorative Bilder benötigen je nach Funktion möglicherweise einen leeren Alternativtext.

Wenn eine Tabelle oder Anweisung als Bild eingebettet ist, stellen Sie den Inhalt auch als zugänglichen Text bereit. Ein Foto einer Verpackung kann hilfreich sein, sollte aber nicht die einzige Möglichkeit sein, Informationen zu erhalten, die der Käufer lesen muss.

So prüfen Sie ein Bild vor der Veröffentlichung

Prüfen Sie das Seitenverhältnis und den Bildausschnitt im tatsächlichen Abschnitt.
Testen Sie Mobilgeräte und Desktop mit dem endgültigen Inhalt.
Prüfen Sie, welche Datei und welche Abmessungen jedes Gerät herunterlädt.
Überprüfen Sie Schärfe, Zoom und Ausschnitt.
Messen Sie die Ladezeit und Layout-Verschiebungen.
Überprüfen Sie den Alternativtext und den Kontext des Bildes.

Wenn Sie Bilder ersetzen, die bereits Traffic erhalten, berücksichtigen Sie auch deren URLs und Verlinkungen. Ändern Sie Namen oder Dateien nicht massenhaft, nur um Schlüsselwörter einzufügen. Die Qualität der Ressource, ihr Kontext und ihre Pflege sind wichtiger als eine Benennungsregel.

Wenn der Shop weiterhin zu große Dateien herunterlädt, kann eine Shopify-Leistungsanalyse unterscheiden, was zu den Bildern, dem Theme und den Apps gehört. So können Sie die Ursache beheben, bevor Sie den gesamten Katalog erneut exportieren.

Um weiter an Ihrem Shop zu arbeiten

Quellen und Überprüfung

Redaktionelle Überprüfung: Team von Migraciones.io · 30. Oktober 2026. Die vertraglich vereinbarten Funktionen und ihre Verfügbarkeit müssen für den konkreten Shop, das Land und den Tarif geprüft werden.

Alle Artikel