Neu Darstellung von Bildern im Nova und Boxed Layout

[Thomas]

Wir nutzen den jtl- shop seit über 10 Jahren beginnend über shop 2 und dann den shop 3.

Unsere Bilder sind in der max. Größe 250x250 px angelegt. Hierfür gibt es diverse Gründe wie z.B.Schnelligkeit in ländlichen Bereichen usw.

Dieses ließ sich auch bei der Umstellung auf shop 4 mit dem Evo-Template noch ohne Probleme nutzen.

Ein Grund hierfür ist die Einstellung im Template-Layout "Boxed Layout" und funktionierende Bildgrößeneinstellungen im backend.

Bedauerlicherweise findet man diese Einstellung für "Boxed Layout" im aktuellen Nova-Layout nicht mehr.
Ausserdem ist jegliche Bildgrößen-Einstellung im backend ohne Funktion.( Ticket wurde vom shop-support heute eröffnet.)

Ausserdem wird das von jtl "mit Herz" erstellte Template nicht mehr weiter verfolgt.

Ich empfinde es daher als sehr kundenunfreundlich, wenn mit jeder shop-Umstellung langjährig in der Wawi gepflegte Daten plötzlich hinfällig werden,

und diese nicht mehr in das Konzept eines neuen Templates passen.

Zumindest sollten alte Funktion wie das "Boxed Layout" nicht einfach verschwinden.

 

[fibergirl]

Das Problem mit den Bildern in NOVA haben wir auch, wir verwenden ebenfalls max. 250x250px große Bilder.
Da muss leider einiges angepasst werden.

JTL hat das glaube ich nicht auf dem Zettel, weil sie den Online- Shop sehr visuell orientiert sehen.
Aber nicht jeder verkauft emotional und "übers Auge".

Wir haben z.B. technische Produkte, da gibt es keinen visuell getriggerten "habenwill"-Reflex. Die Bilder sind nur für eine schnelle Sichtüberprüfung, dass man das Richtige bestellt, und, weil es eben üblich ist (und Google etwas zum Anzeigen braucht).

 

[Thomas]

Besser hätte ich es nicht formulieren können.
Unsere Bilder sind informativ um das Teil schneller identifizieren zu können. Da spielt "Schönheit" nicht die Rolle.

Daher bitte ich jtl in diesem Bereich nochmals nachzubessern.

Wenn man in der header.tpl container bei main id="main-wrapper" einsetzt, siehr es schon besser aus, allerdings löst es das Problem mit den Bildgrößen noch nicht.

 

[JulianG]

Unsere Bilder sind in der max. Größe 250x250 px angelegt. Hierfür gibt es diverse Gründe wie z.B.Schnelligkeit in ländlichen Bereichen usw.

Das ist mit dem Nova Template so eigentlich nicht mehr "notwendig", auch nicht mit Rücksicht auf schlechte mobile Verbindungen. Hier kommt lazyloading zum Einsatz. Wenn auf einem Display nur x-Pixel bereit stehen, wird auch nicht das große lg-Bild geladen, selbst wenn man das Bild antippt, sondern das nächst-beste. Von meinem 1920x1080 FullHD Bild wird auf dem Handy nur die 36KB Variante geladen.

Das Nova Template benötigt dennoch gewissen Platz für die Bilder, das ist richtig. In einem eurer Testshops hab ich jetzt gesehen, dass die Bilder unscharf sind. Ist dass das Problem? Wenn nicht, könnt ihr bitte einmal mit bunten Bildern zeigen was gemeint ist?

Bzgl. den unscharfen Bildern: Ich denke ihr müsst umdenken vom Shop4 aus - wegen lazyloading - NICHT mehr die Bildgrößen in den Einstellungen auf 250x250 begrenzen, sondern selbst mit nur 250x250 Großen Bildern eine heutzutage moderne "groß"-Pixelgröße einstellen. Bei mir sieht das mit einem 160x119 Original-Bild dann so (und scharf) aus:



Oder gehts hier dann um den vielen Platz drumherum?

 

[Thomas]

Guten Morgen Julian,

es geht um die unscharfe Darstellung, da der Shop die Bilder in der Detailansicht größer darstellt.
Die 250x250 Bilder sind unscharf. siehe screenshot.

Eine Nutzung des Templates ist so nicht möglich und die Bilder sämtlich neu zu erstellen, ist unmöglich.

 

[JulianG]

Okay, ich denke das liegt an dem was ich geschrieben habe. Stell bitte mal testweise die Bildeinstellung wie folgt ein:


Bei Containergröße würde ich 'Nein' empfehlen, sonst werden die Bilder größer als du sie haben willst.

EDIT. Klein und Normal können auch standard bleiben (130x130 bzw. 320x320), wichtig ist Gross.

 

[Thomas]

Habe die Einstellungen übernommen.
In der Artikel-Detailansicht werden die Bilder jetzt "scharf" dargestellt.

In der Artikel-Übersicht kommt es aber zu fehlerhaften Darstellungen.
Wenn ich für die Darstellung "Artikel klein" 250x250 wähle, wird eine passende Größe als auch "Schärfe" erzeugt.
Zum Test habe ich 70x70 und 500x500 eingegeben. Dann wird das Bild viel zu klein angezeigt. Das Ergebnis ist für die beiden Einstellungen komischerweise die gleich zu kleine Größe.

Das Ganze ist doch schon sehr verwirrend.

 

[JulianG]

Da müsst ihr mit euren besonderen Bedinungen evtl. etwas rumspielen um die optimalen Settings zu finden. Das Thema ist wie gesagt hier "lazyloading".

Technisch gibt es da zwei Dinge zu beachten:
1. Das Template benutzt gewisse Pixelmaße fest vorgeschrieben für jede Fenstergröße, damit es auch zu allen anderen Elementen passt; unabhängig davon wieviel Bild zur Verfügung steht.
2. LazyLoading versucht immer das beste Bild für den User mit seiner Fenstergröße zu laden.

Nehmen wir "1920x1080" Fenstergröße - Es stehen z.B. in den Artikeldetails 500x500 Pixel und in Artikellisten 300x300 Pixel zu Verfügung. In den Artikeldetails wird nun nicht fest das "Gross" Bild angezeigt, sondern es wird geprüft; wenn die "Normal"-Größe des Bildes bereits mindestens 500x500 Pixel groß ist, dann ist das auch die beste Version für die Anzeige. Wenn aber "normal" nur "250x250" Pixel hat, dann weicht er aus auf die "Gross"-Variante. Wenn diese nun auch nur 250x250 Pixel hat, dann bleibt nichts anderes übrig und es wird unscharf.
In der Artikelliste hingegen steht weniger Platz zur Verfügung. Wäre "Normal" also nun 500x500 Pixel groß und "Klein" 200x200 Pixel, würde auch in der Liste die "Normal"-Variante geladen werden, da 300x300 befüllt werden muss.
Wichtig dabei zu beachten ist, dass die "Sollgröße" sich verändert, je nachdem wie groß das Browserfenster ist.

Wenn ihr nun als "Gross" 250x250 Pixel angebt, ist das schon kleiner als im Standardfall für "Normal" üblich ist und überall wo mehr Pixel benötigt werden wird es unscharf.

Unterm Strich heisst das:
Die Bildgröße "Gross" muss von den Einstellungen her knapp(!) größer sein (Die 1920x1080 waren nur zum Test), als für der im Nova reservierte Platz für alle gängigen Fenstergrößen benötigt (Artikeldetails; für die Zoom-Ansicht würde noch mehr natürlich Sinn ergeben, aber wenn ihr keine Bilder mit entsprechender Qualität habt ist die Funktion dann leider sinnfrei, da kann man auch nichts dran machen). Für einen 1440p Screen maximiert wären das, wenn ich mich nicht irre, also mindestens 594×594 Pixel (Für 4k kann ich es euch leider nicht sagen).
Die anderen Bildgrößen sollten sich passend abstufen,

