Bitte um Erklärung von offizieller Seite

Shopware 5 Themes & Design
1

Hallo,

das Thema Bilder oder besser Thumbnails ist wirklich lästig. Es gibt inzwischen diverse Post mit Fragen zu diesem unlogischen Verhalten, jedoch keine Antwort von offizieller Seite, die die Sache erklären würde.

Darum fasse ich hier die bisherigen Erkenntnisse kurz zusammen:

  1. Produktbilder mit 700x700 oder 800x800 Pixel, die optimal komprimiert und reduziert sind, werden bei den größeren Thumbnails in der Pixelzahl nicht größer, aber in der Speichergröße wohl.

  2. Die Größte Thumbnaileinstellung ist 1280x1280. Also lade ich ein Produkbild mit 1280x1280 Pixel (komprimiert und reduziert) hoch. Größe auf meinem PC 118 KB. Die Thumnail 1280x1280 dazu hat am Speicherort dann 168 KB! Das ergibt doch überhaupt keinen Sinn.

Wenn mir google anzeigt, dass bei der 1280er Thumbnail 38 KB eingespart werden können, lande ich bei etwa bin ich etwa 130 KB. Also ist meine Originaldateigröße mehr als optimal.

Warum haben die Dateien in SW eine höhere Speicherkapazität (ohne dass sich die Pixelzahl erhöht)?

LG

2

Ich glaube dass das mit der high Resolution auch zu tun hat. 

 

1 „Gefällt mir“
3

Ja, wenn du die High Resolution Qualität der Thumbnails runter setzt geht auch entspechend die kb Größe runter.

4

Was passiert genau mit der Datei, wenn der Haken dort gesetzt ist? Da sich die Pixelzahl nicht ändert, kann sich eigentlich nur die dpi-Zahl ändern oder womit wird versucht, die Datei zu „verbessern“? Ggf. könnte ich das schon vorab beim Erstellen meiner Datei berücksichtigen.

Wenn ich den Haken also entferne und etwas weiter oben auf „Thumbnails generieren“ klicke, sollte die Thumbnails alle geändert werden? Da tut sich nämlich nichts. Weder jetzt, noch bei einem früheren Versuch, bei dem die Thumbnailqualität von 90 auf 70 geändert wurde.

Nun habe ich das gleiche Bild mit geändertem Namen hochgeladen und einem Artikel zugeordnet. Die neue Thumbnail ist exakt so groß, wie die frühere. Obwohl zwischenzeitlich der Haken bei HR entfernt und der Cache geleert wurde.

5

Nachtrag:

Ich habe jetzt alle Test-Thumbnails heruntergeladen und geprüft. Die Pixelzahl verringert sich, wenn die TN kleiner ist als die Originaldatei. Ist die TN größer als die Originaldatei erhöht sich die Pixelzahl nicht.

ABER:

Alle Thumbnails haben eine Auflösung von 96 dpi, obwohl sie mit 72 oder 79 dpi hochgeladen werden. Dann ist es logisch, dass die Dateien nach der Übertragung größer werden. Diese Information ist in weder in der Beschreibung der Mediaverwaltung noch in irgendwelchen Post hier, bei denen eingehend beschrieben wird, in welcher Auflösung Dateien übertragen werden, erwähnt.

Bei den Einkaufswelt-Bannern ist es ebenso.

Bittiefe übrigens 24 (da in anderen Post zu 8Bit geraten wurde)

 

Die Dateien die mit Haken bei HR-Thumbnails hochgeladen wurden, sind exakt gleich denen, die ohne den Haken hochgeladen wurden. (Gleiche Datei, mit anderem Dateinamen).

Daher nochmals die Frage: Woran erkenne ich die HR-Thumbnails. Werden hier zusätliche Dateien mit anderem Namen erstellt oder sind die normalen TNs in anderer Qualität?

LG

Getestet habe ich die 200er und 1280er TNs, weil die ständig bemängelt werden.

 

6

Du erkennst die HQ-Thumbs an dem @2x im Namen.

Die DPI spielt m.W keine Rolle. Die reine Pixelzahl ist das Entscheidende. Mit diesen Pixeln, kannst Du je nach Ausgabegröße unterschiedliche Pixeldichten (DPI) erreichen (Im Druck). Das Display hat eine fixe Pixeldichte.

Die Thumbnails werden maximal so groß (Pixel) wie die Orignaldatei. Ansonsten werden sie auf die eingestellten Pixelgrößen skaliert und mit der eingestellten Qualität komprimiert.

