Performance bei Bildgrößen

[Znrl]

Zuerst nocha als nachtrag, dass das mit der Breite oben nicht funktioniert liegt daran, dass man mit den 640px als Einstellung natürlich nicht auf die native Bildauflösung kommt.
Hätte man hier einen Wert, bei dem man mit einem Skalierungsfaktor auf die 1707 kommt, verhält sich das genau wie die Breite.

Zusammenfassend:
Man sollte vtl. vermeiden Breite und Höhe anzugeben außer die Abmessungen/Seitenverhältnisse sind in der Regel gleich.
Gegebenenfalls dafür zwei Bildgrößen anlegen, eine für Hochkant und eine für Querformat.


Dann hast du auf der Seite gerade eine srcset Angabe bei der nur "w" steht ohne Zahl... schau dir mal die Einstellungen an?

Was genommen wird entscheidet dann der Browser anhand der Angaben, die Reihenfolge sollte dabei keine Rolle spielen.
Das sizes wird zur Berechnung gebraucht.

Vereinfacht wohl so:
Wenn das Browserfenster 1000px breit ist, du aber sagst das bild wird nur auf 50vw (quasi 50%) Angezeigt nimmt er nur das Bild für 500px Breite.


http://pmueller.de/blog/responsive-b...eberblick.html
https://blog.kulturbanause.de/2014/0...izes-adaptive/

[Spooky]

Und ich habe das Sizes-Attribut:
(min-width:1280px) 90vw, (min-width:1650px) 85vw, 100vw.

Wie schon vorher erwähnt: du willst wahrscheinlich max-width verwenden, nicht min-width.

[wanst]

Zuerst nocha als nachtrag, dass das mit der Breite oben nicht funktioniert liegt daran, dass man mit den 640px als Einstellung natürlich nicht auf die native Bildauflösung kommt.
Hätte man hier einen Wert, bei dem man mit einem Skalierungsfaktor auf die 1707 kommt, verhält sich das genau wie die Breite.

ich war der Ansicht (soll heißen, ich hab gelesen), dass die jeweils längere Seite den Ausschlag gibt. Die Höhe sollte demnach also keine Auswirkung haben. Allerdings brauche ich die auch gar nicht, hab das nur ausgefüllt, weil ich nicht wusste, dass man es auch leer lassen kann. Dann aber selber schon mal ausprobiert – darum hatte es wohl zwischendrin mal funktioniert.

Dann hast du auf der Seite gerade eine srcset Angabe bei der nur "w" steht ohne Zahl... schau dir mal die Einstellungen an?

Das finde ich auch merkwürdig, aber darauf habe ich doch gar keinen Einfluss. Das ist, was Contao daraus macht.

Was genommen wird entscheidet dann der Browser anhand der Angaben, die Reihenfolge sollte dabei keine Rolle spielen.
Das sizes wird zur Berechnung gebraucht.

Vereinfacht wohl so:
Wenn das Browserfenster 1000px breit ist, du aber sagst das bild wird nur auf 50vw (quasi 50%) Angezeigt nimmt er nur das Bild für 500px Breite.


http://pmueller.de/blog/responsive-b...eberblick.html
https://blog.kulturbanause.de/2014/0...izes-adaptive/

schau ich mir grade an. Danke.

[wanst]

Wie schon vorher erwähnt: du willst wahrscheinlich max-width verwenden, nicht min-width.

Wann wurde das erwähnt? Aber nein, ich will das eigentlich genauso – dachte ich zumindest, analog zur CSS-Definition und Mobile First und so.

[Znrl]

ich war der Ansicht (soll heißen, ich hab gelesen), dass die jeweils längere Seite den Ausschlag gibt. Die Höhe sollte demnach also keine Auswirkung haben. Allerdings brauche ich die auch gar nicht, hab das nur ausgefüllt, weil ich nicht wusste, dass man es auch leer lassen kann. Dann aber selber schon mal ausprobiert – darum hatte es wohl zwischendrin mal funktioniert.

Prinzipiell richtig (bei "proportional") nur an der Stelle an der Contao entscheidet das zu resizen ist noch nicht bekannt welche Seite die längere ist.

Die Reihenfolge bei srcset in <img> ist egal, weil der Browser alles anschaut und dann das passende benutzt. Es gibt hier kein Mobile First.
Anders sieht das bei picture und source etc aus, dort wird das erste passende benutzt.

