definierte Bildgrößen funktionieren nicht responsive

[yukay]

Hallo Leute!

Ich verzweifel gerade an der Funktion der Bildgrößen in Contao 3.5.0

Ich habe eine Bildgröße definiert, habe 240px als breite angegeben.....soweit sogut, das Bild wird auch so dargestellt.
Allerdings bekomme ich das mit den Media-Queries nicht hin.
Egal was ich definiere, das Bild bleibt immer 240px breit, bei jedem Viewport.
Habe mir auch schon den Rocksolid Artikel reingezogen und alles mögliche versucht....es tut sich nichts...
Was mache ich denn da falsch?

Was mich auch stört ist diese blaue Meldung, dass ich das Image-Polyfill im Seitenlayout aktivieren soll. Das ist aktiviert. Ist das normal, dass die Meldung trotzdem da steht?

Siehe hier:
Bildschirmfoto 2015-09-03 um 12.35.08.png


Was soll ich tun?

[Spooky]

Egal was ich definiere, das Bild bleibt immer 240px breit, bei jedem Viewport.

Wie hast du das getestet? Wenn du bspw. "View Image Info" im FireFox machst, zeigt dir FireFox die falschen Informationen an. Wenn du statt dessen "View Image" klickst siehst du welches Bild tatsächlich gerade verwendet wird.

Was mich auch stört ist diese blaue Meldung, dass ich das Image-Polyfill im Seitenlayout aktivieren soll. Das ist aktiviert. Ist das normal, dass die Meldung trotzdem da steht?

Ja, ist normal.

[yukay]

Na ich seh doch, wie sich das Bild verhält, wenn ich den viewport mittels viewportresizer verändere. Und da dies die Größe nicht ändert und immer gleichgross bleibt, reagieren die Media-Queries nicht.
Oder verstehe ich hier irgendwas falsch!

Ich hab das auch schon mit 240px und 10px getestet, den Unterschied sollte man doch dann sehen.

[Spooky]

Um zu verstehen was nicht funktioniert, musst du mehr Informationen bereitstellen . Mit einem Link zur Seite sieht man mehr oder weniger alle Informationen. Hilfreich sind dann auch noch die exakten Bildgrößeneinstellungen.

[yukay]

Geht um das Bild in der rechten Spalte hier:

http://labrador-vomhisselsberg.de/in.../ueberuns.html

Unter 780px rutscht die Rechte unter die linke Spalte und unter 680px sollte das Bild 10 px groß sein.
Denn die Einstellungen habe ich so, wie auf dem Bildschirmfoto in meinem post oben.

[Spooky]

Achso ja. Da musst du dir nochmal die Anleitung genauer durchlesen, denn mit diesen Angaben generiert dir Contao nur ein einziges Bild (jenes, dass 240px groß ist). Damit überhaupt mehrere Bilder generiert werden, benötigst du Angaben in der Einstellung "Pixeldichte/Skalierungsfaktor".

[yukay]

Was müsste ich denn jetzt da reinschreiben, damit das Bild unter 680px viewportgrössen auf 10px schrumpft?
Das ist doch wichtig bei einer responsive Seite, dass sich die Größen anpassen.

[thepixture]

Leg dir mal innerhalb deiner angelegten Bildgröße ein weiteres Bildgrößen-Media-Query an mit den gewünschten Bildgrößen, dann sollte es im Frontend auch funktionieren.

bildgrößen.png

Nur mal eben schnell in COntao 3.4.4 getestet.

[yukay]

Schau mal, hab ich jetzt auch gemacht. Komischerweise ändert sich aber nur die Auflösung. Die Größe bleibt bei 240px

Hab das so eingestellt, wie du. Mit einem Media-query innerhalb der Bildgrösse, (max-width: 680px) 100x0

[yukay]

Ahhh....jetzt hab ich mehrere Queries gesetzt und die Werte von der eigentlichen Bildgröße mal auf 0 gesetzt....jetzt werden die Bildgrössen geändert, allerdings ist die Auflösung auf dem Regina Display ziemlich schlecht.

[yukay]

Nach weiteren 2 Stunden rumspielen heute morgen check ich es immernoch nicht.

