Bilder & Videos im Onlineshop optimieren – Der Praxis-Guide

Die richtige Darstellung von Bildern und Videos ist entscheidend für den Erfolg eines Onlineshops – sowohl für die User Experience als auch für SEO und Conversion. Doch häufig sind zu große oder falsch eingebundene Medien die unsichtbaren „Performance-Killer“, die Ladezeiten verlängern und Besucher:innen kosten.

In diesem Praxis-Guide geben mehrere Expert:innen aus dem dmf-Team – darunter UX-, Frontend- und Hosting-Spezialist:innen – ihr Wissen weiter. Er basiert auf den häufigsten Fragen aus Kundenprojekten und liefert Ihnen konkrete Best Practices, Tools und Optimierungstipps, um Bilder und Videos im Onlineshop professionell vorzubereiten.

1. Welche Auflösung braucht ein Bild im Onlineshop? 

Wer im E-Commerce arbeitet – ob als Shop-Manager:in, im Marketing oder in einer Agentur – stößt früher oder später auf dieselben Fragen:

• Welche Bildgröße ist die richtige für meinen Onlineshop? 

• Welches Seitenverhältnis muss ich für Produktbilder, Teaser und Kacheln wählen? 

• Gibt es eine Checkliste für Pixelwerte und Formate?

Die Erwartung: eine einfache Tabelle mit Formaten und Pixelwerten. Die Realität: Diese eine, allgemeingültige Antwort gibt es nicht, denn:

»Nutzer:innen greifen mit ganz unterschiedlichen Geräten und Viewports auf den Shop zu – vom Smartphone bis zum 5K-Monitor. Das perfekte Format existiert nicht, weil sich Shops je nach Gerät völlig unterschiedlich verhalten.«

David Große-Kleimann

Senior UX-Consultant bei dmf

Ein Bild wird auf einem 1920 px breiten Desktop ganz anders dargestellt als auf einem 375 px breiten Smartphone. Es wird skaliert, beschnitten oder in andere Layout-Komponenten eingebettet.

Deshalb ist nicht die exakte Pixelzahl entscheidend – sondern optimierte Ausgangsbilder, ein einheitliches Seitenverhältnis und eine saubere Vorbereitung für hochauflösende Displays.

Das bedeutet konkret: Bilder sollten weder unnötig groß sein (z. B. 8 MB pro Produktfoto), noch in einer höheren Auflösung bereitgestellt werden, als im Shop tatsächlich benötigt wird. Gleichzeitig müssen sie aber scharf genug sein – insbesondere für hochauflösende Retina-Displays.

Was ist ein Retina-Display?

Der Begriff Retina stammt von Apple und beschreibt Displays, bei denen die Pixeldichte so hoch ist, dass einzelne Pixel mit dem menschlichen Auge nicht mehr wahrgenommen werden können. Typisch sind Geräte mit doppelter Pixeldichte (2x) wie viele aktuelle Smartphones und Laptops. Damit Bilder auf diesen Displays gestochen scharf wirken, müssen sie in doppelter Auflösung bereitgestellt werden – ohne die Dateigröße unnötig aufzublähen.

David erklärt dazu:

Ganz konkret – die Grundformel für Bildgrößen im Onlineshop

Um ihre Bilder optimal für Ihren Onlineshop vorzubereiten, gehen Sie wie folgt vor:

1. Größte Darstellung des Bildes im Frontend bestimmen
   Stellen Sie sich zunächst folgende Frage: Wo wird das Bild im Shop angezeigt und wie groß ist es an seiner größten Stelle? Zum Beispiel:

   • Produktkarte → z. B. max. 600 px breit

   • Produktdetailseite → z. B. max. 1000–1200 px

   • Startseiten-Banner → kann Bildschirmbreite einnehmen (bis ~1920 px)

