Responsive geht gar nicht

[tpk]

Hi,
habe mir gerade mal das hervorragende Video von Peter Müller zu responsive Images angeschaut. Puh!

Ich möchte in Contao 4.4.7 ein bildschirmbreites Bild definieren, responsiv, groß genug bis 4k, ohne Art Directory.

Also so: Unbenannt.PNG

und so: Unbenannt1.PNG

Ausgegeben wird aber nur das ganz normale img tag. Muss ich noch irgendwo klicken, dass die Bilder überhaupt generiert werden, oder was mache ich falsch?

Edit: Polyfill ist aktiviert, aber das braucht es laut Video ja gar nicht.

[tpk]

Ah, ich verwende ein gekauftes Template, und da wurde ce_img überschrieben .... Jetzt geit dat.

Was sind denn die optimalen Werte, wenn ich für 4k optimieren will?

[Spooky]

Also mehr als 3x wirst du kaum brauchen.

[tpk]

Aber 4k ist doch 3840 / 687 = gerundet 6?

[Spooky]

Achso, das Bild wird immer auf die ganze Viewport Breite aufgeblasen? Warum verwendest du die Breite 687?

[tpk]

Alte, tief eingetretene Pfade von Bootstrap, das ist die maximale Breite auf nem Phone. Aber wahrscheinlich ist 300 gescheiter?

[Spooky]

Ohne das Design bzw. Layout zu kennen kann ich da keine pauschale Empfehlung geben .

[tpk]

Na, der heutige Standard, oben Foto so breit wie der Bildschirm zulässt.

[Spooky]

Dann würde ich eher von einer Desktop Auflösung wie zB 1920 grundsätzlich ausgehen. Und dann zB 0.5625x, 0.6666x, 1x, 1.125x, 2x verwenden. Das entspricht den Auflösungen 1080, 1280, 1920, 2160 und 3840.

Zu bedenken ist hier jedoch, dass es vielleicht nicht sehr effizient ist, solche riesigen Bilder ausgeben zu lassen. Als Kompromiss zwischen Bildqualität und Dateigröße sollte man vielleicht eher eine niedriger Auflösung wählen, die dann per CSS auf 100% aufgeblasen wird. Hier wird es dann aber kompliziert und man müsste eher mit <picture> arbeiten.

[tpk]

Wer vor nem 4k Monitor sitzt, hat auch ne flotte Leitung, oder?

[Spooky]

Nicht unbedingt . Aber 1920 ist ja auch schon nicht klein.

[tpk]

Von 1920 ausgehen ...

Aber hat man dann nicht gerade auf dem Handy, wo man ja gerade ein kleines Bild haben will, den 1920er Brummer? Ich dachte, deswegen hat Peter mit 300px angefangen.

Edit: 1080er, Du hast ja 0,56.

[Spooky]

Die physische Auflösung bei den meisten, modernen, high end Smartphones beträgt 1080x1920. Daher 1080. Du kannst auch noch 0.375x (für 720) verwenden. Und 0.1875x für 360 - wobei das nicht mehr so weit verbreitet sein dürfte. Weiters könntest du noch 0.390625x für 750 (iPhone 6/7/8) und 0,3333x für 640 (iPhone 5) verwenden. Aber irgendwo muss man auch mal Schluss machen, man muss ja nicht alle Auflösungen abdecken .

[tpk]

Stimmt, ich hab mich von den Angaben in Chrom ablenken lassen, 320px für S5. Aber das ist ja nicht die tatsächliche Pixeldichte und hat eben auch schon ein HD Display. Urks, ist das kompliziert :-) Dann fange ich mit 640px an und nehme gerade Zahlen, spare ich mir Deine 0,...

[Spooky]

Mit 640 bekommst du aber auch keine ganze Zahl für 1080

[mlweb]

Mit 640 bekommst du aber auch keine ganze Zahl für 1080

Ich habe in der neuesten Version von Contao 4.4.6 gerade im Backend im Beschreibungstext erfreut gesehen, dass man scheinbar jetzt auch direkt die Breitenbeschreibung (z.B. 300w) angeben kann.
Ich weiß nicht genau ab welcher Version das drin ist und richtig durchgetestet habe ich auch noch nicht. Aber finde ich gut.

Edit: Wurde scheinbar im Ticket #342 abgearbeitet und steht damit seit 4.3.0 RC1 zur Verfügung.