[Spooky]

Wann wurde das erwähnt?

Ah, dachte das hatte ich vorhin schon mal erwähnt, aber ist doch nicht der Fall.

Aber nein, ich will das eigentlich genauso – dachte ich zumindest, analog zur CSS-Definition und Mobile First und so.

So wie du das jetzt geschrieben hast, würde bei einer Viewport Breite von zB 1920px die Größe 90vw genommen werden.

[Andreas]

Hast du auch schon das Video gesehen? https://www.youtube.com/watch?v=ub8yROSQyQ4&t=1300s

[wanst]

Hast du auch schon das Video gesehen? https://www.youtube.com/watch?v=ub8yROSQyQ4&t=1300s

Hi Andreas, danke für den Link. Ich hatte die Beiträge von Peter Müller zwar schon gelesen, das Video war trotzdem ganz nützlich.

[blue12]

Hallo,

gibt es denn eine Möglichkeit oder eine Erweiterung um die Bilder zum Beispiel schon beim speichern der Artikel-Elemente zu erstellen? Oder um sie Step-By-Step zu erstellen. Also das bei jedem Seitenaufruf zum Beispiel immer nur eine maximale Anzahl an Bildern gerendert wird?
Ich arbeite gerade an einem One-Pager, welcher neben normalen Contentbildern auch viele große Hintergrundbilder (mit verschiedenen Bildgrößen) hat. Und wenn dort auf einmal alle Bilder der Seite erstellt werden sollen kommt das System ganz schnell an seine Grenzen.

Oder gibt es evtl. die Möglichkeit das automatische leeren des Bilder-Caches zu deaktivieren? Somit könnte ich die Bilder in der lokalen Entwicklungsumgebung erstellen lassen und dann per FTP auf den Server legen. Wenn Contao später dann nicht den Bild-Cache löscht, sollte das erst einmal funktionieren.

Robert

[Znrl]

Also bei Bildern die ich sag mal zum Layout gehören etc., alles was sich nicht oft ändert und nicht von jemandem geändert werden soll, der das anders nicht hinbekommt....
Würde ich als alternative vorschlagen das ganze über ein eigenes Template oder Modul eigenes HTML zu machen und dann für alle Bildgrößen ein wirklich selbst optimiertes Bild zu nehmen.
Dann muss Contao nichts erstellen und das "kleinere" Bild ist am ende nicht größer als das orginale.

[blue12]

@Znrl, ja das ist auch meine derzeitige Lösung. Ich wollte nur gern wissen ob es nicht noch andere Lösungsansätze mit den Bildgrößen gibt. Denn wenn nun doch einmal eines der Hintergrundbilder geändert werden muss, kann es der Redakteur nicht einfach über das CMS machen. Sondern muss die Bilder erst wieder per Hand oder über einen andern Weg erstellen. Das finde ich sehr schade. Denn die Bildgrößen sind schon eine tolle Sache! Nur das sie eben alle auf einmal erstellt werden, wenn der Cache leer ist, ist problematisch. Und für eine kleine One-Pager Webseite brauche ich ja kein Server Paket mit 1GB oder mehr RAM.

Es wäre halt toll, wenn es eine Möglichkeit gäbe, die Bilder in mehreren Schritten erstellen zu lassen. Oder direkt beim Speichern eines Inhaltelements, oder etwas ähnliches

[Znrl]

Ob es das schon gibt weiß ich nicht aber das Erstellen wäre vtl. über ein Callback möglich, dann müsstest du noch dafür sorgen, dass der Bilder Cache nicht gelöscht wird.
https://community.contao.org/de/show...-an-sehr-lange

[Andreas]

Man könnte auch einen smarteren purgeImageCache() als Cron aufsetzen als den vorhandenen https://github.com/contao/core/blob/...mator.php#L129

Dann könnte man z.B. sagen, dass er nur Bilder löschen soll, die älter als, z.B. 90 Tage sind und auch ein Limit einrichten, z.B. 200. Evtl. könnte dieser dann auch wöchentlich, anstatt monatlich laufen. Außerdem könnte man ihn noch als echten Cron ausführen, welcher dann z.B. Nachts automatisch läuft.