2. Bild mindestens in dieser Größe exportieren – besser doppelt (Retina-optimiert)
   Soll das Bild Retina-optimiert sein? Dann stellen Sie es in doppelter Breite bereit, zum Beispiel:

   • Produktbild 600 px → Upload mit 1200 px Breite

3. Seitenverhältnis festlegen und immer beibehalten
   Unterschiedliche Formate machen das Design unruhig. Legen Sie also  ein einheitliches Seitenverhältnis fest, zum Beispiel:

   • Produktbilder: 4:3 oder quadratisch

   • Teaser/Slider: 16:9 oder 21:9

   • Hero-Bild mit Overlay-Navigation: darauf achten, dass oben genug „Ruhefläche“ bleibt (kein Gesicht, kein Text abgeschnitten)

4. Dateigröße optimieren (< 100–200 KB)
   Bilder im Shop sollten so klein wie möglich, aber so hochwertig wie nötig sein. Zu große Dateien verlängern die Ladezeit deutlich, während überkomprimierte Bilder zu sichtbarem Qualitätsverlust führen – und Ihr Shopsystem kann die Qualität beim erneuten Encoding zusätzlich verschlechtern.

Die Faustregel: 100–200 KB für Produktbilder, abhängig von Format, Detailgrad und Retina-Anforderungen.

Exkurs: Bild- und Video-Kompression in der Praxis

Tipp: Verpixeln vermeiden

Werden Bilder im Backend zu klein hochgeladen, skaliert das System sie automatisch auf die im Frontend erforderliche Größe. Das führt schnell zu pixeligen Darstellungen. 

Achten Sie daher darauf:

• Bilder in ausreichender Auflösung bereitstellen, passend zur maximalen Darstellungsgröße im Shop

• Bilder nicht übermäßig komprimieren, um sichtbaren Qualitätsverlust zu vermeiden

Diese Hinweise gelten für alle gängigen Shopsysteme, unabhängig davon, ob Sie Shopware, Magento, WooCommerce oder Shopify einsetzen.

Tools für Bild- und Video-Optimierung

UX-Designer David betont, dass viele Shop-Betreiber sich auf Photoshop-Exporte wie „Für Web speichern“ verlassen – dabei verschenken sie oft Potenzial:

Für Videos gilt dasselbe:

2. Wie verhindere ich, dass im Shopware-6-Shop wichtige Bildbereiche abgeschnitten werden?

Moderne Shopsysteme wie Shopware 6 passen Bilder automatisch an unterschiedliche Bildschirmgrößen und Layouts an – mal quadratisch, mal im Panoramaformat oder als kleines Produktbild in der Übersicht.

Das sorgt für Flexibilität, kann aber auch unerwünschte Nebeneffekte haben: Gesichter, Produkte oder zentrale Bildelemente verschwinden plötzlich am Rand – oder das Motiv wirkt verschoben.

Unsere Lösungen für Shopware 6:

Focal Points: Der wichtigste Bildbereich bleibt immer sichtbar

Damit nicht der falsche Teil eines Bildes im Fokus steht, haben wir für unser Shopware-6-basiertes Onlineshop-Kickstarter-Paket E-COM EXPRESS das sogenannte Focal-Point-Plugin entwickelt.

Das Plugin erlaubt es, im Bild einen zentralen Punkt zu markieren – etwa ein Produkt, ein Gesicht oder ein Logo.

Wenn das Bild später automatisch in ein Quadrat, Hochformat oder Panorama zugeschnitten wird, sorgt das System dafür, dass dieser Fokusbereich erhalten bleibt

Highlights auf Bildern einfach auswählen

Für interaktive Bereiche – etwa Hotspots auf Inspirationsbildern oder „Highlights“ bei Produktfotos – mussten früher Koordinaten manuell über X- und Y-Achsen eingetragen werden.

Mit E-COM-EXPRESS auf Basis von Shopware 6 geht das jetzt deutlich einfacher:

• Content-Manager:innen klicken direkt auf die gewünschte Stelle im Bild.