Feine Sache und m.E. auch irgendwie vom Verständnis her besser.

[tpk]

@spooky 1080

Mist, wo Du recht hast ...

Hm, einen ungeraden Tod muss man also sterben, die 1080 ist sicher die wichtigste Größe. Wie wäre

320px :: 2(640),3(960),3.375(1080),6(1920),8(2560),12(3840)

Ist 960 eine relavante Größe für Tablets oder kann die auch weg?
1920 sollte für alle Desktops OK sein.

[tpk]

@mlweb
Wofür soll das gut sein? 3 fache Bildschirmbreite, intuitiv ist es jedenfalls nicht ;-)

[mlweb]

Wenn Du 300w angibst wird normalerweise ein Bild gemeint welches 300px breit ist.

Was ich momentan noch nicht getestet habe ist, wie genau Contao das verarbeitet.

[mlweb]

Gerade mal kurz getestet. Wenn Du oben bei der Breite die Breite des hochgeladenen Bildes angibst ist das auch so.
Ich hoffe ich habe mich da gerade auf die Schnelle nicht verguckt.

[mlweb]

320px :: 2(640),3(960),3.375(1080),6(1920),8(2560),12(3840)

Für diese Reihe wäre das Originalbild 3840px. Diesen Wert trägst Du bei Breite ein.
Bei size-Attribut 100vw und bei Pixeldichte/Skalierungsfaktor: 640w, 960w,1080w,1920w,2560w

Die Breite fürs Originalbild brauchst Du soweit ich es gesehen habe nicht mit reinnehmen. Das erzeugt Contao im srcset automatisch mit.

[tab]

@spooky 1080

Mist, wo Du recht hast ...

Hm, einen ungeraden Tod muss man also sterben, die 1080 ist sicher die wichtigste Größe. Wie wäre

320px :: 2(640),3(960),3.375(1080),6(1920),8(2560),12(3840)

Ist 960 eine relavante Größe für Tablets oder kann die auch weg?
1920 sollte für alle Desktops OK sein.

Also so ein Zinnober mit ewig vielen Größen werde ich nicht veranstalten. Maximum 3, eventuell mal 4, mehr gibts halt nicht. Die ganzen Bilder müssen auch irgendwann gerechnet werden. Außerdem kann ich dir versichern, dass ich mir Websites selten im Vollbildmodus anschaue. Welche Größe mein Viewport also gerade hat? Meist so um die 1000 Pixel. Wenn's die Website verlangt und es sich lohnt mache ich ihn auch mal größer. Aber garantiert nicht nur wegen des Headerbilds. Da verzichte ich lieber auf den heutigen Standard, wer braucht schon ein 3840 Pixel breites Headerbild? Ich nicht. In der Mitte der in der Regel in der Breite begrenzte Content und darüber ein viel viel breiteres Headerimage? Naja, wem's gefällt. Wenn ich so einen Monitor hätte, dafür hätte ich ihn bestimmt nicht gekauft.

[tpk]

Ja, prima, das ist intuitiver und funktioniert bei mir auch.

[tpk]

@spooky
Ich fange gerade an mit dem Zeuch an und bin noch für alle Inputs offen. Würdest Du bei 2560 aufhören? Ich habe hier nen 2560er Monitor, 24 Zoll, wenn ich nicht arbeite ist der Browser schon mal in Vollansicht. Einen 4k Monitor würde man glaube ich ähnlich verwenden, weil man die Schrift kaum kleiner stellen wird?

[mlweb]

Habe gerade nochmal Bisschen gespielt. Das Ganze scheint fehlerfrei zu funktionieren, solange die angegebene Breite kleiner ist als das Originalbild.
Sollte das Originalbild schmaler sein, dann kommen da irgendwie komische Werte raus. Noch habe ich nicht gefunden, wie die zustande kommen.
Ich bin mir nicht sicher ob das ein Bug sein könnte.
Zu mindestens muss man das im Auge haben, denn manchen Redakteuren kann man sagen was man will, die hören einfach nicht zu.

[tpk]

Habe gerade nochmal Bisschen gespielt. Das Ganze scheint fehlerfrei zu funktionieren, solange die angegebene Breite kleiner ist als das Originalbild.
Sollte das Originalbild schmaler sein, dann kommen da irgendwie komische Werte raus. Noch habe ich nicht gefunden, wie die zustande kommen.
Ich bin mir nicht sicher ob das ein Bug sein könnte.

