Optimale Bildgrößen für Online-Shops

Bilder sind das Herzstück eines jeden Online-Shops. Sie übernehmen die Rolle, die im stationären Handel das physische Produkt spielt: Kunden können Artikel nicht anfassen, riechen oder anprobieren – die Bilder müssen überzeugen. Gleichzeitig dürfen sie die Ladegeschwindigkeit nicht gefährden. Diese Balance zu finden ist entscheidend für Konversionsraten und SEO.

Warum Bildqualität im E-Commerce direkt die Umsätze beeinflusst

Studien zeigen: Hochwertige Produktbilder erhöhen die Kaufbereitschaft erheblich. 75 % der Online-Käufer nennen Produktfotos als wichtigsten Faktor bei der Kaufentscheidung. Gleichzeitig gilt: Eine Seite, die länger als 3 Sekunden lädt, verliert im Schnitt 53 % der mobilen Besucher. Beide Anforderungen – Qualität und Geschwindigkeit – müssen erfüllt sein.

Empfohlene Bildgrößen für Online-Shops

Bildtyp	Empfohlene Abmessungen	Max. Dateigröße	Format
Produkt-Thumbnail	300 × 300 px	30–50 KB	WebP / JPG
Produktbild (Hauptansicht)	1000 × 1000 px	100–250 KB	WebP / JPG
Produktbild mit Zoom	2000 × 2000 px	300–500 KB	WebP / JPG
Kategoriebild	800 × 600 px	80–150 KB	WebP / JPG
Hero-Banner (Startseite)	1920 × 600–800 px	150–300 KB	WebP / JPG
Logo	200 × 60 px (Anzeige)	5–20 KB	SVG / PNG
Freigestelltes Produkt (PNG)	1000 × 1000 px	100–300 KB	WebP / PNG

Seitenverhältnis und Konsistenz

Einheitliche Seitenverhältnisse sind im E-Commerce entscheidend für ein professionelles Erscheinungsbild. In Kategorieansichten wirken Produkte unruhig, wenn Bilder unterschiedliche Proportionen haben. Die empfohlenen Seitenverhältnisse:

• Quadratisch (1:1): Der Standard für die meisten Plattformen und Produktkategorien. Ermöglicht einheitliche Darstellung in Grids.
• Porträt (2:3 oder 3:4): Beliebt für Mode und Bekleidung, da es den menschlichen Körper natürlich zeigt.
• Querformat (4:3 oder 16:9): Für große Möbel, Elektronik oder Fahrzeuge.

Hintergrund: Weiß oder Transparent?

Die meisten großen E-Commerce-Plattformen empfehlen oder verlangen weißen Hintergrund für Produkthauptbilder:

• Amazon: Reiner weißer Hintergrund (RGB 255, 255, 255) ist Pflicht für das Hauptbild
• Shopify: Empfiehlt weißen Hintergrund für konsistente Shop-Optik
• Google Shopping: Bevorzugt klare Produktbilder ohne ablenkendes Beiwerk

Für zusätzliche Lifestyle-Bilder sind Hintergründe flexibler. Transparente Hintergründe (PNG oder WebP mit Alpha) eignen sich für Grafiken und Icons, nicht für Fotos.

Formatwahl im E-Commerce

Die empfohlene Strategie für Online-Shops:

1. WebP als primäres Format: Moderne Browser unterstützen es vollständig. Kleinere Dateien als JPG bei gleicher Qualität.
2. JPG als Fallback: Für Browser oder externe Plattformen ohne WebP-Unterstützung.
3. PNG oder WebP mit Transparenz: Für freigestellte Produkte mit Transparenz.
4. SVG für Logos und Icons: Vektorformat garantiert Schärfe auf allen Displays.

Lazy Loading: Bilder nur bei Bedarf laden

Lazy Loading bedeutet: Bilder unterhalb des sichtbaren Bereichs werden erst geladen, wenn der Nutzer dorthin scrollt. Das spart erheblich Ladezeit beim ersten Seitenaufruf:

<img src="produkt.webp" loading="lazy" alt="Produktbeschreibung">

Wichtig: Das Hauptproduktbild (above the fold) sollte nicht lazy geladen werden, da es sofort sichtbar sein muss.

Responsive Images für Mobile-Nutzer

Über 60 % des E-Commerce-Traffics kommt heute von mobilen Geräten. Mit responsive Images erhalten Smartphone-Nutzer kleinere Dateien:

<img src="produkt-1000.webp"
     srcset="produkt-300.webp 300w,
             produkt-600.webp 600w,
             produkt-1000.webp 1000w"
     sizes="(max-width: 480px) 300px,
            (max-width: 900px) 600px,
            1000px"
     alt="Produktname und Farbe">

Plattformspezifische Anforderungen

Shopify

• Maximale Upload-Größe: 20 MB
• Empfohlene Produktbildgröße: 2048 × 2048 px (Shopify skaliert automatisch)
• Automatische WebP-Auslieferung durch das CDN

WooCommerce

• Thumbnails, mittlere und große Bilder konfigurierbar
• Plugins wie ShortPixel oder Imagify für automatische WebP-Konvertierung empfohlen

Amazon

• Hauptbild: Weißer Hintergrund, Produkt füllt mindestens 85 % des Rahmens
• Mindestgröße: 1000 × 1000 px (für Zoom-Funktion)
• Maximale Dateigröße: 10 MB pro Bild

CDN: Bilder weltweit schnell ausliefern

Ein Content Delivery Network (CDN) speichert Bilder auf Servern weltweit und liefert sie immer vom nächstgelegenen Server aus. Das reduziert Ladezeiten erheblich – besonders für internationale Kunden. Dienste wie Cloudflare, Imgix oder das integrierte CDN von Shopify übernehmen das automatisch.

Fazit: Qualität und Performance sind kein Widerspruch

Mit den richtigen Bildgrößen, dem modernen WebP-Format, Lazy Loading und einem CDN lassen sich hochwertige Produktbilder liefern, die trotzdem schnell laden. Der Aufwand zahlt sich direkt aus: Schnellere Shops konvertieren besser, ranken höher und verlieren weniger Besucher.

Der Weg ohne Upload

Wenn die Datei vertraulich ist, ist der sicherste Weg der, auf dem sie Ihren Rechner gar nicht erst verlässt. Bildgröße ändern läuft vollständig im Browser: Die Datei wird von Ihrer Festplatte gelesen, im Arbeitsspeicher verarbeitet und wieder zurückgeschrieben — an einen Server geht nichts.

1. Öffnen Sie Bildgröße ändern.
2. Wählen Sie die Datei auf Ihrem Rechner. Sie wird lokal gelesen, nicht hochgeladen.
3. Geben Sie Breite und Höhe ein oder wählen Sie eine Vorgabe.
4. Laden Sie das Ergebnis herunter. Das Original bleibt, wo es war.

Direkt im Browser erledigen — die Datei verlässt Ihr Gerät nicht: Bildgröße ändern