Einkaufswelt Banner verzerrt dargestellt

Hallo,

verstehe ich es richtig, dass Du die Bilder im Medien-Manager immer genau in der Größe hochlädst in der sie angezeigt werden sollen?
Das wäre dann nämlich eine falsche Denkweise. Dafür sind nämlich die Thumbnails da. Shopware generiert diese Größen automatisch.
Man läd also nur eine Version seines Bildes hoch, nämlich das in der größt möglichen Auflösung. Die anderen Größen generiert dann das System.
Wenn das hochgeladene Bild zu klein für bestimmte Thumbnail-Größen ist, dann werden dafür auch keine angelegt, sondern stattdessen das Original-Bild verwendet. Sollte dieses kleiner sein, als die eigentliche Anzeige im Frontend, wird es entsprechend gestreckt -> wird also verschwommen.

=> Einfach immer nur eine Version des Bildes hochladen, und zwar in der best möglichen Größe und Qualität. Den Rest übernimmt das System.

PS: Es macht außerdem keinen Sinn in einem responsive Layout feste Pixel-Maße zu berechnen. Die Breiten der Elemente sind “fluide” und verändern Ihre Größe je nach Bildschirmgröße. Shopware wählt hier automatisch passende Versionen des Bildes.

LG,
Phil

@Philipp Schuch schrieb:
PS: Es mach außerdem keinen Sinn in einem responsive Layout feste Pixel-Maße zu berechnen. Die Breiten der Elemente sind „fluide“ und verändern Ihre Größe je nach Bildschirmgröße. Shopware wählt hier automatisch passende Versionen des Bildes.

LG,
Phil

die Frage ist wie Shopware die passende Version auswählt? 

Hallo,

das lassen wir quasi vom Browser entscheiden. Dazu verwenden wir das Picture-Element. Wir teilen dem Browser mit in welchen Größen das Bild zur Verfügung steht. Der Browser berechnet dann wie groß das Element in der aktuellen Ansicht ist, und lädt dann eines der angegebenen Bilder welches von der Breite her ausreicht.

LG,
Phil

@Philipp Schuch schrieb:

Hallo,

das lassen wir quasi vom Browser entscheiden. Dazu verwenden wir das Picture-Element. Wir teilen dem Browser mit in welchen Größen das Bild zur Verfügung steht. Der Browser berechnet dann wie groß das Element in der aktuellen Ansicht ist, und lädt dann eines der angegebenen Bilder welches von der Breite her ausreicht.

LG,
Phil

ja genau, aber wie entscheidet der Browser? Anhand der Breite, das ist das Problem bei Portrait-Bildern.

Hallo,

wie schon bereits beschrieben. :slight_smile:
Der Browser weiß ja wie groß das Element dargestellt wird und wir teilen ihm mit welche Bild-Größen zur Verfügung stehen.

Ein Beispiel: Wir geben die Thumbnail-Größen 200x200 , 600x600 , 1280x1280 an den Browser. Das dargestellte Element ist z.B. vielleicht 540 Pixel breit. Der Browser wählt also das kleinst mögliche Bild, welches diese Breite abdecken kann. In diesem Fall das 600x600 Thumbnail.

LG,
Phil

@Philipp Schuch schrieb:

Hallo,

wie schon bereits beschrieben. :)
Der Browser weiß ja wie groß das Element dargestellt wird und wir teilen ihm mit welche Bild-Größen zur Verfügung stehen.

Ein Beispiel: Wir geben die Thumbnail-Größen 200x200 , 600x600 , 1280x1280 an den Browser. Das dargestellte Element ist z.B. vielleicht 540 Pixel breit. Der Browser wählt also das kleinst mögliche Bild, welches diese Breite abdecken kann. In diesem Fall das 600x600 Thumbnail.

LG,
Phil

ja genau und dann kann es passieren, dass der Browser 200x200 statt 600x600 bei Hochkantbildern nimmt und zieht sie hoch.

Hallo,

das stimmt, in einem Browser werden die meisten Layout-Berechnungen anhand der Breite der Elemente durchgeführt. Die Höhe entsteht meist nur aus dem Verhältnis von Breite und Inhalte des Elementes. Für Hochkantformate funktioniert das leider nicht so gut.

LG,
Phil

Hallo,

ich habe momentan auch dieses Problem. Nun sehen die Bilder nicht verschwommen aus, wenn ich eine sehr große Auflösung verwende.

Das Problem ist aber, das ich um die Bilder einen Rahmen legen möchte - dieser wurde dann abgeschnitten. Aus diesem Grund habe ich die Maße per Screenshot abgemessen und mit diesen Angaben die Bilder erstellt. Das hatte zur Folge, dass sie verschwommen aussehen?!

So, kann das Ganze jetzt auch mal für Blöde erklärt werden.

Ich mein, die Einkaufswelten sind ja extra für Blöde gemacht worden. Eine vernünftige Agentur wird sich wohl kaum ernsthaft mit so was wie den Einkaufswelten rumschlagen.

Es kann doch nicht sein, dass man ein Bild als Banner verwenden möchte und sich stundenlang durch irgendwelche Foren klicken muss, um später doch keine Lösung zu haben.

 

So, bei mir betraf es Bilddateien, die mehr als 1280pix Höhe hatten. Ich habe die Bilddatei gesliced und maximal 1280pix große Bilder draus erstellt und die einzeln als Banner eingebunden.

Eigentlich sollte es eine andere Lösung geben, die weniger Arbeit macht.

 

1 Like