Grösse der Bilder selber festlegen im Medienmanager

Hallo Gemeinde,

da die Doku für Bildgrössen, Thumbs usw. für die SW4 Version ist wollte ich mal eben nachfragen wie das mit SW5 geht.

Ich arbeite mit SW5 und dem Original Responive Template von SW5.

In meinem bisherigen Projekt habe ich die Originaleinstellungen der Bilder im Medienmanager 1 zu 1 unverändert gelassen. Dabei

mache ich z.B. die Artikelbilder mit 1000x1000px. Als Raw Datei geht das sehr gut, da ich dann die Qualität so weit herunterdrehe bis das Foto so an die 100kb hat.

Ich arbeite mit einem 27" Bildschirm. Da ist die Auflösung und Schärfe der Fotos noch gut.

Nun vermute ich dass bei der Mobilen Ansicht am Handy die Ladezeiten ziemlich hoch sind.

 

Für mein kommendes Projekt, welches ich gerne in 2 Monaten starten würde, wollte ich dies generell anders machen:

Es soll vollkomen auf schnelle mobile Ladezeiten ausgelegt sein. Dabei hätte ich vor, die Artikelbilder max. 700x700 px gross zu machen. Also die Originaldatei des Bildes.

Bei der Abmessung kann ich jederzeit auf 40-50kb gehen ohne grosse Einbussen in punkto Bildqualität zu machen.

Im Medienmanager sind aber die Grössen von: 200x200, 600x600 und 1280x1280 px voreingestellt.

Die Frage ist wie ich das ändern kann. Ich würde dann die 1280x1280 px auf 700x700 px ändern. Die 600x600 px auf 350x350 px und die 200x200 px auf 100x100 px.

Die 1280px sind ja die, wenn man in der Artikel Detailansicht auf Vergrössern geht richtig?

Die 600px dann das Produktfoto in der Detailansicht normal

Die 200px dann die Thumbs in zuletzt angesehene Produkte, Produktlisting usw.

Stimmen meine Vermutungen bisher?

Wenn ich über das Handy ein Produkt aufrufe, wird dann immer erst die Original Bilddatei, wie bei mir z.B. diese mit 1000x1000px und 100kb Grösse geladen oder liege ich hier falsch?

Im Medienmanager ist bei den Artikelfotos die Thumqualität 90 eingestellt. Und bei High Resolution Thumbs 60.

Kann man mit dem Ändern dieser Qualitätseinstellungen auch höhere Ladezeiten erreichen?

 

Vielen Dank schon mal für hilfreiche Antworten.

 

Viele Grüße

Matthias

 

Hallo,

grundsätzlich haben wir die bestehenden Größen passend für das Standard-Template ausgelegt. Du hast jeder Zeit die Möglichkeit weitere Größen in den Einstellungen hinzuzufügen oder auch bestehende zu löschen. Natürlich müssen die Thumbnails dann einmal neu generiert werden.

Für die Auslieferung von verschiedenen Bild-Quellen für unterschiedliche Screen-Größen verwenden wir im Template das picture  Element. Hier können über Media-Queries verschiedene Sourcen für die einzelnen Screen-Größen definiert werden. Der Browser wählt dann automatisch die richtige Quelle aus. So kann man auf Mobilen Geräten Bandbreite sparen. Ein Beispiel wie man es im Template verwenden kann findest Du z.B. in der  themes/Frontend/Bare/frontend/index/logo-container.tpl.

Hier findest Du auch noch weitere Infos dazu:
Responsive Images in Shopware

Die Komprimierung der High Res Bilder ist absichtlich geringer gewählt, um die Datei-Größe gering zu halten. Die höhere Komprimierung fällt durch die höhere Pixeldichte nicht auf, daher kann hier eine höhere Komprimierung gewählt werden. Wenn das Ausgangsbild schon eine sehr gute Qualität hat, kann man hier auch noch weiter nach unten gehen. Da sollte man einfach mal mit seinen eigenen Bildern testen, welche Komprimierung sich verlustfrei verwenden lässt.

Sonnige Grüße,
Phil

1 „Gefällt mir“

Hallo @malzfons‍,

Shopware verwendet Responsive Images über das “picture”-Element und dem “srcset”-Attribut beim “img”-Element:
Responsive Images Done Right: A Guide To <picture> And srcset — Smashing Magazine

Entsprechend entscheidet der Browser auf Basis der Angaben welches Bild für das Endgerät optimal ist und lädt entsprechend dieses Bild. Du brauchst dir hier keine Gedanken machen, dass zu erst das Originalbild geladen wird.

Die Einstellungen der Bilder kannst du einfach im MediaManager ändern:
http://community.shopware.com/_detail_781.html

Per Rechtsklick auf eine Thumbnail Größe kannst du die Thumbnail-Größe löschen und einfach eine neue Größe anlegen. Ich würde an deiner Stelle alle bisherigen Thumbnail-Größen löschen und deine neuen Größen angefangen bei der kleinsten Größe neu anlegen. Bitte beachte dabei, dass die Thumbnails danach komplett neu erstellt werden müssen. Ich empfehle dir daher die Änderungen so früh wie möglich anzulegen, damit der Aufwand der Neugenerierung so gering wie möglich.

Natürlich kannst du über die Qualitätseinstellung die Bildgröße drücken, es kommt hier aber auf dein Ausgangsmaterial an. Hier gibt es keinen Wert, der für alles funktioniert, hier empfiehlt es sich etwas mit den Einstellungen rumzuspielen um das für dich passende Ergebnis zu erzielen.

Viele Grüße,
Stephan Pohl  Shopware

1 „Gefällt mir“

Super, Danke für die Top Infos. Das hilft mir klasse weiter.

Kurze Frage noch zu den Fotos, die ich direkt in Inhaltsseiten, Kategorien oder Artikelbeschreibungen mit dem Editor (mediaselection) einbaue.

Werden diese 1 in 1 als Originalfoto übernommen?

 

Viele Grüsse

Matthias

 

@malzfons‍ Bei den Inhaltsseiten, Kategorie-Texten und Artikelbezeichnungen (eigentlich alles was einen WYSIWYG Editor verwendet) wird das Originalbild per Media-Selection zur Verfügung gestellt.

Viele Grüße,
Stephan Pohl  Shopware

1 „Gefällt mir“

noch eine kurze Frage zu diesem Thema. Wenn ich bei dem neuen Projekt die Thumbs z.B. der Artikelbilder im Medienmanager lösche und meine kleineren neu anlege, passt sich in der Artikelansicht dann auch das „Drumherum“ um die Thumbs an? Also responsive an die neuen Thumbgrössen angepasst?

 

Viele Grüße

Matthias

 

Hey @malzfons‍,

grundsätzlich sind die Bilder im Standard-Theme responsive gestaltet. Wir verwenden hier wie gesagt entweder das „picture“-Element oder „srcset“ Attribut. Alle Bilder, die nicht in mehreren Größen vorhanden sind, skalieren für CSS und passen sich dementsprechend an.

Viele Grüße,
Stephan Pohl  Shopware

1 „Gefällt mir“