Warum sind die richtigen Bildgrößen wichtig ? Bilder beeinflussen nicht nur das Design Deines Online-Shops, sondern auch die Ladegeschwindigkeit, SEO und Conversion Rate.
Zu große Bilder verlangsamen die Seite, zu kleine wirken unscharf. Auch falsche Bildverhältnisse können zu unschönen Darstellungen führen.
🚨 Die meisten Shopify-Themes skalieren Bilder automatisch. Es ist aber immer besser, wenn Du die Bilder mit passenden Größe und mit dem richtigen Seitenverhältnis hoch. Aber, manchmal muss man ein bisschen experimentieren!
Allgemeine Bildgrößenempfehlungen
Hier sind die empfohlenen Bildgrößen für die wichtigsten Bildtypen in Shopify:
- Produktbilder:
- Empfohlen: 2048 x 2048 px (1:1, quadratisch, ideal für Zoom-Funktionen)
- Alternativ: 800 x 800 px (Minimum für Zoom, schnellere Ladezeiten)
- Kollektion-Bilder:
- Empfohlen: 1200 x 1200 px (1:1, quadratisch)
- Alternativ: 550 x 550 px (für kleinere Themes)
- Slideshow-Bilder:
- Empfohlen: 1920 x 1080 px (16:9)
- Alternativ: 2048 x 1024 px (2:1)
- Blog-Bilder:
- Empfohlen: 1200 x 800 px (3:2)
- Alternativ: 2048 x 1365 px (für größere Themes)
- Text-Overlay-Bilder:
- Empfohlen: 1800 x 1000 px oder 1600 x 1050 px (für lesbare Texte)
💡 Tipp: Lade Bilder immer in der exakten oder leicht überlegenen Größe hoch, um unnötige Skalierungen und Ladezeiten zu vermeiden.
Empfohlene Bildgrößen für bekannte Shopify-Themes
Dawn (Standard-Theme)
- Produktbilder: 800 x 800 px (Minimum für Zoom) oder 1500 x 1500 px (für höhere Qualität)
- Kollektion-Bilder: 550 x 550 px (1:1)
- Slideshow-Bilder: 1920 x 1080 px (16:9)
- Blog-Bilder: 720 x 1080 px
- Text-Overlay-Bilder: 1600 x 1050 px
Conversfy (unser Dawn CRO-Booster)
➡️ Wie bei Dawn
Refresh
- Produktbilder: 1000 x 1000 px (1:1)
- Kollektion-Bilder: 750 x 750 px
- Slideshow-Bilder: 2048 x 1024 px (2:1)
- Blog-Bilder: 2048 x 867 px (16:9)
Sense
- Produktbilder: 2000 x 2000 px (1:1)
- Kollektion-Bilder: 540 x 720 px (3:4)
- Slideshow-Bilder: 760 x 640 px
- Blog-Bilder: 2048 x 1300 px
Studio
- Produktbilder: 2000 x 3000 px (2:3)
- Kollektion-Bilder: 560 x 620 px
- Slideshow-Bilder: 1800 x 1000 px (9:5)
- Blog-Bilder: 2048 x 1365 px (3:2)
Concept Theme
- Produktbilder: 2000 x 2000 px (1:1)
- Porträtbilder: 2000 x 2500 px (4:5)
- Querformatbilder: 2400 x 1600 px (3:2)
Motion Theme
- Produktbilder: 2048 x 2048 px (1:1)
- Slideshow-Bilder: 1920 x 1080 px (16:9)
- Kollektion-Bilder: 1200 x 1200 px
Narrative Theme
- Hero-Bilder: 2400 x 1600 px (3:2)
- Produktbilder: 2048 x 2048 px
- Slideshow-Bilder: 1920 x 1080 px
Debut Theme (altes 1.0 Theme, solltest Du nicht mehr verwenden)!
- Produktbilder: 2048 x 2048 px (1:1)
- Slideshow-Bilder: 1200 x 600 px
- Kollektion-Bilder: 800 x 800 px
Impulse (Premium-Theme)
- Produktbilder: 1065 x 1420 px (3:4)
- Kollektion- und Slideshow-Bilder: 2880 x 1620 px (16:9)
- Blog-Bilder: 2880 x 1410 px (4:3)
- Mega-Menü-Bilder: 510 x 234 px (17:8)
Prestige (Premium-Theme)
- Produktbilder: 2400 x 2400 px (1:1)
- Hero-Bilder: 1200 x 1700 px
- Kollektion-Bilder: 2400 x 900 px
- Slideshow-Bilder: 1600 x 600 px
- Blog-Bilder: 2400 x 1200 px
Empire (Premium-Theme)
- Produktbilder: 2800 x 2800 px (1:1)
- Kollektion-Bilder: 2000 x 2000 px (1:1)
- Slideshow-Bilder: 2880 x 2880 px
- Shoppable Images: 1200 x 600 px (2:1)
💡 Tipp: Überprüfe immer die Theme-Dokumentation, da die genauen Bildgrößen je nach Theme variieren können. Alternativ kannst Du den Support des Themes kontaktieren.
Tipps zur Bildoptimierung
Damit Deine Bilder nicht nur gut aussehen, sondern auch schnell laden, solltest Du folgende Optimierungstipps beachten:
- Bilder komprimieren:
Nutze Tools wie TinyPNG oder TinyIMG Shopify-App, um die Dateigröße zu reduzieren, ohne die Bildqualität zu beeinträchtigen. - Das richtige Format wählen:
- JPG: Für Fotos und Bilder mit vielen Farben.
- PNG: Für Logos und Bilder mit Transparenz.
- WebP: Für beste Kompression und schnellere Ladezeiten. Shopify konvertiert Bilder zwar automatisch in WebP, aber ein direkter Upload im WebP-Format kann die Performance weiter verbessern.
- SVG: Für Icons und Vektorgrafiken, da sie skalierbar und extrem klein sind.
- Dateigröße gering halten:
Halte die Dateigröße idealerweise zwischen 150 KB und 500 KB, um die Ladegeschwindigkeit zu optimieren. - Mobile Ansicht testen:
Überprüfe, wie die Bilder auf Smartphones dargestellt werden. Und zwar auf verschiedenen Mobiletelfonen und/oder mit einem Emulator. - Lazy Loading nutzen:
Ein gutes Shopify Theme lädt Bilder standardmäßig erst, wenn sie sichtbar werden. Das reduziert die Ladezeit der Seite. - Alt-Texte hinzufügen:
Beschreibe den Inhalt der Bilder mit Alt-Texten, um die Zugänglichkeit zu verbessern und SEO-Vorteile zu erzielen.
Die Bildgrößen-Checkliste
✅ Die Theme-Dokumentation geprüft
✅ Bilder in den empfohlenen Größen bereit
✅ Passendes Seitenverhältnis gewählt
✅ Bilder vor dem Hochladen komprimiert
✅ Mobile Darstellung getestet
Super! 😎
