Produktbilder optimieren: Praxisleitfaden zu Größe, Format (WebP), Dateiname und Alternativtext im E-Commerce

Im E-Commerce kann der Kunde das Produkt nicht in die Hand nehmen; er beurteilt es allein anhand des Bildes. Deshalb sind Produktbilder zugleich das stärkste Verkaufsinstrument und die schwerste Last der Seite: Ein gut fotografiertes, aber nicht optimiertes Bild verlangsamt die Seite, verbraucht mobiles Datenvolumen und lässt den Kunden verloren gehen, bevor die Seite überhaupt geöffnet ist. Produktbildoptimierung bedeutet, ein Bild schneller ladbar, besser verständlich und leichter auffindbar zu machen, ohne Abstriche bei der Qualität.

Dieser Beitrag ist wie eine Lektion aufgebaut. Schritt für Schritt lernen Sie, aus welchen Ebenen die Bildoptimierung besteht, wie Sie die richtige Größe und das richtige Format wählen, wie Dateiname und Alternativtext geschrieben werden, welche Ladetechniken es gibt, wie ein Massen-Workflow aussieht und welche Fehler am häufigsten vorkommen. Das Tool im Beitrag erzeugt sofort die Zielgröße, den Dateinamen und den Alternativtext für Ihr eigenes Produkt.

Was ist Produktbildoptimierung?

Produktbildoptimierung bedeutet, Dateigröße, Format, Name, Alternativtext und Ladeverfahren eines Produktfotos unter Beibehaltung der visuellen Qualität optimal auf Seitengeschwindigkeit, Barrierefreiheit und Suchmaschinen abzustimmen. Das Foto aufzunehmen ist die halbe Arbeit; es für die Veröffentlichung vorzubereiten, die andere Hälfte.

Optimierung bedeutet nicht, das Bild zu „beschädigen“ oder unscharf zu machen. Ziel ist es, mit einem für das Auge nicht erkennbaren Qualitätsverlust eine deutlich kleinere Datei zu erhalten und das Bild in einer Größe auszuliefern, die zum jeweiligen Einsatzort passt.

LesetippWie fotografiert man Produkte? Leitfaden zur Produktfotografie mit dem Smartphone im E-Commerce

Warum ist Bildoptimierung im E-Commerce so wichtig?

Auf Produktseiten machen Bilder meist den größten Anteil am Gesamtgewicht der Seite aus; deshalb ist die Bildoptimierung der wirksamste und risikoärmste Weg, die Seitengeschwindigkeit zu verbessern. Geschwindigkeit wiederum hängt unmittelbar mit Conversion, mobilem Erlebnis und Sichtbarkeit in der Suche zusammen.

• Seitengeschwindigkeit: Kleinere Bilder werden schneller geladen; die Seite ist früher nutzbar.
• Mobiles Erlebnis: Bei mobilen Daten und langsamer Verbindung kann ein großes Bild dazu führen, dass sich die Seite gar nicht öffnet.
• Conversion: Öffnet sich die Seite ohne Wartezeit, konzentriert sich der Kunde auf das Produkt und Abbrüche nehmen ab.
• Sichtbarkeit in der Suche: Ein aussagekräftiger Dateiname und Alternativtext helfen Suchmaschinen und der Bildersuche, das Bild zu verstehen.
• Barrierefreiheit: Alternativtext ermöglicht Kunden, die Screenreader nutzen, das Produkt zu verstehen.
• Infrastrukturkosten: Kleinere Dateien bedeuten weniger Datenverkehr und Speicherplatz.

Okumanızı öneririzE-Ticarette Site Hızı Neden Önemlidir?

Die 6 Ebenen der Produktbildoptimierung

Die Bildoptimierung besteht aus sechs Ebenen: Größe (Pixel), Gewicht (Kilobyte), Format, Dateiname, Alternativtext und Ladeverfahren. Jede Ebene löst ein eigenes Problem, und fehlt eine, schmälert das den Gewinn der anderen.

Welches Bildformat wann verwenden?

Für Fotos ist meist WebP oder JPEG die beste Wahl, für Grafiken mit Transparenz PNG oder WebP und für Logos und Icons SVG. Die Formatwahl verändert die Dateigröße desselben Bildes unmittelbar.

Eine praktische Faustregel: Veröffentlichen Sie Produktfotos als WebP (oder mit JPEG als Fallback), verwenden Sie für Produktbilder mit Transparenz WebP oder PNG und machen Sie Logos und Icons zu SVG.

Welche Größe sollte ein Produktbild haben?