Es macht einfach nicht das was es soll! Wie gesagt, die Media Queries reagieren zwar nun, allerdings unscharf auf hochauflösenden Displays. Wenn Ich für den Query (max-width: 499px), eine Bildgröße von 260x0 und einen Pixeldichte-Skalierungsfaktor von 1x, 2x eingebe, wird das Bild auf meinem iPhone (Retina) zwar scharf dargestellt, aber auch wieder doppelt so groß.
Was ist das?
Ich check´s einfach nicht!

Also nochmal vereinfacht:

Ein Bild soll in einem Viewport größer als 960px eine breite von 300px haben. unterhalb der 960px soll es 200px breit sein und somit auf meinem iphone auch 200px breit mit doppelter Auflösung dargestellt werden.


Könnte mir jemand bitte verraten, was ich da bei den Bildgrößen einstellen muss, um diese Aufgabe zu bewältigen?

[Spooky]

Es macht einfach nicht das was es soll!

Ich denke es liegt eher daran, dass du nicht verstehst wie diese responsive image sets bzw. picture sets funktionieren und wie Bilder generell am Smartphone am Browser dargestellt werden.

Einfaches Beispiel: angenommen ein Bild ist 100 Pixel breit. Auf dem Desktop wird das auch so dargestellt, sprich die 100px des Bildes nehmen auch 100px Pixel am Monitor ein. Die Bildschirme von Smartphones haben allerdings eine viel höhere Pixel Dichte. Bei den High End Geräten hättest du bspw. 1080x1920 Pixel auf engsten Raum (zB. 5" Diagonale). Wenn dort nun das 100px breite Bild 1:1 dargestellt werden würde, wäre es winzig klein. Oder auch andere Dinge, wo du im CSS 100px angegeben hast, wären so klein. Daher gibt es bei Websites die Begriffe "Device Pixel" und umgangssprachlich "CSS Pixel". Auf einem Gerät mit Device Pixel Ratio von 3.0 (iPhone 6, Nexus 5, etc.) entsprechen 100 CSS Pixel 300 Device Pixel. Also etwas, dass normalerweise 100px groß ist, wird auf 300 reale Pixel aufgeblasen. Und das gilt auch für Bilder. Das 100 Pixel breite Bild wird auf 300 Pixel aufgeblasen und sieht daher unscharf aus.

Könnte mir jemand bitte verraten, was ich da bei den Bildgrößen einstellen muss, um diese Aufgabe zu bewältigen?

Dazu ist eine Skizze notwendig, wie das Layout inkl. Bild am Smartphone aussehen soll, plus CSS Pixel Größenangaben.

[MacKP]

Hallo yukay,
ich hab hier was für dich wo du dich fortbilden kannst, wie das geht ;-)

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

http://rocksolidthemes.com/de/contao...picture-contao

Eventuell hilft dir das ja.

Viele Grüße

[yukay]

Ich denke es liegt eher daran, dass du nicht verstehst wie diese responsive image sets bzw. picture sets funktionieren und wie Bilder generell am Smartphone am Browser dargestellt werden.

