Produktbilder für den Onlineshop optimieren

Beginnen Sie mit den Produktinformationen, die Kunden benötigen

Ein Produktbild soll mehr können, als nur ein Rechteck auszufüllen. Es soll dem Kunden helfen, Form, Verarbeitung, Farbe und Eigenschaften des Produkts zu beurteilen. Ein Export, der Nähte entfernt, Schriftzüge unleserlich macht oder das Erscheinungsbild einer Oberfläche verändert, ist zu stark komprimiert, selbst wenn die Dateigröße beeindruckend erscheint.

Wählen Sie vor der Bearbeitung eine kleine Auswahl an aussagekräftigen Ansichten. Ein klares Hauptfoto, ein weiterer Blickwinkel und eine Nahaufnahme eines wichtigen Merkmals beantworten in der Regel mehr Fragen als mehrere nahezu identische Bilder. Fügen Sie eine Lifestyle-Ansicht oder einen Größenvergleich hinzu, wenn dies zur Produktbeschreibung beiträgt. Es gibt keine vorgeschriebene Anzahl: Eine einfache Tasse und eine Funktionsjacke benötigen unterschiedliche Informationen.

Bewahren Sie Ihre Originalfotos in einem separaten Ordner auf. Erstellen Sie Kopien für die Veröffentlichung mit Namen, die das Produkt und die Ansicht identifizieren. Wenn das Originalbild unscharf, schlecht beleuchtet oder zu klein ist, kann die Komprimierung dies nicht beheben. Ersetzen Sie das unscharfe Foto, bevor Sie Zeit mit den Exporteinstellungen verbringen.

Einheitliche Bildausschnitte und Hintergründe

Öffnen Sie eine Kollektionsseite und betrachten Sie mehrere Produkte zusammen. Unterschiedliche Leerräume können dazu führen, dass ähnliche Produkte unzusammenhängend wirken oder sich deutlich in der Größe unterscheiden. Wählen Sie ein Seitenverhältnis, das zu Ihrem Theme passt, und achten Sie darauf, dass die Position des Motivs und der umgebende Raum in den Hauptbildern möglichst einheitlich sind.

Ein quadratischer Bildausschnitt eignet sich gut für ein quadratisches Produktraster, ist aber keine allgemeingültige Regel. Ein hohes Kleidungsstück oder ein langes Gerät erfordert möglicherweise eine andere Darstellung. Überprüfen Sie das gesamte Objekt inklusive Griffen und Zubehör, bevor Sie einen Bildausschnitt akzeptieren. Verzerren Sie ein Foto nicht, um es an eine Vorlage anzupassen.

Für eine ganze Bildserie eignet sich Pixilos Produktbild-Optimierer. Lege gemeinsame Maße für die Arbeitsfläche, Mindestabstände und einen Hintergrund fest. Schneide anschließend jedes Foto einzeln zu und passe seine Position an. Prüfe die Serie unter Alle Bilder, bevor du sie herunterlädst. Mit Vergrößern kannst du feine Details und die gewählte Ausgabequalität kontrollieren.

Der Mindestabstand wird von den Kanten des zugeschnittenen Bildes aus gemessen, nicht von einem automatisch erkannten Produkt. Leerraum und deckende Hintergründe im Ausgangsbild bleiben erhalten, sofern du sie nicht wegschneidest. Eine einheitliche Arbeitsfläche sorgt deshalb nicht automatisch für gleich groß dargestellte Produkte. Prüfe auch das veröffentlichte Produktraster, da dein Theme die Bilder zusätzlich zuschneiden kann.

Ein weißer oder neutraler Hintergrund sorgt für ein einheitliches Erscheinungsbild des Katalogs, während Transparenz besser zu Designs passt, die Produkte auf unterschiedlichen Hintergründen präsentieren. Falls eine PNG- oder WebP-Datei bereits transparente Bereiche enthält, kann das Hintergrundfarben-Werkzeug diese mit einer ausgewählten Farbe füllen und eine JPG-Datei erstellen. Es entfernt jedoch keinen vorhandenen Hintergrund aus einem normalen Foto.

Prüfen Sie transparente Kanten vor hellen und dunklen Hintergründen. Eine blasse Kontur, die auf Weiß verschwindet, kann auf einer dunklen Seite deutlich sichtbar werden. Gehört sie bereits zum Originalbild, entfernt ein Formatwechsel sie nicht. Weitere Hinweise finden Sie im Leitfaden zu unerwarteten Hintergründen transparenter Bilder.