Die Quellgröße eines Bildes sollte etwa das Doppelte der Anzeigegröße auf der Seite betragen: Das sorgt auf hochauflösenden (Retina-)Bildschirmen für ein scharfes Bild und vermeidet eine unnötig große Datei. Bei einer Zoomfunktion darf die Quelle etwas größer sein.

• Angezeigte Breite ermitteln: Prüfen Sie, wie viele Pixel breit das Hauptbild auf der Produktseite am Bildschirm angezeigt wird.
• Mit zwei multiplizieren: Für hochauflösende Bildschirme sollte die Quelle etwa doppelt so breit sein wie die angezeigte Breite.
• Bei Zoom erhöhen: Wenn Sie Zoom anbieten, können Sie die Quelle bis auf das Dreifache erhöhen; sonst wirkt der Zoom unscharf.
• Seitenverhältnis konstant halten: Verwenden Sie für alle Produktbilder dasselbe Seitenverhältnis (zum Beispiel 1:1 oder 4:5); Listenseiten wirken dann aufgeräumt.
• Unnötig große Bilder vermeiden: Ein 4000 Pixel breites Foto vom Smartphone sollte verkleinert werden, wenn es in einem 600 Pixel breiten Bereich angezeigt wird.

Tool für Produktbildgröße, Dateiname und Alternativtext

Das folgende Tool erzeugt für Ihr Produkt die Zielgröße des Quellbilds, einen SEO-freundlichen Dateinamen und einen Alternativtext-Vorschlag. Das Tool gibt nur Empfehlungen; passen Sie den Alternativtext an und denken Sie daran, dass Sie Ihr Produkt am besten beschreiben können.

Wie sollte der Dateiname eines Produktbilds aussehen?

Ein Bilddateiname sollte eine kurze, aussagekräftige Wendung sein, die das Bild beschreibt; er wird kleingeschrieben, ohne Sonderzeichen und Leerzeichen und mit Bindestrichen zwischen den Wörtern geschrieben. Namen wie „IMG_2034.jpg“, die Smartphone oder Kamera vergeben, enthalten keinerlei Information über das Bild.

Manche Systeme nutzen den Dateinamen für die Zuordnung, wenn viele Produkte in großen Mengen hochgeladen werden: Die Bilder werden nach Barcode oder Artikelnummer des Produkts benannt und beim Upload dem Produkt zugeordnet. Stören Sie in diesem Fall das Zuordnungsschema nicht; füllen Sie für SEO wichtige Felder wie Alternativtext und Produktname gesondert aus.

Wie schreibt man Alternativtext?

Der Alternativtext ist ein kurzer Satz, der das Bild jemandem beschreibt, der es nicht sehen kann; er nennt, was das Produkt ist und was es auszeichnet. Screenreader lesen ihn vor, Suchmaschinen nutzen ihn, um den Bildinhalt zu verstehen, und er erscheint anstelle des Bildes, wenn dieses nicht geladen werden kann.

• Nennen Sie Produkt und Merkmal: Schreiben Sie einen kurzen, aussagekräftigen Satz wie „Leinenhemd, weiß, Vorderansicht“.
• Schreiben Sie nicht „Bild“ oder „Foto“: Der Screenreader kündigt bereits an, dass es sich um ein Bild handelt.
• Nicht mit Schlüsselwörtern überladen: Ein Alternativtext wie „Hemd Herrenhemd Leinenhemd günstiges Hemd“ schadet sowohl der Barrierefreiheit als auch der Suche.
• Für jedes Bild einen eigenen Text schreiben: Vorder-, Rück- und Detailbild desselben Produkts sollten unterschiedliche Alternativtexte tragen.
• Dekorative Bilder leer lassen: Bei rein dekorativen Bildern sollte der Alternativtext leer sein.
• Kurz halten: Ein bis zwei kurze Sätze genügen in der Regel.

LesetippWas sind strukturierte Daten (Schema)? So fügen Sie das Produktschema hinzu

Wie sollten Bilder auf der Seite geladen werden?

Wie ein Bild geladen wird, ist ebenso wichtig wie das Bild selbst: Das zuerst sichtbare Hauptproduktbild sollte sofort geladen werden, Bilder unterhalb des Bildschirms erst, wenn der Nutzer sich dieser Stelle nähert. Andernfalls wird die Seite unnötig schwer oder das wichtige Bild kommt zu spät.