Wenn man 1920 bei Breite angibt aber das jemand auf ein nur 1080px breites Bild andwendet?

[tab]

Naja, den Fall will man ja normalerweise nicht haben. Es sollen Bilder für kleinere Displays kleiner ausgeliefert werden als das Original, es geht ja letztlich um die Ladezeit. Dass Contao jetzt ein 100x100 auf 800x800 aufbläst und dann die größere Datei zum Download anbietet, macht aus meiner Sicht wenig bis gar keinen Sinn. Ich würde das in den Einstellungen gar nicht erst zulassen. Wenn man sowas wirklich haben will, kann das der Browser aus dem kleinen Bild hochskalieren.

[mlweb]

Wenn man 1920 bei Breite angibt aber das jemand auf ein nur 1080px breites Bild andwendet?

Ja. Hatte bei mir gerade die dev-Version einer Seite zur Hand, wo der Kunde Bilder in ganz unterschiedlicher Größe hochgeladen hatte.
Die meisten Bilder waren 600px groß.
Mit einem dieser Bilder hatte ich anfänglich getestet.
Bei Breite hatte ich 600px eingetragen.
Bei size: 100vw und Pixeldichte/Skalierungsfaktor: 250w, 300w, 400w
Das srcset war wie erwartet
Es gab aber auch Bilder mit anderen Abmessungen.
Ein Bild hatte 477px.

Im Code im srcset ergaben sich 477w, 377w und 314w.
Sicher korrekt ist, dass keine nach oben skalierten Bilder berechnet werden sollen, aber auf die Werte 377w und 314w kann ich mir spontan noch keinen Reim machen.
Das muss ich mir mal ganz in Ruhe in einem echten Testszenario anschauen.

[mlweb]

Naja, den Fall will man ja normalerweise nicht haben. Es sollen Bilder für kleinere Displays kleiner ausgeliefert werden als das Original

Ja das ist schon richtig, aber die kleineren Größen sollten schon den angegebenen Werten entsprechen. Siehe oben.

[mlweb]

Ja das ist schon richtig, aber die kleineren Größen sollten schon den angegebenen Werten entsprechen. Siehe oben.

Nachtrag: Übrigens, wenn ich bei meinem oberen Szenario eine Breite von 400px eintrage, funktioniert alles wie erwartet, auch wenn bei Pixeldichte/Skalierungsfaktor zusätzlich 600w steht. Das wird dann einfach bei dem Bild mit nur 477px weggelassen.

[mlweb]

Bei github gemeldet Issue 8807

[malle]

Aber 4k ist doch 3840 / 687 = gerundet 6?

Hallo!

Entscheidend für das 1x,2x... ist die Device Pixel Ratio des Bildschirms, also wieviele Pixel nimmt Dein Bildschirm, um einen Pixel darzustellen.
Mein Notebook hat 2x, ein IPhone plus hat x. Ich glaube, Samsung ist bei 4x, aber mehr gibt es meines Wissens noch nicht.

Peter sagt zum Beispiel in dem Video auch, dass man bedenken sollte, das gerade mobil dann auch ne Menge MB durch die Leitung muss.

Gruß Marcus


Gesendet von iPhone mit Tapatalk

[tpk]

Ich bin noch nicht ganz sattelfest in dem Zeugs: ist das, was Du jetzt ansprichst, nicht ist der erste Fall? Da wird dann ein Logo immer in derselben Größe (100px x 50px) für verschiedene Pixeldichten bereitgehalten.

Ich beziehe mich hier auf den zweiten Fall, wo für verschieden große Devices (mit zudem verschiedenen Auflösungen) die Bilder in unterschiedlicher Größe ausgeliefert werden. Ein Handy kriegt das 1080er, ein Desktop mit mehr als HD ein 2560er. Das 1x,2x kriegt da ne andere Funktion, weil es nun nicht Bilder in verschiedener Pixeldichte bei gleicher Größe berechnet, sondern verschiedene Abmessungen.

Korrigiert mich, wenn es nicht stimmt, so lern ich das ;-)

[mlweb]

Ja genau. Es geht bei Deiner Variante um einen Satz Bilder mit verschiedenen Abmessungen, die für die verschiedenen Bildschirme bereitgestellt werden. Bei der Auswahl berücksichtigt der Browser sowohl die devith-width als auch Pixeldichte.