Hallo Allerseits,
bei einem neuen Projekt habe ich große Probleme mit unscharfen Banner-Bildern und hoffe einer von euch weiß Rat:
Ich speicher die Bildr in der Größe 866px X 566px bei 72dpi als .jpg und lade diese anschließend über die Einkaufswelt “Startseite” hoch.
Nach dem hochladen ist die Schrift in dem Bild sehr unscharf: www.lt3.de
Habe bereits mit den Bildformaten experimentiert (png 8 / png etc.) und auch mit der Bildgröße - werde nicht so schlau aus der Nummer.
Liebe Grüße
Philipp
Ich habe weiter analysiert und bin weiterhin ratlos:
Das Bild wird in Originalgröße auf dem Server gespeichert, und auch in Originalgröße an den Browsers des Kunden geschickt… aber da um den Faktor 2.5 geschrumpft und dann wieder vergrößert - daher wird es unscharf.
Soll Ich nun Banner in wahnwitzigen Größen erstellen, damit Shopware meine Banner schrumpfen und wieder vergrößern kann?
Soll Ich nun Banner in wahnwitzigen Größen erstellen, damit Shopware meine Banner schrumpfen und wieder vergrößern kann?
Ja. Zusätzlich kannst du noch die Kompressionsqualität anpassen oder eine eigene EKW bauen die nicht so ****** ist wie die von Shopware oder mit jQuery versuchen zu retten was eigentlich nicht zu retten ist. Einige meiner Kunden gehen dazu über nur 1 riesiges EKW Banner für eine Seite zu bauen und simulieren in Photoshop Trennlinien. Ich kann ja mal raussuchen welche Größe das Banner hat.
Gruss
[EDIT] Schau mal, dass deine Bilder durch 8 teilbar sind und dabei keine Kommazahl herauskommt. Hilft auch manchmal.
z.B. 866px / 8 = 108,25 = doof
z.B. 872px / 8 = 109 = besser
Fahrplan ins Nirgendwo:
Noch immer alles unscharf.
O-Ton von den Programmieren: „Hä das ist Shopware, das ist halt immer unscharf“ - damit möchte Ich mich nicht zufrieden geben!
Kannst du mir nochmal die Bannergröße nennen die deine Kunden verwenden?
Müsste 1140px sein, bin mir gerade unsicher, weil bei jedem zusätzlich die CSS angepasst ist.
Welche Shopware-Version setzt du denn ein?
An der Usability der Einkaufswelten wurde ja mit Shopware 5.2 so einiges getan. Du solltest auf jeden Fall sicherstellen, dass du die aktuelle Shopware-Version einsetzt.
Du solltest sowieso jedes Bild in doppelter Größe hinterlegen, damit die Images auch auf Retina-Devices gut aussehen. Werden die verschwommenen Bilder schon von Shopware runtergerechnet oder sind es die Original-Bilder die vom Browser skaliert werden?
Welche Shopware-Version setzt du denn ein?
An der Usability der Einkaufswelten wurde ja mit Shopware 5.2 so einiges getan. Du solltest auf jeden Fall sicherstellen, dass du die aktuelle Shopware-Version einsetzt.
Daran wird es nicht liegen - das ist die Version 5.2.2
Bin über weitere Hilfe dankbar :)
Du solltest sowieso jedes Bild in doppelter Größe hinterlegen, damit die Images auch auf Retina-Devices gut aussehen. Werden die verschwommenen Bilder schon von Shopware runtergerechnet oder sind es die Original-Bilder die vom Browser skaliert werden?
Bildgrößen-Experimente wurden durchgeführt und sind gescheitert. Bilder werden von Showpare runtergerechnet und im Anschluss wieder vergrößert.
Hallo zusammen,
grundsätzlich kommt es nicht darauf an, ein Bild in genau einer bestimmten Größe hochzuladen. In Shopware werden für hochgeladene Bilder entsprechende Thumbnails generiert. Für den „Einkaufswelten“ Ordner im Media-Manager sind hier im Standard folgende Größen eingestellt: 800x800, 1280x1280, 1920x1290. Diese Thumbnails werden dann auch bei der Ausgabe im Frontend verwendet, z.B. um ein passendes Bild entsprechend der Screen-/Device-Größe zu laden.
Sollte man ein Bild hochladen, welches für eine bestimmte Thumbnail-Größe zu klein ist, wird für diese Größe das Original verwendet. Das Bild wird also nicht künstlich vergrößert. Wenn man wie in Deinem Beispiel ein Bild in 866x566 hochlädt, wird hierfür ein 800er Thumbnail generiert, für 1280er und 1920er aber das Original verwendet (866).
Bei der Ausgabe im Frontend wird das Picture-Element verwendet, welches dem Browser mitteilt, welche Thumbnail-Größen für ein Bild vorliegen und wie Groß das Bild-Element ist. Der Browser kann dann automatisch mit Hilfe der Screen-Größe bestimmen, welches Bild geladen werden soll.
Sollte das Element also <= 800px sein, wird das 800x800 Thumbnail geladen. Sollte das Element größer sein, wird die nächste Thumbnail-Größe verwendet. Im Standard wäre dies dann 1280x1280. Wenn natürlich in dem Thumbnail für 1280 in Wirklichkeit nur ein 866px Bild vorhanden ist, da das originale Bild nicht größer hochgeladen wurde, kann es dazu führen, dass nicht genug Pixel-Informationen zur Verügung stehen, um das Bild gescheit darzustellen. Das Bild wird in diesem Fall vom Browser entsprechend gestreckt.
Die Kompressionsrate ist bei der Darstellung nicht ganz so entscheidend. Bei normalen JPG kann man meist einen Wert bis zu 70/80 verwenden, ohne einen sichtbaren Verlust zu haben. Bei den High-Dpi Bildern kann eine noch höhere Kompressionsrate gewählt werden, da bei der Darstellung der realen Pixel die Kompression nicht so stark sichtbar wird. Dadurch kann man zusätzlich die Datei-Größe der Bilder reduzieren um Bandbreite zu sparen.
Wir haben die Standard Thumbnail-Größen so gewählt, dass man bereits ein breites Spekturm an Anwendungsfällen mit nur wenigen Größen abdecken kann. Natürlich kann es hier je nach Store-Konzept auch Sinn machen, weitere Größen hinzuzufügen, um eine feinere Auswahl an Größen zu bekommen. Je nachdem in welcher Größe das eigene Bild-Material vorliegt, kann man hier entsprechend Anpassungen durchführen, um die Größen an das eigene Material abzustimmen.
Wenn Ihr mehr technische Infos zum Einsatz des Picture-Elementes haben möchtet, wie in modernen Websites mit Responsive Images umgegangen wird, empfehle ich folgenden Artikel:
http://ericportis.com/posts/2014/srcset-sizes/
Sonnige Grüße,
Phil
Hey Philipp,
danke für die ausführlichen Antwort und den Link - wir haben bei dem Artikel “scrset-sizes” zwar viel gelacht, weitergeholfen ist uns aber leider nicht.
Ich habe viele unterschiedliche Bild-Größen getestet um genau das Problem auszuschließen, leider war bisher immer die Schrift im .jpg unscharf.
Wenn du mir jetzt ein Bild mit Schrift übermittelst, welches ich über die Einkaufswelt hochlade - und dieses bleibt scharf - dann ist mir geholfen.
Ich frage mich auch - ist dies nun ein Shopware-spezifisches Problem wie “brettvormkopp” beschreibt, oder lade ich tatsächlich falsche Bildgrößen hoch.
Weiterhin frage ich mich warum mir die Usability Verbesserungen in Shopware 5.2.2 nicht weiterhelfen und es mir so schwer fällt ein Bannerbild welches nicht unscharf ist angezeigt zu bekommen.
Fragen über Fragen - freue mich auf die 
Antworten
Liebe Grüße
Philipp
Ich frage mich auch - ist dies nun ein Shopware-spezifisches Problem wie „brettvormkopp“ beschreibt, oder lade ich tatsächlich falsche Bildgrößen hoch.
Als Haus und Hofkritiker von Shopware muss man hier eine ausführlichere Antwort geben. Das Problem ist „die Streckung“ der Bilder. Mir fallen spontan drei Techniken ein um eine Streckung zu erreichen. Zum einen der „width:100%“ Parameter oder „transform: scale()“ oder auch „zoom:1“. Jede dieser Streckungstechnik gibt unterschiedliche Resultate im Rendern. Hinzu kommt, dass man dann bei Shopware die automatisierte Auswahl hat welches responsive-nahe Thumbnail genommen wird. Diese „Logik“ ist jedoch darauf ausgelegt, dass Shopbesitzer riesen Bilder hochladen, die dann heruntergerechnet werden, oder in deinem Fall hochgerechnet, anschliessend wird das näheste Bild genommen und gestreckt. Streckungen ansich kann man machen, sieht aber immer sch***** aus, in deinem Fall ganz besonders.
Das Shure Bild auf der Startseite ist in meiner Desktop-Ansicht 900x600 px gross (http://www.lt3.de/media/image/96/b7/d9/shure-header-new\_1280x1280.jpg) Mit folgenden Einstellungen bekommt man das Bild zwar wieder scharf (Shopware macht hier eine Streckung), allerdings würde es dann von der größe nicht mehr passen.
Probiere einmal generell größere Bilder hochzuladen, welche Werte genau musst du mal probieren, 1140px wäre ein Anfang. Schau bitte auch, dass du das richtige neue Bild wählst beim hochladen, am besten mit einem neuen Dateinamen.
Die Kompressionsrate ist bei der Darstellung nicht ganz so entscheidend. Bei normalen JPG kann man meist einen Wert bis zu 70/80 verwenden, ohne einen sichtbaren Verlust zu haben.
Also meine Augen sehen da einen großen Unterschied. Ich habe allerdings auch gute Augen.
Hallo,
ich habe jetzt auch noch einige Tests gemacht und mir unter anderem ein ähnliches Banner zusammengebastelt. Wie es scheint könnte das Problem in diesem Fall wirklich nicht die Einkaufswelt sondern die JPEG Kompression der Thumbnails sein.
Eine JPEG Kompression ist nicht für scharfe Kanten oder dünne Linien ausgelegt, daher kann es hier z.B. zu Problemen mit Schrift in JPEG kommen. Auch in Eurem speziellen Fall mit roten Farben gibt es bei der Kompression Schwierigkeiten. Für nähere Infos sind folgende Beiträge ganz interessant:
http://learnmem.cshlp.org/site/misc/tsg_JPEG_instructions.pdf
Für die Kompression der JPEG wird in Shopware die Standard PHP Library GD-Lib verwendet. Diese hat bei einigen Bildern öfter mal Probleme mit dünnen Kanten auf weißem Hintergrund gemacht. Wir haben dafür zusätzlich eine Funktion in Shopware eingebaut, um das Rauschen in Bildern zu reduzieren. Diese könnt Ihr in den Grundeinstellungen aktivieren. Die Generierung der Thumbnails könnte dadurch allerdings etwas langsamer werden.
Ihr könntet mal testen, ob die Qualität der Texte auf Euren Bildern besser wird, wenn Ihr z.B. PNGs verwendet. Bei meinem Test-Banner hat dies bereits einen Unterschied gemacht. Links JPEG mit 80er Kompression und rechts das PNG:
Die Verwendung von Texten in Bildern ist im Responsive Web-Design sowieso ein schwieriges Thema. Allein dafür haben wir bei Shopware extra ein tolles Modul entwickelt, um solche Marketing Banner responsive zu gestalten: Das Digital Publishing Modul.
Dieses bringt einige Vorteile:
http://store.shopware.com/swag369885808847/digital-publishing.html
Schaut es Euch einfach mal an, könnte für Euch ein nützliches Tool sein, wenn Ihr mit vielen Bannern dieser Art arbeitet. Ist in jeder Professional Version automatisch enthalten.
Sonnige Grüße,
Phil