• Der Punkt wird gespeichert und im Frontend exakt dort dargestellt.

Das ist nicht nur komfortabler, sondern verhindert auch, dass Inhalte verrutschen, wenn Bilder auf verschiedenen Endgeräten neu berechnet werden.

Schnellstart mit E-COM EXPRESS

Diese Funktionen – Focal Points, Highlight-Punkte und optimierte Bilddarstellung – sind in E-COM EXPRESS für Shopware 6 bereits vollständig integriert und einsatzbereit. So können Content-Teams direkt loslegen, ohne sich mit technischen Details oder Pixelwerten beschäftigen zu müssen.

Weiter zur Demo

3. Warum sehen meine Produktbilder manchmal unscharf oder verzerrt aus?

Ein häufiges Problem in Onlineshops: Auf dem großen Bildschirm wirken Produktbilder gestochen scharf – auf dem Smartphone dagegen matschig, falsch zugeschnitten oder mit weißen Rändern.

Der Grund liegt selten im Design, sondern in der Art, wie Bilder ausgeliefert werden. Wenn dasselbe Bild für alle Endgeräte verwendet wird, muss der Browser es oft selbst skalieren – das kostet Zeit, Bandbreite und Qualität.

Gerade bei hochauflösenden Bildern entstehen dadurch lange Ladezeiten oder unsaubere Darstellungen.

Und wenn Bilder zu klein oder zu stark komprimiert im Backend hochgeladen werden, verschärft sich das Problem: Das System muss sie hochskalieren – das Ergebnis sind verpixelte, unscharfe Produktfotos.

💡 Die Lösung: Eine dynamische, automatische Bildauslieferung, die sich an jedes Endgerät anpasst – in perfekter Balance zwischen Qualität und Performance.
Genau das leistet der dmf Media Optimizer von digital.manufaktur. Er optimiert Bilder in Echtzeit, erkennt das jeweilige Gerät und liefert stets die ideale Version aus – schnell, verlustarm und vollständig automatisiert.

dmf Media Optimizer: Intelligente Bildoptimierung für jedes Endgerät

Der dmf Media Optimizer basiert auf der leistungsstarken Software ImageProxy und erweitert sie um eigene Technologien für Caching, Performance und nahtlose Integration in bestehende Systeme.

So profitieren Sie von maximaler Bildqualität, reduzierter Ladezeit und einer spürbar besseren User Experience – ohne zusätzliche Arbeit für das Content-Team.

»Viele Webseiten laden riesige Bilder, die viel zu groß für das Gerät sind – oder sie komprimieren so stark, dass die Bilder stark verpixelt aussehen. Der dmf Media Optimizer findet automatisch den optimalen Mittelweg: maximale Qualität bei minimaler Größe.«

Paul-Kramme

Senior DevOps Systems Engineer bei digital.manufaktur und Entwickler der dmf-Cloud

Was der dmf Media Optimizer besser macht

Während ImageProxy die technische Grundlage bildet, sorgt die Weiterentwicklung von digital.manufaktur für echten Mehrwert im E-Commerce-Alltag:

• Intelligentes Caching: Bereits konvertierte Bilder werden automatisch zwischengespeichert und blitzschnell ausgeliefert.

• Prefetching: Neue Bildvarianten werden vorab generiert, damit keine Wartezeiten bei der ersten Auslieferung entstehen.

• Plug & Play für jedes System: Der dmf Media Optimizer ist out of the box mit nahezu allen CMS- und Shopsystemen kompatibel – egal ob Shopware, Shopify oder ein individuelles System.

• Spezielle Shopware-Anpassungen: Durch eigene Schnittstellen wird das Reencoding der Thumbnails vermieden – das Ergebnis: sichtbar höhere Bildqualität und stabilere Performance.

• Optimierte Auslieferungslogik: Bilder werden in einer intelligenten Reihenfolge geladen – für bessere Google-Lighthouse-Werte und ein flüssigeres Nutzererlebnis.