• Bilder unterhalb des sichtbaren Bereichs verzögert laden (Lazy Loading): Auf einer Listenseite werden die Bilder weiter unten stehender Produkte beim Scrollen geladen.
• Das erste Bild nicht verzögern: Das beim Öffnen der Seite sichtbare Hauptproduktbild sollte nicht verzögert geladen werden; es ist der wichtigste Inhalt.
• Breite und Höhe angeben: Die Abmessungen sollten vorab festgelegt sein, damit die Seite nicht verspringt, wenn das Bild eintrifft.
• Eine zum Bildschirm passende Größe ausliefern: An Smartphones kann eine kleinere, an Desktops eine größere Quelle gesendet werden.
• Ein Verteilnetzwerk (CDN) nutzen: Bilder laden schneller, wenn sie von einem Server in der Nähe des Nutzers kommen.

Okumanızı öneririzCDN Nedir? Ve Ne İşe Yarar?

Wie sollte eine Produktgalerie aufgebaut sein?

Da Kundinnen und Kunden das Produkt nicht in die Hand nehmen können, übernimmt die Galerie diese Aufgabe: Verschiedene Blickwinkel, Details und Anwendungsbilder schaffen Vertrauen. Beim Aufbau der Galerie ist Einheitlichkeit ebenso wichtig wie die Anzahl der Bilder.

• Verwenden Sie genügend Bilder: Planen Sie mindestens einige Bilder für Vorderseite, Rückseite, Seite, Details und Anwendung ein.
• Wählen Sie als erstes das klarste Bild: Das erste Bild erscheint auf Listenseiten und beim Teilen; es sollte scharf sein und einen weißen oder schlichten Hintergrund haben.
• Halten Sie Hintergrund und Seitenverhältnis einheitlich: Ein ähnlicher Hintergrund und dasselbe Seitenverhältnis bei allen Produkten sorgen für ein aufgeräumtes Erscheinungsbild des Shops.
• Zeigen Sie Größe und Maßstab: Ein Anwendungsbild, das ein Gefühl für die Größe vermittelt, oder eine Größentabelle senkt die Retourenquote.
• Fügen Sie ein Video hinzu: Ein kurzes Produktvideo zeigt Bewegung und Textur, die ein Bild nicht vermitteln kann.

LesetippWie sollte eine E-Commerce-Produktseite aussehen?

Workflow zur Bildoptimierung für Hunderte von Produkten

In einem Shop mit vielen Produkten ist es unmöglich, Bilder einzeln zu optimieren; deshalb braucht es einen festen Workflow. Die folgenden acht Schritte bieten einen wiederholbaren Ablauf von der Aufnahme bis zur Veröffentlichung.

1. Aufnehmen: Fotografieren Sie jedes Produkt mit festem Licht und Hintergrund im selben Satz an Blickwinkeln.
2. Auswählen: Wählen Sie die schärfsten und einheitlichsten Aufnahmen aus.
3. Zuschneiden: Bringen Sie alle Produkte auf dasselbe Seitenverhältnis.
4. Skalieren: Verkleinern Sie auf die Zielbreite (etwa das Doppelte der angezeigten Größe).
5. Komprimieren und Format wählen: WebP oder JPEG, ohne sichtbaren Qualitätsverlust.
6. Benennen: Vergeben Sie aussagekräftige Namen oder Namen, die der Zuordnungsregel Ihres Systems entsprechen.
7. Hochladen: Nutzen Sie den Massenupload, falls vorhanden, und füllen Sie die Alternativtexte aus.
8. Messen: Prüfen Sie die Bildhinweise in einem Tool zur Messung der Seitengeschwindigkeit.

Okumanızı öneririzE-Ticaret Görsellerinizi Bu Programlarla Düzenleyin

Hintergrund des Produktbilds: Weiß oder Lifestyle?

Beides ist notwendig und erfüllt unterschiedliche Aufgaben: Ein Bild mit schlichtem (meist weißem) Hintergrund zeigt das Produkt klar und sorgt für Ordnung auf Listenseiten, während ein Lifestyle-Bild das Produkt im Anwendungskontext zeigt und die Fantasie anregt. Am sichersten ist es, das schlichte Bild, das das Produkt am klarsten darstellt, als erstes Galeriebild zu verwenden und danach Lifestyle- und Detailbilder folgen zu lassen.

• Schlichtes Bild auf der Listenseite: Derselbe Hintergrund und dasselbe Seitenverhältnis lassen den Shop ordentlich und vertrauenswürdig wirken.
• Kontext auf der Detailseite: Ein Anwendungsbild zeigt die Größe des Produkts und wofür es verwendet wird.
• Detailbilder: Details wie Nähte, Struktur, Etiketten und Anschlüsse erleichtern die Kaufentscheidung.

