Produktgrafik: Format und Beschnitt im Shop

Jedem Produkt kannst du eine eigene Grafik mitgeben. Sie erscheint im Shop als schräg angeschnittene Fläche rechts auf der Produktkachel — und wird dort systematisch beschnitten. Dieser Artikel nennt das passende Format, die tatsächliche Anzeigefläche und den Bereich, der garantiert sichtbar bleibt. Du kannst ihn deinen Designer:innen unverändert weitergeben.

Die Kurzspezifikation

Wenn du nur die Zahlen für eine Beauftragung brauchst, reichen diese fünf Zeilen:

Damit hast du alles, was für eine Beauftragung genügt — die Begründung dahinter steht in den folgenden Abschnitten.

Wo die Grafik erscheint

Die Datei wird an zwei Stellen im Kaufprozess verwendet. Beide zeigen einen Ausschnitt, keine zeigt das vollständige Bild.

1. Produktkachel im Shop. Die Bildfläche liegt rechts neben Titel, Beschreibung und Preis. Sie ist 250 px breit und so hoch wie die Kachel: mindestens 250 px, bei längeren Produktbeschreibungen mehr. Alle Kacheln einer Zeile werden auf die Höhe der höchsten angeglichen — die Bildfläche ist also nicht fest, sondern je nach Produkttexten etwa 250 bis 400 px hoch. Genau daraus entsteht der variable Beschnitt.

2. Hintergrund im Personalisierungsschritt. Nach der Auswahl erscheint dieselbe Grafik großflächig hinter den Eingabefeldern: horizontal gespiegelt, auf 30 % Deckkraft abgedunkelt und leicht weichgezeichnet. Auf Mobilgeräten läuft sie dort über die volle Kachelbreite.

Damit weißt du, dass eine Grafik zweimal funktionieren muss: als Blickfang auf der Kachel und als ruhiger Hintergrund im zweiten Schritt.

Was genau beschnitten wird

Zwei voneinander unabhängige Effekte greifen nacheinander. Beide sind fest im Shop-Layout verankert und lassen sich pro Produkt nicht abschalten.

Effekt 1: Füllen und Beschneiden

Das Bild wird proportional so weit vergrößert, dass es die Fläche vollständig füllt; was übersteht, fällt weg. Horizontal ist die Verteilung bewusst unsymmetrisch: 30 % des Überstands entfallen links, 70 % rechts. Vertikaler Überstand wird gleichmäßig verteilt, oben und unten je 50 %.

Effekt 2: Der Diagonalschnitt

Über die Fläche läuft der Ticket-Abriss. Weggeschnitten wird das Dreieck von der Oberkante bei 26 % der Breite hinab zur linken unteren Ecke — rund 13 % der Fläche, vollständig oben links.

Wie viel bei welcher Kachelhöhe wegfällt

Bei quadratischer Vorlage ergibt sich daraus:

Bei 250 px Kachelhöhe schneidet der erste Effekt gar nichts weg — dann wirkt nur die Diagonale. Kürzere Produktbeschreibungen bedeuten also flachere Kacheln und weniger Beschnitt. Verlassen kann man sich darauf allerdings nicht, weil die Texte redaktionell gepflegt werden und eine einzige lange Beschreibung die ganze Zeile höher macht.

Damit ist erklärt, warum ein Motiv am Rand verschwinden kann, obwohl das Bild vollständig hochgeladen wurde.

Die Safe Zone für das Hauptmotiv

Alle Maße beziehen sich auf eine Arbeitsfläche von 1000 × 1000 px. Die Atmosphäre des Bildes — Hintergrund, Textur, Farbverlauf — darf und soll die ganze Fläche füllen. Nur was erkennbar bleiben muss, gehört in die Safe Zone.

Das ergibt eine Safe Zone von 480 × 600 px mit dem Mittelpunkt bei x = 490, y = 500 — also einen Hauch links der Bildmitte. Der Diagonalschnitt drängt das Motiv nach rechts, der 70-%-Beschnitt an der rechten Kante drängt es zurück nach links.

Die Maße sind für den ungünstigsten Fall gerechnet — eine 400 px hohe Kachel — und halten auch im gespiegelten Hintergrund des Personalisierungsschritts, wo oben und unten je rund 17 % wegfallen. Damit hast du einen Bereich, auf den sich deine Designer:innen verlassen können.

Was gut funktioniert und was nicht

Empfohlen:

• Ein einzelnes, klar erkennbares Motiv, zentriert in der Safe Zone.
• Ruhige, flächige Hintergründe — sie überleben jeden Beschnitt unverändert.
• Motive, die auch als 250 px breiter Ausschnitt noch lesbar sind: großzügige Formen statt feiner Details.
• Mittlere bis dunkle Bildtöne. Die Kachel selbst ist weiß, die Fläche setzt sich dann sauber ab.
• Eine Bildsprache, die über alle Produkte hinweg zusammenpasst — die Kacheln stehen im Shop direkt nebeneinander.

Vermeiden:

• Schrift, Wortmarken, Zahlen, Preise oder Datumsangaben im Bild.
• Logos oder Symbole an den Bildrändern oder in einer Ecke.
• Landschaftsformate, Panoramen und Hochformate — sie verlieren bis zu 53 % der Breite.
• Gruppenbilder oder Collagen: bei 250 px Breite ist davon nichts erkennbar.
• Weiße oder sehr helle Flächen an den Kanten — sie verschmelzen mit der weißen Kachel.
• Wichtige Bildinhalte in der rechten unteren Ecke: dort liegt die Mengen-Auswahl über dem Bild.

Damit passen die Kacheln auch dann zusammen, wenn mehrere Produkte nebeneinander im Shop stehen.

Beispielspezifikationen für die Übergabe der Dateien

Diese Angaben können für eine Beauftragung übernommen werden. Sie liefern eine schlanke Datei, die die Webseite nicht belastet und den Webshop weiterhin schnell laden lässt. Pro Produkt eine Datei:

Damit ist die Datei so vorbereitet, dass du sie ohne Nachbearbeitung beim Produkt hinterlegen kannst.

Technische Werte zum Nachbauen

Falls der Ausschnitt in einem Layoutprogramm oder Prototyp nachgebaut werden soll — diese Werte sind im Shop-Layout fest gesetzt und pro Produkt nicht änderbar:

• Anzeigefläche: 250 px breit × Kachelhöhe (mindestens 250 px, innerhalb der Zeile angeglichen)
• background-size: cover     
• background-position: 30% 50%      — daraus folgt der 30/70-Beschnitt in der Breite
• clip-path: polygon(26% 0, 100% 0, 100% 100%, 0% 100%)      — der Diagonalschnitt
• Zweite Platzierung: 300 px breit, background-position: 0% 50%     , transform: scaleX(-1)     , opacity: 0.3     

Damit lässt sich der Ausschnitt exakt simulieren, bevor die erste Datei hochgeladen wird.