Wählen Sie die Abmessungen für das Raster, die Produktseite und den Zoom

Messen Sie, wie breit das Bild in Ihrem Layout tatsächlich erscheint. Eine Kollektionskarte könnte 360 ​​CSS-Pixel belegen, während das Hauptproduktbild 800 Pixel einnehmen könnte. Dies sind Anzeigebreiten, keine automatischen Anforderungen an die hochgeladene Datei.

Ein CSS-Pixel misst die sichtbare Größe im Seitenlayout. Auf einem Bildschirm mit hoher Pixeldichte kann ein CSS-Pixel mehrere physische Bildschirmpixel nutzen. Ein scharfes Bild kann daher mehr Bildpixel benötigen als seine angezeigte Breite.

Für hochauflösende Bildschirme eignet sich eine Version mit etwa der doppelten Anzeigebreite zum Testen. Eine 360-Pixel-Karte könnte beispielsweise mit 720 Pixeln exportiert werden, während ein 800-Pixel-Produktbild mit 1600 Pixeln exportiert werden könnte. Halten Sie auch kleinere Versionen bereit. Diese Zahlen dienen als Planungsbeispiele und stellen keine Plattformempfehlungen oder Garantien hinsichtlich der Dateiauswahl durch den Browser dar.

Planen Sie die Zoomansicht separat. Wenn Kunden ein Gewebe, einen Beschlag oder eine Gravur untersuchen müssen, sollte ein ausreichend detailliertes Originalbild beibehalten oder eine separate Nahaufnahme bereitgestellt werden. Ein kleiner Rasterexport sollte nicht die einzige Datei sein, die dem Zoom-Viewer zur Verfügung steht. Umgekehrt sollte das Raster nicht dazu führen, dass jeder Besucher ein hochauflösendes Zoombild herunterlädt.

Ihre Plattform kann diese Varianten automatisch generieren. Wenn Sie die Auslieferung selbst steuern, verwenden Sie responsive Bilder, damit der Browser eine geeignete Version anfordern kann. Der Leitfaden für responsive Bilder erklärt, wie Bildabmessungen, srcset und sizes zusammenhängen. Ein großes Bild lediglich mit CSS kleiner aussehen zu lassen, führt nicht zu einer kleineren herunterladbaren Datei.

Ein echtes Beispiel: ein Produktfoto für eine quadratische Karte zuschneiden

Dieses Foto ist 1920 × 1076 Pixel groß. Der Tiegel nimmt nur einen kleinen Teil der breiten Aufnahme ein. Für eine quadratische Produktkarte lässt sich der Ausschnitt enger wählen, ohne das Produkt zu verzerren oder den fotografierten Hintergrund zu entfernen.

1. Wählen Sie den Ausschnitt. Lassen Sie im Produktbild-Optimierer den ganzen Deckel und den Boden des Tiegels innerhalb eines 630 × 630 Pixel großen Ausschnitts. Der Sockel darf über den Bildrand hinausreichen; das Produkt selbst sollte vollständig sichtbar bleiben.
2. Legen Sie die Ausgabe fest. Verwenden Sie eine Arbeitsfläche von 600 × 600 Pixeln und 0 % Abstand. Lassen Sie die Vergrößerung ausgeschaltet: Der Ausschnitt ist etwas größer als die Ausgabe und kann ohne zusätzliche Pixel verkleinert werden.
3. Exportieren und prüfen Sie das Bild. Wir haben ein JPG mit Qualität 90 heruntergeladen. Es ist 16,4 kB groß. Kontrollieren Sie Deckelrand, zarten Schatten und glatte weiße Oberfläche, bevor Sie das Ergebnis übernehmen.

Das 600-Pixel-Quadrat ist ein Beispiel für eine Produktkarte, keine allgemeine Upload-Empfehlung. Eine größere Galerie oder Zoomansicht kann mehr Pixel benötigen. Die kleinere Datei entsteht durch Zuschnitt, Skalierung und JPG-Export zusammen; sie misst nicht allein die Komprimierung. Der ursprüngliche Hintergrund und ein Teil des Sockels bleiben erhalten.

Wählen Sie ein Format, das zum Bild passt und von Ihrem Veröffentlichungssystem unterstützt wird