7

Die DPI-Zahl spielt genauso wie die Pixelzahl eine Rolle bei der Speichergröße der Datei. Das könnte die höhere Speichergröße erklären, wenn das Bild mit 1280x1280 pixel von 72 auf 96 DPI vergrößert/erhöht wird. Im umgekehrten Fall - also bei den kleineren TNs - bedeutet das, dass die ja sowieso weniger Speicherplatz belegen als die höhere Pixelzahl, möglicherweise aber noch weniger belegen würden.

Soweit das übliche Verhalten der Dateien (wie es normalerweise wäre). Aber bei SW ist ja alles anders :slight_smile:

Denn, gerade getestet:

Testbild auf 96 dpi geändert und mit neuem Namen hochgeladen. Originaldatei maximal komprimiert auf dem PC 62,5 kb. Die Thumnail dazu bei SW 83,1 kb. Also immer noch vergrößert. Hier wirkt sich die DPI-Zahl also nicht aus.

Aber Google ist jetzt glücklich: Bei der neuen Datei könnten nur noch 22% eingespart werden und nicht mehr 98 % wie bei der 72DPI-Datei.

Der Speedtest von Google bezieht sich hier auf das Element “Artikel” in der Einkaufswelt. Hier sind die Ergebnisse bei Mobil und Desktop identisch.

 

 

8

Die DPI spielen eigentlich keine Rolle bei Bildern, da sie eine (ungebrauchte) Metaangabe sind, die dazu dienen, beim Ausdruck die Abmessungen zu ermitteln. Beim Rasterdevice wie z.B. Monitor etc. spielt DPI in Bildern hingegen keine Rolle. Ändert man bei fester Pixel-Zahl die DPI, verändert sich die Abmessung ohne etwas am Bild zu ändern. Verändert man bei fester Abmessung die DPI, ändert sich hingegen die Pixel-Zahl, das Bild wird skaliert. Gerade bei Photoshop muss man immer genau darauf achten, welche Häkchen bei „Bildgröße ändern“ gesetzt sind. Wink Ein Browser ist letzlich auch nur ein Rasterdevice, und die Darstellungsqualität hängt nur von der Darstellungsgröße und den Pixeln ab, DPI sind in diesem Kontext zu ignorieren. Im Backend ist auch nichts von DPI einzustellen.

Wenn Du für hochauflösende Geräte „@2x“ Bereitstellen möchtest , sollte Dein Bild z.b. 2560x2560 Pixel beliebiger DPI haben, dann sollte das 1280x1280 @2x die doppelte Auflösung haben. Die benötigten 1280x1280 thumbnails werden dann von oben runtergerechnet, sollte bei „Pixelhalbierung“ und Qualität 50 bis 70 im backend zu guten Bildern führen. Das Bilder nach dem Thumbnailserstellen größer werden, liegt an der einstellbaren „Qualität“ - oder eben Kompressionsrate.

Ein Bild mit 1280x1280 und identischer Kompressionsrate ist bei 72 DPI und 96 DPI gleich groß.

9

Zu den Thumbnails der Artikelbilder:

Ich habe die Einstellungen des Albums „Artikel“ nicht verändert, es sind also 3 TN-Größen vorgegeben, der Haken bei HR-Thumbnails ist gesetzt. Die Komprimierung ist auf 90% bzw. 60 % bei HR eingestellt. Es wurden anschließend Unteralben angelegt.

Neue Produktbilder wurden in der Größe 700x700 oder 800x800 pixel bei 72 DPI als jpg gespeichert (auf 75% komprimiert), dann mit optimizilla nochmals verkleinert und dann per drag&drop in den Ordner Artikel gezogen und erst nach Zuordnung zu einem Artikel in den jeweiligen Unterordner geschoben.

Heute habe ich festgestellt, dass bei den Unterordnern der Haken bei HR nicht gesetzt ist, obwohl doch die Einstellungen des Hauptordners autom. hätten übernommen werden müssen. Ich weiß nicht, ob nun HR-Thumbnails vorhanden sind oder nicht oder wie ich das prüfen könnte. Wenn ich die richtig verstehe, wird bei der Auflösung der Originaldatei von 800 oder auch 1280 Pixel gar keine HR-Thumbnail erstellt, auch wenn der Haken gesetzt ist, weil die Auflösung meiner Datei 2560x2560 pixel habe müsste?

 

Bzgl. Komprimierung:

" Das Bilder nach dem Thumbnailserstellen größer werden, liegt an der einstellbaren „Qualität“ - oder eben Kompressionsrate. "

Was du hier schreibst, passt nicht so ganz. Wenn ich eine Grafik erstelle und als jpg abspeichere, kann ich wählen ob ich mit 100% also optimaler Qualität (Bei PS gibt es da die Skala 1-12) und folglich großer Speichergröße abspeichere oder ob ich z.B. nur auf 75% speichere und die KB oder MB bei gleicher Pixelzahl einfach kleiner werden. Die Datei wird kleiner, die Qualität schlechter. Daher kommt unter 75% meist Matsch heraus. :slight_smile:

Wenn ich diese Datei nun zu SW ziehe und TNs erstellt werden - bei mir mit einer Kompressionsrate von 90% - müsste meine Datei also nochmals 10% an Qualität einbüßen, kann also niemals größer werden. Da die Datei nur 800x800 pixel hat und auch die dazugehörige TN 1280x1280 ebenfalls nur 800 Pixel. Also es wird nichts vergrößert und scheinbar nur neu abgespeichert und das wohl um 10% reduziert.

Versteht man halbwegs was ich versuche zu erklären? Ich kenne mich nur mit der Grafikbearbeitung aus, nicht mit Programmierung. Aber das was hier passiert ist nicht typisch. Es sei denn, es ist was völlig anderes gemeint…

10

Noch ein Nachtrag dazu:

"Denn, gerade getestet:

Testbild auf 96 dpi geändert und mit neuem Namen hochgeladen. Originaldatei maximal komprimiert auf dem PC 62,5 kb. Die Thumnail dazu bei SW 83,1 kb. Also immer noch vergrößert. Hier wirkt sich die DPI-Zahl also nicht aus.

Aber Google ist jetzt glücklich: Bei der neuen Datei könnten nur noch 22% eingespart werden und nicht mehr 98 % wie bei der 72DPI-Datei.

Der Speedtest von Google bezieht sich hier auf das Element “Artikel” in der Einkaufswelt. Hier sind die Ergebnisse bei Mobil und Desktop identisch."

 

Die Erkenntnis kann ich wieder zurückziehen. Die neuen Banner für die EKW hatten im Demoshop super Werte bei Google. Daher hatte ich sie dann im Liveshop ausgetauscht. Dort genau so bescheiden wir die alten. Bei allen konnten zwischen 80 und 91 % eingespart werden. Nochmal den Demoshop mit pagespeed getestet, dort steht jetzt auch überall 80-90%.

11

Am besten Du lädst die Bilder in bestmöglicher Qualität und Auflösung hoch, und überlässt Shopware die Optimierung der Bilder. Macht es ja eh.

Achte bitte darauf, ob bei den Unteralben auch die Thumbnaileinstellungen vorhanden sind.

12

Einstellungen der Unterordner siehe oben.

Die mir vorliegende beste Qualität hat 6MB pro Datei und 300 dpi, die lade ich sicher nicht hoch.

Da ich also anders als bei (Produkt-)Fotos, die Datei selbst erstelle, kann ich hier jede beliebige Vorgabe erfüllen. Nur wüsste ich die nun eben mal gerne von Shopware. Ordentliche Ladezeit bei brauchbarer Bildqualität. So dass die Dateien sich nach dem Hochladen nicht negativ verändern. Das Ganze dann auch passend für Mobil und Desktop - da werden nämlich unterschiedliche Dateien/Thumbnails moniert.

13

@Toric schrieb:

Einstellungen der Unterordner siehe oben.

Die mir vorliegende beste Qualität hat 6MB pro Datei und 300 dpi, die lade ich sicher nicht hoch.

Da ich also anders als bei (Produkt-)Fotos, die Datei selbst erstelle, kann ich hier jede beliebige Vorgabe erfüllen. Nur wüsste ich die nun eben mal gerne von Shopware. Ordentliche Ladezeit bei brauchbarer Bildqualität. So dass die Dateien sich nach dem Hochladen nicht negativ verändern. Das Ganze dann auch passend für Mobil und Desktop - da werden nämlich unterschiedliche Dateien/Thumbnails moniert.

Nochmal: vergiss die DPI-Angabe! Wie viele Pixel in der Breite und in der Höhe haben die Bilder? 

Du kannst die Bilder auch gerne vorher verkleinern. Die wesentliche Aussage ist: Shopware Skaliert und Optimiert die Bilder selbst. Also alles was Du vorher machst, wird vor Shopware noch mal gemacht dies kann die Quali verschlechtern.

