Bootstrap Karussel Bilder: Andere Bilder nach Displaygröße laden (per srcset, <picture> oder background-image?)

[DonCarlos]

Ziel ist es nur die nötigen Bilder für die jeweilige Displaygröße herunterzuladen. Die Bootstrap Klassen xs-visible/xs-invisible zum Einblenden/Ausblenden großer/kleiner Bilder finde ich u.a. nicht gut weil stets alle Bilder heruntergeladen werden. Mir fallen sonst nur 3 potentielle Lösungen ein:

srcset: "<img srcset" fand ich zunächst eine gute Idee. Laut caniuse.com wird es aber von Opera Mini nicht unterstützt. Immerhin 3% der Smartphones nutzen diesen aber. Ich weiß nicht ob man ein <img> ohne srcset als Fallback davor schreiben kann.

background-image: Das Problem per CSS Hintergrundbildern zu lösen scheint mir die sauberste Lösung. Ich hab's noch nicht probiert. Geht das?

<picture>: Lässt sich das im Karussel ohne große Anpassungen verwenden oder zerhaut es mir mein Layout der bootstrap.css?

Was empfehlt Ihr?

[Gunnar Bittersmann]

@@DonCarlos

srcset: "<img srcset" fand ich zunächst eine gute Idee.

Streiche „zunächst“ und setze das Verb ins Präsens.

Laut caniuse.com wird es aber von Opera Mini nicht unterstützt.

Ja, und? (Außerdem liegt das in dem gegenüber anderen Browser anderen Rendering begründet.)

Ich weiß nicht ob man ein <img> ohne srcset als Fallback davor schreiben kann.

Nein, das eine img-Element hat sowohl srcset- als auch src-Attribut. Browser, die srcset nicht kennen, ignorieren das und verwenden das in src angegebene Bild (progressive enhancement).

background-image: Das Problem per CSS Hintergrundbildern zu lösen scheint mir die sauberste Lösung. Ich hab's noch nicht probiert. Geht das?

Das kommt darauf an, um was für ein Bild es sich handelt. Gehört es zum Seiteninhalt, dann ist die Einbindung per img richtig und die Einbindung per CSS falsch. Ist das Bild Dekoration, dann hat hat es im HTML nicht zu suchen, sondern gehört ins CSS.

<picture>: Lässt sich das im Karussel ohne große Anpassungen verwenden oder zerhaut es mir mein Layout der bootstrap.css?

picture ist für art direction. Und was hat das mit Bootstrap zu tun?

Und warum überhaupt Bootstrap?

LLAP 🖖

[DonCarlos]

@@DonCarlos

srcset: "<img srcset" fand ich zunächst eine gute Idee.

Streiche „zunächst“ und setze das Verb ins Präsens.

Laut caniuse.com wird es aber von Opera Mini nicht unterstützt.

Ja, und? (Außerdem liegt das in dem gegenüber anderen Browser anderen Rendering begründet.)

Auf Smartphones verwendet die Website im Bootstrap-Karussel kleine, quadratische Bilder. Auf größeren Bildschirmen deutlich breitere Bilder. Bootstrap weist den Bildern width: auto; zu. Im Opera Mini würde also (je nach "Fallback-Bild" in src) entweder ein viel zu riesiges quadratisches Karussel auf großen Bildschirmen oder ein (insbesondere vertikal) viel zu kleines Karussel über die ganze Breite auf Smartphones erscheinen.

Ich weiß nicht ob man ein <img> ohne srcset als Fallback davor schreiben kann.

Nein, das eine img-Element hat sowohl srcset- als auch src-Attribut. Browser, die srcset nicht kennen, ignorieren das und verwenden das in src angegebene Bild (progressive enhancement).

Gut zu wissen!

background-image: Das Problem per CSS Hintergrundbildern zu lösen scheint mir die sauberste Lösung. Ich hab's noch nicht probiert. Geht das?

Das kommt darauf an, um was für ein Bild es sich handelt. Gehört es zum Seiteninhalt, dann ist die Einbindung per img richtig und die Einbindung per CSS falsch. Ist das Bild Dekoration, dann hat hat es im HTML nicht zu suchen, sondern gehört ins CSS.

Bootstrap verwendet (warum auch immer) <img> im Karussel. Vielleicht kann man das durch ein <div> mit Hintergrundbild austauschen. Wenn das einfach geht, reicht mir schon allein die Bestätigung. Dann versuche ich mich mal daran.

<picture>: Lässt sich das im Karussel ohne große Anpassungen verwenden oder zerhaut es mir mein Layout der bootstrap.css?

picture ist für art direction. Und was hat das mit Bootstrap zu tun?

Folge meiner Wissenslücken. <source> hörte sich für mich zunächst interessant an. Lese aber gerade dass picture und source auch nicht vom Opera Mini unterstützt werden.

Und warum überhaupt Bootstrap?

Ich find's gut.

LLAP 🖖

Du auch! Und danke!

[Gunnar Bittersmann]

@@DonCarlos

Auf Smartphones verwendet die Website im Bootstrap-Karussel kleine, quadratische Bilder. Auf größeren Bildschirmen deutlich breitere Bilder.

Das hört sich nach art direction an, also picture.

Und warum überhaupt Bootstrap? Ich find's gut.

Es sollte mich wundern, wenn Bootstrap ein annähernd so brauchbares Karussell hätte wie dieses Karussell von Incusive Components.

LLAP 🖖