Trennen Sie das Format, das Sie hochladen, von dem Format, das Besucher erhalten. Ihr Shop akzeptiert möglicherweise JPG- oder PNG-Originalbilder und liefert automatisch WebP- oder AVIF-Dateien aus. In diesem Fall kann das manuelle Vorbereiten mehrerer Uploads in modernen Formaten zusätzlichen Aufwand bedeuten, ohne das Ergebnis zu verbessern.

• JPG: Ein praktischer Ausgangspunkt für Fotos mit undurchsichtigem Hintergrund, insbesondere wenn Ihre Plattform oder ein anderes Ziel JPEG erfordert. Überprüfen Sie kleine Schriftzüge und feine Texturen nach der Komprimierung.
• PNG: Nützlich, wenn Sie Transparenz benötigen oder scharfe Grafikelemente ohne erneuten verlustbehafteten Export erhalten möchten. Eine große fotografische PNG-Datei kann deutlich größer sein als eine geeignete Alternative.
• WebP: Ein Vergleich lohnt sich für Fotos und transparente Produktgrafiken, sofern Ihre Publishing-Umgebung dies unterstützt. Das Format unterstützt verschiedene Komprimierungsmodi, aber die PNG/JPG-zu-WebP-Konverter von Pixilo verwenden eine Qualitätseinstellung anstelle eines dedizierten verlustfreien Modus.
• AVIF: Eine weitere Option, wenn Ihr gesamter Publishing-Workflow dies unterstützt. Testen Sie das exportierte Bild und die veröffentlichte Seite; eine kleinere Datei allein beweist nicht, dass das Bild geeignet aussieht.

Nutzen Sie den Leitfaden zu Bildformaten auf der Website für einen umfassenderen Vergleich. Bevor Sie einen ganzen Katalog ersetzen, testen Sie es mit einem normalen Foto und einem schwierigen Bild, z. B. einem feinen Muster oder einem transparenten Ausschnitt. Prüfen Sie, ob Uploads, Miniaturansichten, Galerien und Zoom funktionieren.

Legen Sie eine sinnvolle Zieldateigröße fest, ohne dabei Details zu verlieren

Es gibt keine allgemeingültige optimale Dateigröße für Produktfotos. Ein einfaches Objekt vor einfarbigem Hintergrund und ein detailreiches Kleidungsstück benötigen möglicherweise unterschiedliche Einstellungen bei gleichen Abmessungen. Auch die Ladeanforderungen einer Kollektionsseite mit vielen Bildern unterscheiden sich von denen einer Galerie mit einem einzigen großen Bild.

Für ein Bild, das Sie direkt ausliefern möchten, können Sie zunächst eine 200-KB-Datei testen und dann entscheiden, ob diese brauchbar ist. Dies ist ein Beispiel, keine Vorgabe. Falls Beschriftungen oder Materialdetails unleserlich werden, versuchen Sie es mit einer weniger starken Komprimierung, einem effizienteren Format oder einer anderen Anzeigegröße. Reduzieren Sie die Qualität nicht ständig, nur um eine willkürliche Zahl zu erreichen.

Vergleichen Sie die Bilder in der Größe, die Käufer normalerweise sehen, und prüfen Sie anschließend die wichtigen Bereiche in Originalgröße oder im Zoom-Viewer. Achten Sie auf unsaubere Buchstabenränder, Kompressionsblöcke in Schatten, verschmierte Texturen und ungleichmäßige Übergänge auf glatten Hintergründen. Die beste Wahl ist die kleinste akzeptable Version für den jeweiligen Einsatzort, nicht die kleinste Exportgröße, die Ihr Tool erzeugen kann.

Für einen getrennten Komprimierungstest haben wir das unbeschnittene Original erneut als JPG mit Qualität 20 exportiert. Alle 1920 × 1076 Pixel bleiben erhalten. Das Ergebnis ist 28,0 kB groß, rund 62 % kleiner als das Original. Vergleichen Sie Deckelrand, Wand und weichen Schatten mit dem Schieberegler und Details prüfen. Qualität 20 ist eine bewusst niedrige Testeinstellung, keine empfohlene Vorgabe. Prüfen Sie das Bild auch in seiner späteren Anzeigegröße.

Original-JPGJPG · Qualität 20

