Planen Sie die Bilder für Ihren Online-Shop und wählen Sie die richtige Größe, das richtige Seitenverhältnis und das richtige Format aus.
Wie funktionieren Bilder im Shop?
Bilder werden auf zwei verschiedene Arten verwaltet. Produktbilder werden direkt zu jedem Produkt hochgeladen. Alle anderen Bilder, die auf benutzerdefinierten Seiten, im Theme und an anderen Stellen verwendet werden, werden unter „Darstellung“ → „Dateiarchiv“ in das Dateiarchiv hochgeladen.
Es empfiehlt sich, die Bilder zu planen, bevor Sie mit dem Hochladen beginnen. Verwenden Sie für alle Produktbilder dieselben Abmessungen und dasselbe Seitenverhältnis. So sorgen Sie für eine einheitliche und professionelle Darstellung auf der Startseite, den Kategorieseiten und den Produktseiten.
Wie bearbeitet man Bilder?
Bilder können nicht direkt im Shop bearbeitet werden. Bearbeiten Sie sie vor dem Hochladen in einem Bildbearbeitungsprogramm. Adobe Photoshop ist eine beliebte kostenpflichtige Option. Zu den kostenlosen oder browserbasierten Alternativen gehören GIMP, Paint.NET und Pixlr.
Seitenverhältnisse
Wie groß sollte ein Bild sein und welche Größe ist am besten geeignet? Darauf gibt es keine pauschale Antwort, da die richtigen Abmessungen vom in Ihrem Theme gewählten Seitenverhältnis abhängen.
Ein Seitenverhältnis beschreibt das Verhältnis zwischen der Breite und der Höhe eines Bildes.
Ein Bild im Seitenverhältnis 5:2 kann beispielsweise 5000 × 2000 Pixel, 2500 × 1000 Pixel oder 500 × 200 Pixel groß sein. Alle drei Bilder haben dieselbe Form, jedoch unterschiedliche Pixelabmessungen.
Wenn Sie quadratische Bilder wünschen, wählen Sie das Seitenverhältnis 1:1 und laden Sie Bilder mit Abmessungen wie beispielsweise 1000 × 1000 Pixel hoch.
Diashow
Die Einstellungen für den Diashow-Block finden Sie auf der Startseite unter:
Darstellung → Themes → Theme auswählen → Bearbeiten → Inhalt → Startseite → Diashow
Beispiel 1:
Stellen Sie das Seitenverhältnis der Diashow auf 5:1 ein:
Laden Sie anschließend Bilder mit einer Größe von 1500 × 300 Pixel hoch:
Beispiel 2:
Stellen Sie das Seitenverhältnis auf 3:1 ein:
Laden Sie anschließend Bilder mit einer Größe von 1500 × 500 Pixel hoch:
Wird das Bild beschnitten?
Wenn Sie ein Bild mit einer Größe von 1500 × 300 Pixel hochladen, die Diashow jedoch auf ein Seitenverhältnis von 3:1 einstellen, wird das Bild beschnitten. Das Bild wird nicht automatisch an das ausgewählte Seitenverhältnis angepasst. Laden Sie ein Bild mit dem gleichen Seitenverhältnis wie in den Design-Einstellungen hoch, um unerwünschtes Beschneiden zu vermeiden.
Produktbilder
Produktbilder werden sowohl in den Produktlisten als auch auf der einzelnen Produktseite angezeigt:
Product images displayed in an Abicart product listing Product image displayed on an individual Abicart product page
Laden Sie das Bild unter folgendem Menüpunkt zum Produkt hoch:
Sortiment → Produkte → Produkt auswählen → Bearbeiten → Bilder → Bild hochladen
Legen Sie anschließend das Seitenverhältnis im Theme fest unter:
Darstellung → Themes → Theme auswählen → Bearbeiten → Stil → Bilder
Beispiel 1: Quadratische Produktbilder
Stellen Sie das Seitenverhältnis auf 1:1 ein:
Laden Sie anschließend Bilder mit einer Größe von 1000 × 1000 Pixel hoch:
Beispiel 2: Produktbilder im Querformat
Stellen Sie das Seitenverhältnis auf 3:2 ein:
Laden Sie anschließend Bilder mit einer Größe von 1500 × 1000 Pixel hoch:
Bilder von Produktgruppen
Ein Produktgruppenbild wird auf der Produktgruppe selbst angezeigt:
Laden Sie Produktgruppenbilder unter folgendem Pfad hoch:
Sortiment → Produktgruppen → Produktgruppe auswählen → Bearbeiten → Eigenschaften → Bild in der Produktgruppentabelle
Legen Sie das Seitenverhältnis im Theme fest unter:
Darstellung → Themes → Theme auswählen → Bearbeiten → Stil → Bilder
Beispiel 1: Quadratische Bilder
Stellen Sie das Seitenverhältnis auf 1:1 ein:
Laden Sie anschließend Bilder mit einer Größe von 1000 × 1000 Pixel hoch:
Beispiel 2: Bilder im Querformat
Stellen Sie das Seitenverhältnis auf 3:2 ein:
Laden Sie anschließend Bilder mit einer Größe von 1500 × 1000 Pixel hoch:
Schaufenster
Die Bilder der Storefronts im Theme haben ein Seitenverhältnis von 5:4, unabhängig davon, wie viele in jeder Zeile angezeigt werden. Die empfohlenen Pixelabmessungen erhöhen sich, wenn weniger Storefronts angezeigt werden, da jedes Bild dann mehr Platz einnimmt.
4 Storefronts:
1000 × 800 Pixel
3 Storefronts:
1500 × 1200 Pixel
2 Ladenfronten:
2000 × 1600 Pixel
1 Ladenfront:
2500 × 2000 Pixel
Die Wahl der optimalen Bildgröße für einen Online-Shop
Es gibt keine einheitliche Bildgröße, die für jeden Online-Shop geeignet ist. Die richtigen Abmessungen hängen davon ab, wo das Bild angezeigt wird und welches Seitenverhältnis im Shop-Design verwendet wird. Als praktischer Ausgangspunkt eignen sich quadratische Produktbilder mit einer Größe von 1000 × 1000 Pixel für viele Shops gut. Das Wichtigste ist, ein einheitliches Seitenverhältnis zu verwenden, die Bilder scharf zu halten und zu große Dateien zu vermeiden.
Empfohlene Bildgrößen: Kurzübersicht
Bildtyp | Empfohlene Abmessungen | Seitenverhältnis |
Quadratisches Produktbild | 1000 × 1000 px | 1:1 |
Produktbild im Querformat | 1500 × 1000 px | 3:2 |
Breite Diashow oder Banner | 1500 × 500 px | 3:1 |
Schmale Diashow oder Banner | 1500 × 300 px | 5:1 |
Startseitenbild | Mindestens 1000 × 800 px | 5:4 |
Diese Abmessungen sind eher nützliche Anhaltspunkte als allgemeingültige Vorgaben. Ein größeres oder kleineres Bild kann genau dasselbe Seitenverhältnis haben. Beispielsweise haben sowohl 1500 × 500 Pixel als auch 3000 × 1000 Pixel das Seitenverhältnis 3:1.
Bildabmessungen und Seitenverhältnis sind nicht dasselbe
Bildabmessungen beschreiben die Anzahl der Pixel in der Datei, beispielsweise 1000 × 1000 Pixel. Das Seitenverhältnis beschreibt das Verhältnis zwischen Breite und Höhe.
1:1 ist quadratisch.
3:2 ist ein gängiges Querformat.
3:1 ist breit und eignet sich gut für Banner.
5:1 ist sehr breit und flach.
Wenn das hochgeladene Bild nicht dem im Theme ausgewählten Seitenverhältnis entspricht, wird möglicherweise ein Teil des Bildes abgeschnitten.
Verwenden Sie für alle Produktbilder dasselbe Seitenverhältnis
Produktlistings können uneinheitlich wirken, wenn die Bilder unterschiedliche Formen haben. Wählen Sie vor dem Fotografieren oder Bearbeiten der Produkte eine Bildvorlage aus und verwenden Sie diese im gesamten Katalog.
Quadratische Bilder sind für viele Produkttypen eine bewährte Wahl. Lassen Sie etwas Platz um das Produkt herum und platzieren Sie den wichtigsten Teil in der Nähe der Mitte. Dadurch verringert sich das Risiko, dass wichtige Details verloren gehen, wenn das Bild in einer anderen Ansicht oder in einem anderen Vertriebskanal zugeschnitten wird.
Welches Bildformat sollten Sie verwenden?
JPEG oder JPG: Eine gute Wahl für Fotos. Es bietet in der Regel ein gutes Gleichgewicht zwischen Bildqualität und Dateigröße.
PNG: Nützlich, wenn Transparenz erforderlich ist, allerdings sind die Dateien oft größer als JPEG-Dateien.
WebP: Kann kleinere Dateien bei gleichbleibend guter Bildqualität liefern. Prüfen Sie, ob die Plattform und das Upload-Feld dieses Format unterstützen.
SVG: Geeignet für Logos und einfache Illustrationen, normalerweise jedoch nicht für Produktfotos. Laden Sie SVG-Dateien nur aus einer vertrauenswürdigen Quelle hoch.
Produktbilder, die Kunden beim Kauf unterstützen
Gute Produktbilder sind nicht nur technisch einwandfrei. Sie sollten auch die Fragen beantworten, die ein Kunde vor dem Kauf möglicherweise hat. Je nach Produkt sollten Sie Folgendes zeigen:
das Produkt vor einem sauberen, einheitlichen Hintergrund;
das Produkt aus verschiedenen Blickwinkeln;
wichtige Materialien, Texturen und Details;
das Produkt in einer passenden Anwendungssituation; und
einen Größen- oder Maßstabsangabe, wenn die Größe schwer einzuschätzen ist.
Achten Sie darauf, dass Beleuchtung, Hintergrund, Bildausschnitt und Entfernung über die gesamte Produktpalette hinweg einheitlich sind. Ein einheitlicher visueller Stil erleichtert das Überfliegen des Katalogs und trägt dazu bei, dass das Geschäft professioneller wirkt.
Verwenden Sie beschreibende Dateinamen und Alternativtext
Geben Sie Bilddateien vor dem Hochladen aussagekräftige Namen. Beispielsweise ist „blaues-Leinenhemd-Herren.jpg “ aussagekräftiger als „IMG_4821.jpg“.
Fügen Sie einen prägnanten Alternativtext hinzu, der beschreibt, was das Bild zeigt. Alternativtext hilft Besuchern, die Bildschirmleseprogramme nutzen, und liefert Suchmaschinen nützlichen Kontext. Beschreiben Sie das Bild in natürlicher Sprache und vermeiden Sie die Wiederholung von Schlüsselwörtern. Dekorative Bilder, die keine Informationen liefern, sollten in der Regel keinen Alternativtext enthalten.
Erstellen Sie einen Online-Shop, in dem Ihre Produkte hervorstechen
Großartige Produktbilder verdienen einen Shop, der sie übersichtlich präsentiert. Mit Abicart können Sie einen professionellen Online-Shop erstellen, das Design an Ihre Marke anpassen und bei Bedarf persönliche Unterstützung erhalten.
Häufig gestellte Fragen zu Bildern im Online-Shop
Wie groß sollten Produktbilder sein?
Für viele Online-Shops sind 1000 × 1000 Pixel ein guter Ausgangspunkt für quadratische Produktbilder. Die optimale Größe hängt vom Thema, dem Detailgrad, den Kunden erkennen müssen, und der größten Darstellungsgröße des Bildes ab.
Was ist das beste Seitenverhältnis für Produktbilder?
Ein Seitenverhältnis von 1:1 (Quadrat) ist eine flexible Wahl für viele Produktkataloge. Ein Seitenverhältnis von 3:2 im Querformat eignet sich besser für breite Produkte oder Fotos, die mehr Platz in der Breite benötigen. Die Einheitlichkeit im gesamten Katalog ist wichtiger als die Wahl eines einzigen universellen Seitenverhältnisses.
Warum ist mein Bild beschnitten?
Ein Bild wird in der Regel beschnitten, wenn sein ursprüngliches Seitenverhältnis nicht mit dem im Design ausgewählten Seitenverhältnis übereinstimmt. Passen Sie die Größe des Quellbildes vor dem Hochladen an das richtige Seitenverhältnis an oder schneiden Sie es entsprechend zu.
Sollten alle Produktbilder die gleichen Abmessungen haben?
Die Verwendung einheitlicher Abmessungen und Seitenverhältnisse verleiht Produktrastern ein übersichtlicheres und einheitlicheres Erscheinungsbild. Die Bilder können Produkte unterschiedlicher Form enthalten, doch die Bildfläche sollte einheitlich bleiben.
Welches Dateiformat eignet sich am besten für Produktbilder?
JPEG ist für die meisten Produktfotos eine praktische Wahl. PNG ist nützlich, wenn Transparenz erforderlich ist. WebP kann kleinere Dateien erzeugen, sofern es von der Plattform unterstützt wird.
Beeinflussen Bildgrößen die Ladegeschwindigkeit des Shops?
Ja. Große, unkomprimierte Bilddateien können die Ladezeiten verlängern, insbesondere auf Mobilgeräten. Passen Sie die Größe der Bilder an und komprimieren Sie sie vor dem Hochladen, wobei Sie jedoch darauf achten sollten, dass die Qualität ausreichend bleibt, damit die Kunden das Produkt begutachten können.