Der Zoom auf Produktbilder gehört zu den wenigen Funktionen, deren Fehlen sofort auffällt. Wer eine Textur, eine Verarbeitung oder eine Beschriftung prüfen will und nicht vergrößern kann, geht davon aus, dass etwas verborgen wird.
Die Ausgangsauflösung als Voraussetzung
Keine Zoomfunktion kann Details erzeugen, die in der Datei nicht vorhanden sind. Das ist die erste Prüfung, und sie erledigt das Vorhaben oft, bevor es beginnt.
Die Regel: Ihr Ausgangsbild muss zwei- bis dreimal so groß sein wie die maximale Anzeigegröße. Zeigt Ihre Galerie das Bild mit 600 Pixel Breite, sollte die Quelle zwischen 1200 und 1800 Pixel haben. Für bequemes Zoomen auf Details sind 2000 Pixel an der langen Seite ein guter Zielwert.
Eine schnelle Kontrolle: öffnen Sie ein Produktbild in einem neuen Tab und sehen Sie sich seine tatsächliche Größe an. In vielen Shops wurden die Bilder beim Import verkleinert und enden bei 800 Pixeln, womit jeder sinnvolle Zoom ausfällt.
Wichtig: ein 800-Pixel-Bild per Software hochzurechnen liefert kein Detail zurück. Das Ergebnis wirkt unscharf und bewirkt das Gegenteil des Gewünschten. Sind Ihre Quellen zu klein, beginnt die Arbeit bei der Fotografie, nicht beim Modul.
Die drei Verhaltensweisen
Die Lupe beim Überfahren. Ein Zoomfeld folgt dem Cursor, die Vergrößerung erscheint daneben oder darüber. Klassisches Desktop-Verhalten, wirksam für die schnelle Prüfung einer Stelle.
Vollbild beim Klick. Das Bild öffnet sich als Überlagerung, mit Navigation zwischen den Aufnahmen und der Möglichkeit, weiter zu vergrößern. Das ist die vollständigste und universellste Variante.
Die Zwei-Finger-Geste am Smartphone. Die natürliche Geste auf dem Touchscreen. Sie muss innerhalb der Vollbildansicht funktionieren, nie auf der gesamten Seite.
Die Kombination, die funktioniert: Lupe beim Überfahren am Desktop, Vollbild beim Klick auf beiden Formaten, Zwei-Finger-Zoom innerhalb des Vollbilds.
PrestaShop Produktgalerie — HD-Zoom, Vollbild & VariantenfilterProduktgalerie der nächsten Generation: HD-Zoom, vertikale Vorschaubilder, mobiles Vollbild mit Pinch und Bildfilterung nach Variante.69,00€
Der kritische Punkt am Smartphone
Das ist der häufigste und schädlichste Umsetzungsfehler.
Erfasst die Zoomkomponente Touch-Gesten auf der im Seitenfluss dargestellten Galerie, gerät sie in Konflikt mit dem Scrollen: wer die Seite scrollen will, bleibt am Bild hängen.
Das richtige Verhalten: im Seitenfluss wird die Galerie durch horizontales Wischen durchblättert, das vertikale Scrollen bleibt frei. Der Zoom aktiviert sich erst nach dem ausdrücklichen Öffnen des Vollbilds, durch Tippen auf das Bild oder auf ein eigenes Symbol.
Zweiter Punkt: das Schließen des Vollbilds muss offensichtlich sein, mit sichtbarem Kreuz und der Wischgeste nach unten, die zum Standard geworden ist.
Das verzögerte Laden der hochauflösenden Datei
Ein 2000-Pixel-Bild auf jeder Produktseite für einen Besucher zu laden, der nie zoomen wird, verschwendet Bandbreite und verschlechtert Ihre Leistungskennzahlen.
Die richtige Architektur beruht auf zwei Dateien je Aufnahme. Eine Anzeigeversion, auf die Galerie zugeschnitten, sofort geladen. Und eine hochauflösende Version, die erst beim Auslösen des Zooms geladen wird.
Zwei Vorsichtsmaßnahmen bei der Umsetzung. Sehen Sie einen Ladeindikator vor, während die hochauflösende Version lädt: bei langsamer Verbindung wirken zwei Sekunden ohne Rückmeldung so, als geschehe nichts. Und laden Sie das nächste Bild vor, wenn der Besucher im Vollbild ist, damit die Navigation flüssig bleibt.
Gewicht und Format
Ein 2000-Pixel-JPEG in maximaler Qualität kann mehrere Megabyte wiegen. Drei Hebel bringen es auf eine vernünftige Größe.
Moderne Formate, WebP und AVIF, senken das Gewicht bei gleicher wahrgenommener Qualität um 30 bis 50 %. Sehen Sie einen JPEG-Rückfall für ältere Browser vor.
Die Kompressionsqualität um 80 bis 85 %, wo der sichtbare Unterschied verschwindet, das Gewicht aber deutlich fällt.
Die Verkleinerung an der Quelle: ein 6000-Pixel-Foto aus einer Profikamera bringt online nichts. Deckeln Sie beim Import auf 2000 oder 2500 Pixel.
Was man nicht tun sollte
Zoom auf einem zu kleinen Bild. Besser gar kein Zoom als eine verpixelte Vergrößerung. Sehen Sie eine Prüfung vor: reicht die Auflösung nicht, aktiviert sich der Zoom nicht.
Zoom, der den Kaufbutton verdeckt. Am Desktop überdeckt eine rechts vom Bild eingeblendete Lupe oft die Spalte mit Preis und Warenkorb-Button. Der Zoom gehört in den Bildbereich oder in eine modale Überlagerung.
Deaktivierter Rechtsklick. Manche Module sperren den Rechtsklick, um Bilder zu schützen. Das hindert niemanden am Herunterladen, stört legitime Nutzungen und schadet der Barrierefreiheit.
Der Fall der Detailaufnahmen
In manchen Katalogen reicht der Zoom nicht, und ein eigenes Foto wirkt besser.
Eine Nahaufnahme der Naht an einem Kleidungsstück, der Anschlüsse an einem Gerät oder der Struktur eines Materials bringt mehr als die Vergrößerung einer Gesamtaufnahme, weil sie für genau dieses Detail gerahmt und ausgeleuchtet wurde.
Der Anhaltspunkt: stellen Ihre Kunden regelmäßig dieselbe Frage zu einem Detail, fügen Sie ein Foto hinzu, statt zu hoffen, der Zoom beantworte sie.
Das Modul Produktgalerie für PrestaShop deckt diese Kette auf PrestaShop 8 und 9 ab: hochauflösender Zoom mit verzögertem Laden der Vergrößerung, Vollbildverhalten für Touch ohne Konflikt mit dem Scrollen und automatische Abschaltung des Zooms, wenn die Ausgangsauflösung nicht reicht.