Wenn ein Upload-Formular ein tatsächliches Limit hat, verwenden Sie das Werkzeug zur Komprimierung auf eine Zieldateigröße. Behalten Sie die Abmessungen zunächst unverändert bei und erlauben Sie eine proportionale Skalierung nur, wenn dies für den Zweck des Bildes angemessen ist. Ein striktes Limit kann sichtbare Kompromisse erzwingen; manchmal ist ein neuer Bildausschnitt oder ein separates Detailfoto sinnvoller als eine weitere Komprimierung.

Vermeiden Sie wiederholtes Exportieren von der zuletzt komprimierten Kopie. Kehren Sie zum Original zurück, wenn Sie eine andere Qualitätseinstellung ausprobieren. Qualitätsangaben sind nicht zwischen verschiedenen Formaten oder Encodern austauschbar, daher würden ein JPG mit 80 und ein AVIF mit 80 nicht automatisch gleich aussehen.

Prüfen Sie, welche Funktionen Shopify, WordPress oder Ihr Shop bereits bieten

Shopifys Dokumentation zum Bild-Upload beschreibt die automatische Optimierung im Shop und empfiehlt hochwertige Originaldateien statt einer verpflichtenden manuellen Vorkomprimierung. Das ausgelieferte Format kann vom hochgeladenen Format abweichen. Prüfen Sie die Anforderungen Ihrer Produktmedien und Ihres Themes. Ein kleines Größenbudget für die Auslieferung sollte nicht pauschal auf jedes hochgeladene Original angewendet werden.

Überprüfen Sie bei einem WordPress-Shop die von Ihrem Theme generierten Bildgrößen sowie alle verwendeten Optimierungs-Plugins oder Bilddienste. Stellen Sie sicher, dass die Kollektionskarte, die Produktgalerie und die Zoomfunktion die korrekten Versionen erhalten. Der WordPress-Leitfaden zur Bildoptimierung beschreibt die einzelnen Arbeitsschritte.

Wenn Sie ein Bild ersetzen, laden Sie die Seite neu und überprüfen Sie, ob die neue Version angezeigt wird. Zwischengespeicherte Thumbnails oder generierte Varianten können dazu führen, dass ein alter Export als neues Ergebnis erscheint. Das Hinzufügen eines weiteren Komprimierungs-Plugins, bevor Sie die aktuelle Pipeline überprüft haben, kann eher zu Verwirrung führen als das Problem zu lösen.

Pixilo bereitet einzelne Dateien lokal in Ihrem Browser vor. Es verbindet sich nicht mit Ihrem Shop, aktualisiert keinen Katalog und konfiguriert nicht die Bildauslieferung. Die Werkzeuge JPG zu WebP, PNG zu WebP, WebP zu JPG und PNG zu JPG verkleinern Bilder, deren Breite oder Höhe 4000 Pixel überschreitet, unter Beibehaltung der Proportionen. Die Bildgrößenanpassung erlaubt bis zu 8000 Pixel je Seite und insgesamt 32 Millionen Pixel. Prüfen Sie die heruntergeladenen Abmessungen, wenn Sie ein großes Original für die Zoomansicht vorbereiten.

Helfen Sie Suchmaschinen, die Produktbilder zu verstehen

Beschreiben Sie die Ansicht präzise. Ein Dateiname wie blue-ceramic-mug-side-view.jpg ist einfacher zu handhaben als IMG_4837.jpg. Schreiben Sie für den Alternativtext eine aussagekräftige Beschreibung des Bildinhalts, z. B.: „Blaue Keramiktasse mit gebogenem Henkel, Seitenansicht“. Ein weiteres Foto sollte seine eigene Ansicht beschreiben, anstatt denselben Text zu wiederholen.

Platzieren Sie das Bild in der Nähe relevanter Produktinformationen und vermeiden Sie es, Dateinamen oder Alternativtexte mit wiederholten Suchbegriffen zu überfrachten. Googles Richtlinien zur Bild-SEO erläutern beschreibenden Text und die Bildfindung. Diese Vorgehensweisen helfen, den Bildinhalt zu verdeutlichen; sie garantieren jedoch kein gutes Ranking.

Überprüfen Sie auch die Produktseite. Ein korrektes Bild der gewählten Farbe oder Variante ist hilfreicher als eine perfekt optimierte Datei, die den falschen Artikel zeigt. Die Bildoptimierung sollte eine korrekte Produktbeschreibung unterstützen und nicht fehlende Produktinformationen kompensieren.