Unterschiedliche Geräte, optimale Formate

Nicht jedes Gerät unterstützt dieselben Bildformate. Moderne Typen wie AVIF oder JPEG-XL bieten bei gleicher Qualität bis zu 50 % kleinere Dateien.

Der dmf Media Optimizer erkennt das automatisch – Apple-Geräte erhalten beispielsweise andere optimierte Formate als Android oder Windows.

Praxisbeispiel: All4Golf

Bei All4Golf, dem führenden Onlineshop für Golfbedarf, sorgt der dmf Media Optimizer dafür, dass Produktbilder immer optimal zugeschnitten sind – ohne weiße Ränder, immer im richtigen Seitenverhältnis und mit perfekt abgestimmter Dateigröße für Desktop und Mobile.

Schnell integriert, dauerhaft performant

Die Integration dauert nur wenige Minuten. Danach läuft alles vollautomatisch und zuverlässig im Hintergrund – vom Zuschneiden bis zur Geräteerkennung.

So sehen Ihre Produktbilder immer perfekt aus – ganz gleich, ob Kund:innen mit Smartphone, Tablet oder 5K-Monitor shoppen.

💡 Tipp: Der dmf Media Optimizer ist Teil der digitalen Services von digital.manufaktur, kann aber auch unabhängig von E-COM EXPRESS oder dmf Cloud Hosting eingesetzt werden. Ideal für Shops, die ihre Performance steigern und Redaktionsaufwand reduzieren möchten.

4. Meine Webseite ist zu langsam. Wie speichere ich meine Bilder, damit sie schneller laden?

Zu große Bilder sind einer der häufigsten Performance-Killer in Onlineshops. Oft sehen sie auf den ersten Blick gut aus, verlangsamen aber massiv die Ladezeit – und kosten dadurch Conversion und SEO-Ranking. Die gute Nachricht: Schon wenige, gezielte Maßnahmen können die Ladezeit Ihrer Webseite deutlich beschleunigen.

1. Bilder komprimieren – aber richtig

Die Grundlagen kennen Sie bereits aus den vorherigen Kapiteln:

• Dateigröße reduzieren, ohne sichtbaren Qualitätsverlust (z. B. mit ImageOptim oder Caesium Image Compressor)

• Moderne Formate nutzen, z. B. JPEG-XL oder AVIF

• Automatische Optimierung über den dmf Media Optimizer, der Bilder „on the fly“ fürs jeweilige Endgerät anpasst

• Passende Exportgröße wählen – z.B. keine 4000 px-Bilder, wenn 1200 px reichen

📘 Mehr dazu inklusive Tool-Checklisten und konkreten Workflows finden Sie im Whitepaper „Content Guidelines: Die wichtigen Aspekte der Medien-Optimierung bei Onlineshops“.

2. Lazy Loading gezielt einsetzen

Ein häufiger Fehler: Bilder werden pauschal mit Lazy Loading versehen, also erst dann geladen, wenn sie im sichtbaren Bereich (Viewport) erscheinen. Das spart zwar Ressourcen, kann aber zum Problem werden, wenn zentrale Inhalte erst verspätet erscheinen – insbesondere im sogenannten Above-the-Fold-Bereich, also dem Teil der Seite, den Besucher:innen beim ersten Aufruf sofort sehen.

Lukas Heinze, Frontend-Experte bei dmf, erklärt:

»Oft gibt es das Problem, dass Hauptinhalte – etwa Banner oder Produktbilder auf der Startseite – fälschlicherweise "lazy" geladen werden. Das ist kontraproduktiv, weil diese Bilder sofort sichtbar sein müssen. Gleichzeitig sollen aber weiter unten platzierte Bilder natürlich erst dann geladen werden, wenn sie gebraucht werden. Hier braucht es eine redaktionelle Entscheidung: Welche Inhalte sind wirklich wichtig – und welche dürfen warten?«