Einfaches Beispiel: angenommen ein Bild ist 100 Pixel breit. Auf dem Desktop wird das auch so dargestellt, sprich die 100px des Bildes nehmen auch 100px Pixel am Monitor ein. Die Bildschirme von Smartphones haben allerdings eine viel höhere Pixel Dichte. Bei den High End Geräten hättest du bspw. 1080x1920 Pixel auf engsten Raum (zB. 5" Diagonale). Wenn dort nun das 100px breite Bild 1:1 dargestellt werden würde, wäre es winzig klein. Oder auch andere Dinge, wo du im CSS 100px angegeben hast, wären so klein. Daher gibt es bei Websites die Begriffe "Device Pixel" und umgangssprachlich "CSS Pixel". Auf einem Gerät mit Device Pixel Ratio von 3.0 (iPhone 6, Nexus 5, etc.) entsprechen 100 CSS Pixel 300 Device Pixel. Also etwas, dass normalerweise 100px groß ist, wird auf 300 reale Pixel aufgeblasen. Und das gilt auch für Bilder. Das 100 Pixel breite Bild wird auf 300 Pixel aufgeblasen und sieht daher unscharf aus.


Dazu ist eine Skizze notwendig, wie das Layout inkl. Bild am Smartphone aussehen soll, plus CSS Pixel Größenangaben.

Mhh.....das ist mir eigentlich schon klar, aber:
Wie ich bereits sagte, reagieren die Media-Queries jetzt, aber auf dem iPhone mit Retina wird das Bild unscharf dargestellt.
Contao sollte doch jetzt eigentlich ein Bild liefern, welches die doppelte Pixeldichte hat, oder sehe ich das falsch?

[Spooky]

Mhh.....das ist mir eigentlich schon klar, aber:
Wie ich bereits sagte, reagieren die Media-Queries jetzt, aber auf dem iPhone mit Retina wird das Bild unscharf dargestellt.
Contao sollte doch jetzt eigentlich ein Bild liefern, welches die doppelte Pixeldichte hat, oder sehe ich das falsch?

Nein, so wie du es eingestellt hast, wird folgender Code produziert:

          <source srcset="assets/images/0/elisa_mit_aimee-ffa0c810.jpg" media="(min-width: 921px)">
          <source srcset="assets/images/b/elisa_mit_aimee-d43367fb.jpg 1x, assets/images/1/elisa_mit_aimee-e5548c31.jpg 1.5x, assets/images/7/elisa_mit_aimee-f6bcd4d7.jpg 2x" media="(min-width: 781px) and (max-width: 920px)">
          <source srcset="assets/images/1/elisa_mit_aimee-a78c6911.jpg" media="(min-width: 500px) and (max-width:780px)">
          <source srcset="assets/images/e/elisa_mit_aimee-f7371f6e.jpg" media="(max-width: 499px)"> 

Dein Bild mit der doppelten Pixel Dichte wird nur auf Geräten zwischn 781px und 920px (CSS Pixel) genommen. Am iPhone kommt das letzte Bild in dieser Liste, also http://labrador-vomhisselsberg.de/as...e-f7371f6e.jpg, welches 260px × 195px groß ist.

[yukay]

Sorry, hatte es vom rumprobieren geändert gehabt....schau jetzt nochmal in den Code.
Und wenn du ein Phone mit Hochauflösenden Display hast, wirst du sehen, dass das Bild Unscharf ist

[Spooky]

Sorry, hatte es vom rumprobieren geändert gehabt....schau jetzt nochmal in den Code.
Und wenn du ein Phone mit Hochauflösenden Display hast, wirst du sehen, dass das Bild Unscharf ist

Ja, denn auf einem iPhone wird mit deinen Einstellungen folgendes Bild angezeigt: http://labrador-vomhisselsberg.de/as...e-e5548c31.jpg
Und dieses wird wiederum auf einem iPhone 6 auf 450 Pixel aufgeblasen - und daher ist es auch unscharf.

Warum gerade 450px? Du hast für (max-width:499px) eine Basisgröße von 150px eingestellt. Das iPhone 6 hat eine device pixel ratio von 3.0, also 150px * 3 = 450px. Da du auch einen 2x Skalierungsfaktor für die Bildgenerierung eingestellt hast, wird das 2x Bild genommen (also das mit der höchsten, passenden Auflösung). Da das Basisbild 150px groß ist, ist das 2x Bild natürlich 300px groß. Aber immer noch zu wenig für das iPhone 6 . Wenn du nun zusätzlich einen 3x Skalierungsfaktor angibst, sollte es passen.

[yukay]

Hab ich gemacht, auch hierbei tut sich nix.
Bei den css Grafiken verwende ich für die Retinas immer nur die doppelte Auflösung,die sind zumindest schärfer, als das Bild.

[Spooky]

Jetzt steht nur

<source srcset="assets/images/a/elisa_mit_aimee-cf273a6a.jpg" sizes="1x, 2x, 3x" media="(max-width: 499px)"> 

dort. Was genau hast du im Backend eingetragen?

Generell solltest du für dieses Vorhaben aber nur Responsive Images ohne „Art Direction“ einsetzen.

[yukay]

Pn