Überprüfen Sie das veröffentlichte Ergebnis, bevor Sie den gesamten Katalog ändern

• Kollektionsansicht: Das Produkt ist gut sichtbar, die Bildausschnitte sind einheitlich und das Raster lädt keine unnötig großen Dateien herunter.
• Produktgalerie: Das Hauptbild ist klar, zusätzliche Ansichten liefern weitere Informationen und die richtige Variante wird angezeigt.
• Zoom: Wichtige Beschriftungen, Texturen und Details bleiben auch bei der gewünschten Vergrößerung gut lesbar.
• Smartphone-Layout: Ein schmaler Bildschirm schneidet das Motiv nicht ab und zwingt kein großes, nur für Desktop-Computer optimiertes Bild in einen zu kleinen Bereich.
• Hintergründe: Transparente Kanten und Volltonflächen wirken im Vergleich zu den tatsächlichen Seitenfarben korrekt.
• Laden: Prüfen Sie die Bildanfragen bei einem erstmaligen Seitenaufruf. So wird vermieden, dass das Hauptproduktbild verzögert wird, nur weil andere Galeriebilder später geladen werden können.
• Layout: Korrekte Bildproportionen beibehalten, damit Text und Schaltflächen beim Erscheinen von Fotos nicht verrutschen.
• Quelldateien: Originaldateien und eine kurze Aufzeichnung der für die Veröffentlichung verwendeten Einstellungen aufbewahren.

Beginnen Sie mit einigen repräsentativen Produkten, darunter Bilder mit vielen Details. Vergleichen Sie die Bilder vor und nach der Optimierung unter ähnlichen Bedingungen. Sobald Darstellung und Auslieferung funktionieren, wenden Sie den Vorgang auf den restlichen Katalog an. Für eine detailliertere Analyse von Ladeproblemen lesen Sie bitte: Warum laden Website-Bilder langsam?

Häufig gestellte Fragen

Welche Bildgröße ist optimal für einen Online-Shop?

Das hängt von den Anzeigegrößen und dem Zoomverhalten des Themes ab. Messen Sie das Raster und die Galerie, achten Sie darauf, dass genügend Originalbilddetails für die Vergrößerung erhalten bleiben, und überprüfen Sie die generierten Dateien. Es gibt keine universelle quadratische Größe, die für jedes Produkt oder jede Plattform geeignet ist.

Sollten alle Produktbilder kleiner als 200 KB sein?

Nein. Dies kann ein Testbudget für direkt ausgelieferte Bilder sein, ist aber keine allgemeine Upload-Regel. Ein Originalbild für die Zoomansicht muss möglicherweise mehr Details enthalten, und eine automatisch optimierende Plattform arbeitet unter Umständen besser mit einem hochauflösenden Upload.

Ist JPG oder PNG besser für Produktfotos geeignet?

JPG ist ein guter Ausgangspunkt für normale Fotos mit undurchsichtigem Hintergrund. PNG eignet sich gut für Transparenz und scharfe Grafiken, kann aber für Fotos zu groß sein. Prüfen Sie den Ablauf beim Hochladen und Ausliefern der Bilder Ihrer Plattform, bevor Sie sich entscheiden; das Format, das Käufer erhalten, kann abweichen.

Warum ist mein Produktbild nach dem Hochladen unscharf?

Vergleichen Sie das Original, Ihre exportierte Datei und das vom Shop gelieferte Bild. Häufige Ursachen sind ein zu kleines Originalbild, starke Komprimierung, ein kleines generiertes Vorschaubild in einer großen Galerie oder eine Zoom-Ansicht, die dieselbe kleine Datei vergrößert. Ermitteln Sie, welcher Schritt die Unschärfe verursacht hat, bevor Sie die Einstellungen ändern.

Kann Pixilo den Hintergrund eines Produktfotos entfernen?

Nein. Der Produktbild-Optimierer füllt zusätzliche Fläche und bereits transparente Bereiche mit der gewählten Hintergrundfarbe. Er erkennt keine Produkte und entfernt keinen deckenden Fotohintergrund. Auch das separate Werkzeug für die Hintergrundfarbe benötigt ein bereits freigestelltes Bild, wenn du den Hintergrund hinter einem Produkt ändern möchtest.