Diskussion:HTML/Tutorials/responsive Bilder

[Matthias Scharwies]

Servus!

@BerlinerTourGuide @Hahawe Bitte stelle Deine Fragen hier im Forum! (Und bitte achte auf Formatierung, Groß- und Kleinschreibung, die es uns leichter macht, deine Fragen zu verstehen.)

die "ansehen"-bsp.e zu verdeutlichen wunderbar die ineffizienz bzw. praktische unbrauchbarkeit der methode:

<img src="Monumentvalley-gross.jpg"
    alt="Panorama Monument Valley - Quelle Wikipedia"
    srcset="Monumentvalley-klein.jpg 600w, 
            Monumentvalley-mittel.jpg 1200w, 
            Monumentvalley-gross.jpg 1920w" >

klicke ich auf die 2. [hier dargestellte] variante, wird von beiden browsern die 1.920-variante geladen, und das auf einem bildschirm, der insgesamt nur 1.280 px breit ist, sodass das bild in einem bereich von ungefähr 735 px dargestellt wird; m.a.w. 1.200 px hätten dicke gelangt...

Die Browser machen was sie sollen, verschiedene Bilder ausliefern und der Breakpoint ist 1200, also kleiner als 1280px. Du kannst diese Werte verändern, wenn Sie dir nicht passen!

ferner kann die viewport-breite in chrome auf ein drittel verringern und neu laden, so oft ich will: nichts ändert sich... toll... während firefox die bilder schon beim verkleinern (schieben) der browser-breite die bilder austauscht (ohne reload)...

Steht im Artikel unter Resolution Switching mit srcset :

Beachten Sie, dass bei einer Änderung des Viewports die Grafik nicht neu geladen wird. Sie müssen dazu die Seite neu laden. Was wie ein Nachteil klingt, ist bei mobilen Geräten, die evtl. nur über eine leistungsschwache Datenverbindung verfügen, jedoch ein Vorteil, da nicht bei jeder auch unbeabsichtigten Bewegung grafische Inhalte nachgeladen werden, und so der traffic nicht übermäßig belastet wird. Eine Drehung des Bildschirms z.B. bei einem Tablet benötigt diese Vorgehensweise mit dem picture-Element.

Im Firefox wird anscheinend ein resize-Event gefeuert, das könntest du für Chrome mit JavaScript nachbauen.

Herzliche Grüße

Matthias Scharwies