Wie oft sollte die Bildoptimierung durchgeführt werden?

Die Bildoptimierung ist keine einmalige Aufgabe; sie wiederholt sich, wenn neue Produkte hinzukommen, das Design sich ändert und der Katalog wächst. Am besten lassen Sie die Bilder jedes neuen Produkts vor der Veröffentlichung denselben Workflow durchlaufen und prüfen den älteren Katalog in regelmäßigen Abständen.

• Bei jedem neuen Produkt: Standardisieren Sie den Workflow (Größe, Format, Name, Alternativtext).
• Bei Änderung von Design oder Template: Die Größe, in der Bilder angezeigt werden, kann sich geändert haben; prüfen Sie die Quellgröße erneut.
• Alle drei Monate: Messen Sie die Seiten mit dem meisten Traffic erneut in einem Tool zur Messung der Seitengeschwindigkeit.
• Vor Kampagnen: Prüfen Sie die Bilder der meistbesuchten Seiten, bevor starker Traffic eintrifft.

Wie wird die Bildoptimierung gemessen?

Ob die Optimierung gewirkt hat, erkennen Sie anhand von Messungen der Seitengeschwindigkeit und des Seitengewichts. Messen Sie zu zwei Zeitpunkten: vor und nach der Änderung, auf derselben Seite und unter denselben Bedingungen.

• Bericht zur Seitengeschwindigkeit: Sind Hinweise wie „Bilder richtig dimensionieren“, „Bilder in modernen Formaten bereitstellen“ und „Bilder außerhalb des Bildschirms zurückstellen“ verschwunden?
• Gesamtgewicht der Seite: Ist die gesamte Download-Größe der Produktseite gesunken?
• Largest Contentful Paint: Erscheint das Hauptproduktbild jetzt früher?
• Mobile Messung: Messen Sie insbesondere unter den Bedingungen einer langsamen mobilen Verbindung.

8 häufige Fehler bei der Bildoptimierung

1. Handybilder unverändert hochladen: Ein Bild mit Tausenden Pixeln Breite wird vollständig geladen, obwohl es nur in einem kleinen Bereich angezeigt wird.
2. Überall PNG verwenden: PNG erzeugt bei Fotos sehr große Dateien.
3. Zu stark komprimieren: Sichtbare Verzerrungen und Unschärfe schaden dem Vertrauen.
4. Einen bedeutungslosen Dateinamen belassen: Namen wie „IMG_2034“ enthalten keine Information.
5. Alternativtext leer lassen oder mit Schlüsselwörtern überladen: Beide Extreme schaden der Barrierefreiheit und der Suche.
6. Das Hauptbild zu spät laden: Wird das erste auf dem Bildschirm sichtbare Bild zurückgestellt, wirkt die Seite leer.
7. Die Bildgröße nicht angeben: Wenn das Bild geladen wird, verschiebt sich die Seite nach unten.
8. Uneinheitliche Seitenverhältnisse und Hintergründe verwenden: Die Listenseite wirkt unaufgeräumt.

Checkliste zur Optimierung von Produktbildern

Bevor Sie Ihre Produktbilder veröffentlichen, sollten Sie alle folgenden Punkte mit „Ja“ beantworten können.

• Ist das Bild etwa doppelt so breit wie die angezeigte Größe?
• Wurden Fotos als WebP oder JPEG ohne sichtbaren Qualitätsverlust komprimiert?
• Sind Logos und Icons als SVG vorhanden oder von geringer Größe?
• Sind die Dateinamen aussagekräftig, kleingeschrieben und ohne türkische Sonderzeichen (oder entsprechen sie der Zuordnungsregel des Systems)?
• Hat jedes Bild einen kurzen, aussagekräftigen Alternativtext?
• Gibt es in den Alternativtexten kein Keyword-Stuffing?
• Enthält die Produktgalerie genügend Blickwinkel, Detail- und Anwendungsbilder?
• Haben alle Produktbilder dasselbe Seitenverhältnis und einen einheitlichen Hintergrund?
• Werden Bilder unterhalb des sichtbaren Bereichs verzögert geladen, das Hauptbild dagegen sofort?
• Sind Breite und Höhe der Bilder definiert?
• Wurde nach der Änderung eine Messung der Seitengeschwindigkeit durchgeführt?

Produktbildverwaltung mit Faprika