14

Mike, ich bitte dich. Lies oben, dort steht alles. Dieser Post füllt sich genau so, wie die zahlreichen anderen zu diesem Thema. Mir geht es um eine verbindliche Antwort von Shopware - siehe Überschrift - nicht um Mutmaßungen oder „probier mal“. Ich teste seit nunmehr einem Jahr in alle Richtungen.

15

Die Sache ist glasklar: Im MedienManager werden die Thumbnailgrößen und Qualitäten eingestellt. Shopware erstellt anhand von diesen Einstellungen die Thumbnails und bietet sie dem Browser an. Der Browser entscheidet anhand der Fenstergröße und der Pixeldichte des Displays (HR vs Standard) welche Bilder gezeigt werden.

Was ist hierbei unklar oder problematisch?

16

siehe oben… du hast übrigens das gleiche Problem, nur vielleicht noch nicht gemerkt…

17

@Toric schrieb:

siehe oben… du hast übrigens das gleiche Problem, nur vielleicht noch nicht gemerkt…

Ich meine an dem was ich oben geschrieben habe. Was funktioniert nicht, wie ich es oben beschreiben habe?

Aus Deinen Posts werde ich u.A nicht schlau, weil Du ständig an bedeutungslosen DPI herumreitest und nicht bereit bist zu akzeptieren, dass Shopware die Thumbnails selbst speichert samt entsprechenden Folgen für die Bildgröße und Qualität.

18

“Die Komprimierung ist auf 90%” => wäre wie Stufe 9 oder 10 in Photoshop - kein Wunder, dass die Bilder so groß werden.
Lade die Bilder in einer hohen Auflösung niedrigen Kompression hoch, damit SW noch “Fleisch” zum Skalieren hat, und probiere mal eine Einstellung von 50 oder 60 im Backend aus.

[Edit]
Problem: Die JPG-Kompression ist verlustbehaftet. Du lädst also gut “komprimierte” Bilder hoch, SW muss diese aber wieder als “Bitmap” dekomprimieren, damit ist Deine alte Kompression futsch. Bei starker Kompression hast Du nun aber Artefakte. Die dann wieder verstärkt werden, wenn Du bei SW eine hohe Kompression (kleinen Wert) einstellst. Also hochwertige Bilder ohne Kompressionsverluste hochladen und dann “stark” komprimieren. Solange wie möglich immer ohne “Verluste” arbeiten.  Smile

19

"“Die Komprimierung ist auf 90%” => wäre wie Stufe 9 oder 10 in Photoshop - kein Wunder, dass die Bilder so groß werden. "

-> Ja, aber wohl ausgehend von der von mir bereits komprimierten Datei. Also 90% von meinen 75%. Bei 100% dürfte es keine Änderung geben, wenn kleiner 100, dann muss die Datei auch kleiner werden. Ganz allgemein, was jetzt nichts mit den Ansprüchen von google zu tun hat.

 

Ich habe bei Artikel und Einkaufswelt die Komprimierung auf 60% gestellt. Die Speedanalyse bei Desktop ändert sich nicht. Es werden immer noch die Banner_800x800.jpg mit über 80% zu groß angezeigt.

Bei der Mobilen Anlsicht zwar nicht (in der Demoversion, aber ich habe hier auch nicht die mobile EKW getestet.) Bei der mobilen Ansicht, waren die TN 1280x1280 der Störfaktor speziell bei den Artikelslidern.

20

@Toric schrieb:

"„Die Komprimierung ist auf 90%“ => wäre wie Stufe 9 oder 10 in Photoshop - kein Wunder, dass die Bilder so groß werden. "

-> Ja, aber wohl ausgehend von der von mir bereits komprimierten Datei. Also 90% von meinen 75%. Bei 100% dürfte es keine Änderung geben, wenn kleiner 100, dann muss die Datei auch kleiner werden. Ganz allgemein, was jetzt nichts mit den Ansprüchen von google zu tun hat.

 

ich gehe nicht davon aus, dass man so rechnen kann. Speichere mit 100% und lasse Shopware die Bilder komprimieren. Ansonsten kannst Du ja mal testen wenn Du die Bilder immer wieder mit 75% mit Deinem Tool komprimierst, was passiert.

Es kann sein, dass die Banner mit 800x800 zu groß für den jeweiligen Slot sind. Erstelle dafür passendere Thumbnailgrößen.