Responsive Bilder in 5.3

[Shania]

Nach dem Upgrade auf 5.3 würde ich nun meine Bilder gerne auf die automatisch generierten Responsive Bilder umstellen und habe dieses Video dazu angesehen.

https://www.youtube.com/watch?v=ub8yROSQyQ4

Aber in 5.3 sieht das in Contao schon wieder anders aus. Da ist nochmal mehr verschachtelt.

Gibt es dazu noch aktuellere Videos oder auch eine andere Doku? Ich habe im Handbuch zumindest nichts dazu gefunden.

Ich habe jetzt mal meine gängigen Bildgrößen angelegt, aber es scheint mir noch nicht so richtig zu funktionieren, weil mir in den Entwicklertools in Chrome immer das .jpg Bild als das aktive angezeigt wird. Das wird markiert. Also klappt wohl noch nicht alles, wie es soll.

Das hier habe ich bisher eingestellt.

Screenshot 2026-01-14 161630.pngScreenshot 2026-01-14 160946.png

Im Frontend sieht das dann so in den Entwicklertools aus. Als Größe der Seite ist ein iPhone 12Pro eingestellt.

Screenshot 2026-01-14 162337.png

Es gibt den Einstellungen, die ich bisher im Layout vorgenommen habe, ja nochmal eine Ebene. Aber irgendwie stehe ich auf dem Schlauch. Da fehlt sicher noch etwas. Wäre toll, wenn mir da jemand weiter helfen könnte.

[neelix]

Magst Du mal die Seite nennen?

Das Source-Set mit den verschiedenen Pixeldichten wird ja erzeugt. Aber möglicherweise findet dein Browser keine passendere Datei.

Nachtrag: Dass das IMG Element fabig hinterlegt ist normal. Fahr mal mit der Maus über die Zeile. Dann kommt dann ein Popup mit dem Eintrag "Aktuelle Quelle". Da steht welches Bild der Browser ausgewählt hat.

[Shania]

Das ist auf einer Testumgebung. Ich kann dir aber die Zugangsdaten senden, wenn du schauen magst. Ist nur eine .htaccess davor.

Ich habe jetzt nochmal geschaut und verschiedenes ausprobiert und zwar wird das Fenster mit der aktuellen Quelle bei verschiedenen Links angezeigt, aber es steht immer das gleiche drin und die Einstellungen machen wohl doch was sie sollen . Und was dort angezeigt wird, ändert sich auch bei unterschiedlichen Endgeräten mit mehr oder weniger Pixeln.

Sorry für die Umstände, dann teste ich mal weiter mit Hilfe des Videos.

Alles umzustellen wird bei mir eine irre Arbeit, auch, weil wir überall den Urheber und die Domain auf den Bildern haben. Aber dafür gibt es wohl keine bessere Lösung als es manuell aufzubringen. Da mag ich jetzt nicht wirklich drüber nachdenken, aber so wie ich das sehe, können wir das auch nach und nach machen und müssen nicht alle Bilder auf einmal neu hochladen. Das ist zwar nicht optimal, aber anders wird es nicht gehen.

Danke auf jeden Fall für die Rückmeldung. Vielleicht habe ich gestern einfach zu lange vor der Kiste gesessen und den Wald vor lauter Bäumen nicht mehr gesehen.

[neelix]

Solande Du keine Artdirection (wichtiger Bereich) verwendest werden die Bilder ja nicht beschnitten, sondern einfach nur in unterschiedlichen Auflösungen bereitgestellt, sodass z.B. ein Apple Gerät mit Retina-Display (2:1) ein Bild mit der doppelten Auflösung lädt um es auch knackig scharf darzustellen.

Über Angaben zum Viewport kannst Du jetzt noch beeinflussen, dass der Browser von vorne herein eine andere (kleinere) Datei wählt, weil das Bild auf einem 6" Display jetzt z.B. nur noch eine Breite von 320 Pixeln statt 1280 Pixeln auf einem HD Fernseher hat.

Da muss man sich etwas reinfuchsen. Für die meisten einfachen Fälle reicht aber aus meiner Sicht schon die Version mit den Pixeldichten oder die einfache Angabe der Bildbreiten.
Das lässt ich alles auch noch wild kombinieren.

Parallel zum Video erklärt es diese Seite auch ganz gut. https://kulturbanause.de/blog/respon...izes-adaptive/

[Shania]

Ich werde nochmal ein wenig herumprobieren und schauen, ob das so reicht oder ob ich direkt noch etwas verbessern kann.

Ah, ja, der Kulturbanause, da habe ich auch immer mal wieder gelesen, danke. Das schaue ich mir an.