Lukas Heinze

Senior Frontend-Entwickler bei dmf 

Die Lösung:

• Wichtige Bilder priorisieren, damit sie direkt geladen werden (z. B. Hero-Banner, Key Visuals, Produktbilder im sichtbaren Bereich)

• Unwichtige Bilder lazy laden, um Ressourcen zu sparen

• Keine automatische Pauschalregel, sondern differenzierte Einstellung pro Inhaltsbereich

So entsteht die perfekte Balance zwischen Performance und Nutzererlebnis – und Ihre Shop-Besucher:innen warten nicht unnötig lange auf zentrale Inhalte.

5. Ich brauche eine schnelle und einfache Möglichkeit, die Qualität meiner Bilder selbst zu überprüfen.

Im letzten Kapitel haben wir gezeigt, wie Sie Ihre Bilder für eine schnelle Seitenladegeschwindigkeit optimieren. Doch woher wissen Sie eigentlich, wie gut Ihre Bilder und Seiten wirklich performen?

Hier kommt Google Lighthouse ins Spiel – ein kostenloses Analysetool, das direkt im Browser (Chrome DevTools) integriert ist. Damit können Sie die Qualität Ihrer Bilder, die Ladezeiten und viele weitere Performance-Faktoren objektiv messen, statt sich auf Gefühl oder Vermutungen zu verlassen.

So hilft Google Lighthouse bei der Bildoptimierung

Lighthouse analysiert Ihre Website und liefert konkrete Kennzahlen, etwa:

• Performance Score: Gesamtbewertung der technischen Geschwindigkeit

• Largest Contentful Paint (LCP): Zeit, bis das größte sichtbare Element (z. B. ein Hero-Bild) geladen ist

• Cumulative Layout Shift (CLS): Wie stark sich Layout-Elemente während des Ladens verschieben

• Bildkompression & Dateigröße: Erkennt zu große oder unoptimierte Bilddateien automatisch

Dadurch sehen Sie auf einen Blick, welche Bilder zu groß sind und welche Optimierungen am meisten bewirken – ein unschätzbarer Vorteil bei der laufenden Pflege Ihres Shops.

A/B-Vergleiche: Vorher-Nachher sichtbar machen

Wir empfehlen, regelmäßig A/B-Vergleiche durchzuführen – also denselben Seitenabschnitt einmal vor und einmal nach einer Bildoptimierung zu testen. So können Sie Ihren Kund:innen oder internen Stakeholdern ganz konkret zeigen, welche Wirkung kleine Anpassungen haben:

• 🚀 Verbesserung des Performance Scores um bis zu +15 Punkte

• 🕒 Reduktion der LCP-Zeit auf unter 2,5 Sekunden

• 📱 Deutlich flüssigeres Laden auf mobilen Endgeräten
  

Diese Zahlen sprechen für sich – und machen Optimierungen nachvollziehbar.

🔗 Wie Sie Google Lighthouse gezielt für Ihren Onlineshop einsetzen, zeigen wir Schritt für Schritt im Blogbeitrag „Performance optimieren mit Google Lighthouse“.

Fazit: Kleine Dateien, große Wirkung.

Optimierte Bilder und Videos sind einer der einfachsten, aber wirkungsvollsten Hebel für Performance, Nutzererlebnis und Sichtbarkeit im Onlineshop. Wer auf die richtige Kombination aus Kompression, Format, Seitenverhältnis und Priorisierung setzt – und seine Ergebnisse regelmäßig mit Tools wie Google Lighthouse überprüft – schafft eine stabile Basis für schnelle Ladezeiten und zufriedene Kund:innen.

Und das Beste: Viele Maßnahmen lassen sich mit überschaubarem Aufwand direkt umsetzen – oder mit technischen Helfern wie dem dmf Media Optimizer sogar automatisieren.