Responsive Bilder

Gute Bilder machen Inhalte verstaendlich, Produkte vergleichbar und den Shop auf mobilen Geraeten nutzbar. Diese Anleitung hilft bei der Entscheidung, welches Bildformat fuer Startseite, Inhaltsbereich, Produktliste und Produktdetailseite sinnvoll ist und welche Kontrolle nach dem Einpflegen noetig ist.

Ziel

Bilder sollen scharf wirken, schnell laden und in jeder Ansicht den passenden Zweck erfuellen. Dabei geht es nicht nur um schoene Motive, sondern um passende Groessen, klare Reihenfolge, gute Bezeichnungen und eine Kontrolle auf mehreren Bildschirmbreiten.

• Content-Bilder sollen sich an die verfuegbare Breite anpassen.
• Produktbilder sollen in Listen, Detailansicht, Zoom und Variantenwahl funktionieren.
• Mobile Ansichten sollen ohne abgeschnittene Motive oder winzige Texte auskommen.
• Ladezeit und Bildqualitaet sollen zusammen geplant werden.

Wann diese Anleitung passt

Nutze diese Anleitung, wenn neue Bilder eingepflegt werden, wenn Startseite oder Produktseiten ueberarbeitet werden oder wenn Bilder auf dem Smartphone zu gross, unscharf, abgeschnitten oder langsam wirken.

Bildarten unterscheiden

Content-Bilder einsetzen

1. Waehle ein Bild, dessen Hauptmotiv auch bei schmaler Darstellung erkennbar bleibt.
2. Vermeide eingebrannten Text im Bild, wenn derselbe Inhalt als normaler Text besser lesbar ist.
3. Setze breite Stimmungsbilder eher fuer Einstieg und Orientierung ein.
4. Nutze kleinere Detailbilder fuer erklaerende Abschnitte, Vorteile oder Vorher-nachher-Vergleiche.
5. Pruefe die Seite auf Desktop, Tablet-Breite und Smartphone-Breite.

Produktbilder vorbereiten

Produktbilder werden im Shop in mehreren Groessen verwendet. Beim lokalen Hochladen erzeugt der Shop die benoetigten Vorschaustufen automatisch. Bei extern verlinkten Bildern muessen Original und Vorschaustufen passend gepflegt sein.

• Original: Dient fuer grosse Ansicht, Zoom und Nachbearbeitung.
• Vorschaustufe 1: Kleine Darstellung, zum Beispiel fuer kompakte Listen oder kleine Thumbs.
• Vorschaustufe 2: Mittlere Darstellung, haeufig fuer Detailbereich oder Galerie.
• Vorschaustufe 3: Groessere Darstellung, je nach Theme fuer Detailbild oder Zoom-nahe Ansicht.
• Vorschaustufe 4: Sehr kleine Kontroll- und Listenansicht im Backend.

Reihenfolge und Bezeichnung

Das erste sichtbare Produktbild ist meist der wichtigste Blickfang. Weitere Bilder sollten eine klare Geschichte erzaehlen: Hauptansicht, Detail, Anwendung, Variante, Verpackung oder Groessenvergleich.

• Bildbezeichnung: Kurz und beschreibend formulieren, da diese Bezeichnung fuer Bildtitel und Alternativtext genutzt werden kann.
• Sortierung: Hauptbild an den Anfang setzen, Detailbilder danach logisch anordnen.
• Sichtbarkeit: Nur Bilder aktiv anzeigen, die zum Produkt passen und eine ausreichende Qualitaet haben.
• Varianten: Farbe oder Ausfuehrung mit passenden Variantenbildern verbinden, damit die Auswahl im Frontend nachvollziehbar bleibt.

Pruefablauf nach dem Einpflegen

1. Produktliste oeffnen und pruefen, ob Kacheln gleichmaessig wirken.
2. Produktdetailseite oeffnen und Hauptbild, Galerie, Zoom und Variantenwechsel pruefen.
3. Startseite oder Contentseite oeffnen, falls das Bild dort eingebunden wurde.
4. Smartphone-Breite pruefen und auf abgeschnittene Motive, zu kleine Texte und lange Ladezeit achten.
5. Bei fehlenden oder alten Vorschaubildern die Vorschaustufen neu erzeugen.
6. Nach groesseren Bildaenderungen Ladezeit und mobile Ansicht erneut kontrollieren.

Entscheidungshilfe fuer bessere Bilder

• Unscharf: Original groesser oder hochwertiger bereitstellen, nicht nur eine kleine Vorschau hochskalieren.
• Zu langsam: Bildabmessung, Dateigroesse und Anzahl der Bilder reduzieren.
• Abgeschnitten: Motiv mit mehr Rand oder anderem Seitenverhaeltnis waehlen.
• Uneinheitliche Liste: Produktbilder mit gleicher Perspektive und aehnlichem Hintergrund verwenden.
• Schwache Produktdetailseite: Mehrere Detail- und Anwendungsbilder ergaenzen.
• Unklare Variante: Variantenbilder fuer Farbe, Groesse oder Ausfuehrung nachpflegen.

Stolperfallen

• Ein Bild sieht auf dem Desktop gut aus, verliert aber auf dem Smartphone das Hauptmotiv.
• Produktbilder haben unterschiedliche Hintergruende, wodurch Listen unruhig wirken.
• Externe Bilder werden genutzt, aber einzelne Vorschaustufen fehlen.
• Bildbezeichnungen bleiben leer oder sind nicht beschreibend.
• Nach dem Austausch eines Bildes werden alte Vorschaustufen nicht erneuert.
• Startseite und Produktdetailseite werden geprueft, aber Produktliste und mobile Ansicht nicht.

Verwandte Bereiche

• Startseite sinnvoll gestalten: Fuer Hero-Bilder, Teaser und visuelle Einstiegspunkte.
• Produktlisten verbessern: Fuer gleichmaessige Kacheln, Filterwirkung und schnelle Vergleichbarkeit.
• Produktdetailseite verkaufsstark gestalten: Fuer Galerie, Zoom, Varianten und Kaufentscheidung.
• Mobile Ansicht pruefen: Fuer Kontrolle auf kleinen Bildschirmen.
• Schnelle Ladezeit erreichen: Fuer Bildgroessen, Cache und Performance-Kontrolle.