Korrekt aufbereitete Bilder für Hunderte von Produkten schnell zu veröffentlichen, ist die zweite Hälfte der Arbeit. In der E-Commerce-Infrastruktur von Faprika decken die folgenden Elemente diese Phase ab (welche Funktion in welchem Paket beginnt, sehen Sie auf der Seite E-Commerce-Pakete):

• Drag-and-drop und Upload mehrerer Bilder: Beim Hinzufügen eines Produkts laden Sie mehrere Bilder per Drag-and-drop oder Dateiauswahl hoch; die Schritte finden Sie in der Anleitung Neues Produkt hinzufügen.
• Massenupload von Produktbildern: Sie benennen die Bilder nach Produkt-ID, Lagernummer oder Barcode und laden sie in einem Zug hoch; als Trennzeichen für die Reihenfolge wählen Sie Bindestrich, Unterstrich oder Sternchen. Einzelheiten finden Sie in der Anleitung Massenupload von Bildern; diese Funktion hängt vom Paket ab.
• Funktion Produktbild-Canvas: Der Bild-Canvas wird in den Einstellungen für Produktliste und Produktdetail festgelegt; er ist in allen Paketen enthalten.
• Logo während des Ladens (Lazy Logo): Während Bilder laden, erscheint das Logo Ihrer Marke im Hintergrund des Produkt-Canvas; Einzelheiten finden Sie in der Anleitung Lazy-Logo-Verwaltung.
• Automatisches Video: Der Bereich Produktbilder enthält eine Option für automatische Videos; es wird empfohlen, sie zusammen mit mehreren Bildern zu verwenden.
• Content Delivery Network (CDN): Ein CDN, das den Bild- und Dateiverkehr beschleunigt, wird je nach Paket angeboten.

Häufig gestellte Fragen

Was ist Produktbildoptimierung?

Produktbildoptimierung bedeutet, Dateigröße, Format, Name, Alternativtext und Ladeverfahren eines Produktfotos unter Beibehaltung der Qualität optimal auf Seitengeschwindigkeit, Barrierefreiheit und Suchmaschinen abzustimmen. Ziel ist es, kleinere und aussagekräftigere Dateien ohne sichtbaren Qualitätsverlust bereitzustellen.

Welche Größe sollte ein Produktbild haben?

Das Quellbild sollte etwa doppelt so breit sein wie die Darstellung auf der Seite; das sorgt auf hochauflösenden Bildschirmen für ein scharfes Bild. Bei einer Zoomfunktion kann die Quelle bis zum Dreifachen betragen. Für ein Bild, das auf der Seite 600 Pixel breit angezeigt wird, sind beispielsweise 1200 Pixel Breite geeignet.

Was ist WebP und warum wird es bevorzugt?

WebP ist ein modernes, speziell für Bilder entwickeltes Format; es liefert in der Regel bei kleinerer Datei eine ähnliche Qualität wie JPEG und PNG und unterstützt Transparenz. Dank der breiten Browserunterstützung ist es eine verbreitete Wahl für Produktfotos; für ältere Systeme kann ein JPEG-Fallback in Betracht gezogen werden.

Wie schreibt man Alternativtext?

Der Alternativtext sollte ein kurzer Satz sein, der das Bild jemandem beschreibt, der es nicht sehen kann: Nennen Sie, was das Produkt ist und was es auszeichnet. Schreiben Sie nicht „Bild“ oder „Foto“, überladen Sie ihn nicht mit Schlüsselwörtern und verfassen Sie für jedes Bild einen eigenen Text. Bei rein dekorativen Bildern bleibt der Alternativtext leer.

Ist der Bilddateiname für SEO wichtig?

Ein aussagekräftiger Dateiname ist ein kleiner Hinweis, der beim Verständnis des Bildinhalts hilft; er ist nicht so ausschlaggebend wie der Alternativtext und der Produktname. Schreiben Sie den Dateinamen klein, ohne Sonderzeichen und Leerzeichen und trennen Sie die Wörter mit Bindestrichen.

Ist es richtig, alle Bilder per Lazy Loading zu laden?

Nein. Bilder unterhalb des sichtbaren Bereichs sollten verzögert geladen werden, das Hauptproduktbild, das beim Öffnen der Seite sofort sichtbar ist, jedoch nicht; sonst verzögert sich der wichtigste Inhalt und die Seite wirkt leer.

Das könnte Sie auch interessieren

• Bir Web Sitesinin Performansını Yavaşlatan En Önemli Detaylar
• Video İçeriklerle E-ticarette Fark Yaratın
• Wie funktioniert SEO für Kategorieseiten?
• E-Ticaret Sitesi Güvenlik Sistemleri