Generelle Vorbereitungen vor Einsatz von Bildern

Deutsches Forum
,
#1

Als ich vor 10 Jahren meinen aktuellen Oxid Shop erstellt habe, habe ich mir wenig bis keine Gedanken zu Einstellungen von Bildern gemacht, “bevor” ich angefangen habe, die in Oxid zu integrieren.

Das Ergebnis war, dass beispielweise die Thumbnails unter dem Hauptartikelbild unterschiedlich groß waren. Selbstverständlich hätte ich das vermeiden können, wenn alle hochgeladenen Bilder immer gleich groß gewesen wären, oder zumindest das Seitenverhältnis gestimmt hätte.

Dennoch die Frage:
Gibt es generelle Überlegungen zu Bildern, die man vorher anstellen sollte, auch wenn Sie im Nachhinein noch geändert werden können? Ich finde dazu recht wenig Infos im Forum.

Würde mich über ein paar Tipps freuen. Sie müssen sich auch nicht zwingend auf Thumbnails beziehen.

Wünsche einen angenehmen Sonntag.
( Heute Abend : Daytona 500 )

#2

Zwei allgemeine Punkte fallen mir spontan ein:

  1. Ausgangsbilder sollten hochauflösend sein, damit die Zoom Bilder auch einen wirklichen Mehrwert hätten, schließlich spielt Optik beim online Shopping bei den meisten Produkten eine wichtige Rolle.

  2. Optimierung bzw. Kompression der Bilder.
    Der Shop erzeugt zwar selbst die Thumbnails und Icons in den passenden Auflösungen, aber diese fallen recht groß aus und können für schnellere Ladezeiten (zu große Bilder haben eine negative Auswirkung auf SEO) optimiert werden. https://tinypng.com/

Was das Zusammenspiel zwischen dem Theme und den Bildern angeht, gäbe es da:

  1. einheitliche Form: wenn das Theme auf quadratische Bilder ausgelegt ist, würden die Bilder bestenfalls so skaliert werden, damit die längste Seite in den vorhergesehenen quadratischen Platz passt, wodurch die Bilder insgesamt kleiner werden und die Produkte u.U. nicht mehr so gut erkennbar sind.

    image
    image778×327 58.5 KB

    Schlimmstenfalls hast du aber ungleich große Elemente auf der Seite, wodurch sich das Layout ungleichmäßig verschiebt. Meistens passiert das in irgendwelchen Slidern, wo Produktbilder automatisch durchgeblöttert werden, einige dieser Slider haben ein Feature, sich an die Größe der Bilder anzupassen. (guck dir mal “adaptive Height” Demo hier: slick - the last carousel you'll ever need, ist mega nervig wenn dir Pfeile ständig unter dem Mauszeiger wegspringen)

  2. Hintergrund: Bilder mit weißen Hintergrund sehen auf Seiten mit dunklem Hintergrund doof aus.

    image
    image930×542 109 KB

  3. mittlerweile gewinnen resposnive Bilder und neue Formate wie webp immer mehr an Popularität. Out of the Box gibt OXID das zwar nicht her, aber es gibt Module und Anleitungen dafür und den Punkt könnte man im Hinterkopf behalten, wenn der Shop viele Bilder hat und Google sich zu sehr über Bildergrößen beschwert.

1 Like
#3

Grundsätzlich mal festlegen, wie gross die Bilder im Layout normaler Webansicht sein sollen, z.B. Seitenverhältnis. Dann kann man

  1. Die kleineren Bilder aus dem Masterbild generieren
  2. Die erzeugten Bilder in z.B. WEBP zusätzlich ablegen
  3. Im Theme einen srcset ausliefern.

Ergebnis sind zwar viele Dateien, aber immer für die entsprechenden Viewports (Desktop, Mobilphone, Tablets, …) passende Bilder.

Die OXID eigene Funktion zur Bilderzeugung schaltet man dann aus.

Gruss
Marcel

2 Likes