Das bei so kleinen Bildern dann die weisse Fläche dominiert, lässt sich wohl leider nicht ändern. Schärfe ist das einzige was ihr erreichen könnt. Die Differenz zwischen 594x395 und 250x250 Pixel lässt sich leider nicht herzaubern. Das wirkt sich dann natürlich auch auf die Listenansicht aus, aber bei meinem 160x119 Originalbild finde ich das vielleicht nicht schön, aber gemessen an den viel zu kleinen Originalbildern, durchaus vertretbar:


Das ist wohl vermutlich leider nur mit technisch sehr hohem Aufwand leicht verbesserbar, wenn die kleineren Bildgrößen nicht mehr von "gross" abstammen, sondern auch vom Originalbild. Das ist nur leider ein Problem, dass sehr wenige haben, da die meisten wohl doch sowohl ihren Kunden detailreiche, als auch für Suchmaschinen "gern gesehene" Bildgrößen (in der Zoom-Ansicht) liefern wollen.
Im Bezug auf schlechte mobile Verbindungen ist das eigentlich auch kein Thema, da die "gross"-Bildvariante wohl jedem mit einer schlechten Verbindung ohnehin als nicht nutzbar klar sein sollte und man wartet ggf. bis man wieder WLAN hat (ist bei Amazon und Ebay ja auch nicht anders). Die anderen Bildvarianten, die tatsächlich für den "Fluss" im Shop wichtig sind, können ja deutlich kleiner dargestellt werden (und das auch schon im Shop4). Ich würde mir an eurer Stelle also vielleicht doch nochmal Gedanken darüber machen, ob ihr nicht doch wenigstens für die größte Bildgröße vernünftige pixelreiche Bilder organisiert. Die weisse Fläche verschwindet dann in den Artikeldetails und Listenansichten und die Dateigrößen in diesen dürften nicht wirklich viel größer werden.

 

[Thomas]

Hallo Julian,

vielen Dank für die Info.

Da unsere Bilder sämtlich von uns in den letzten 11 Jahren selber erstellt wurden, werden wir diese nicht erneuern können.
Dieses ist für technische Abbildungen auch nicht notwendig.

Daher eine unbefriedigende Lösung.

 

[mona]

Gut erklärt, danke Julian.....trotzdem sehr schwierig einzustellen...

Nova Shop 5.1 - Artikeldetails - Bilder werden mir nun "normal" gross angezeigt mit Einstellung klein 130 mittel 600 gross 1000, (vorher 130, 320, 1000 waren sie in der Galerieansicht grösser als in der Detailansicht)
wenn ich jedoch das Bild zoome und wieder schliesse, habe ich nachher das Artikelbild kleiner als vorher, da nützt die richtig gefundene Bildgrösse auch nichts mehr....

Was kann ich machen?
Danke & Gruss
mona

 

[Stonekeeper]

@JulianG bin mir nicht sicher ob ich es richtig verstanden habe es ist auch schon spät geworden.
Mein Problem ist gerade nicht die Bildqualität sondern tatsächlich angezeigte Größe.

Obwohl 40 / 200 / 400 / 600 eingestellt ist, nimm das Artikeldetailbild sich den gesamten Platz der verfügbar ist.
Bei 40 / 200 / 400 / 800 wird das Artikelbild plötzlich kleiner ? bei zoom wieder Full, klickt man Zoom weg, ist das vorherige kleiner gewordene Bild wieder größer ???.
Bei Reload wechselt er dann ab und zu lustig umher.

Cache gelöscht, verschiedene Browser und Geräte.

Ich möchte den weißen "Rand" haben und in den Artikeldetails das Bild auf Desktop ob 1080p oder 4k begrenzen.
Bei Shop 4 hatte ich 40 / 300 / 500 / 600 wunderbar, das Detailbild nicht zu groß und den Zoom nicht so gigantisch.

Please Help

PS: meine Bilder in der WAWI haben 800 x 800