4.4.46 responsive images funktioniert nicht mehr

Seit dem Update auf 4.4.46 funktioniert bei mindestens zwei Webauftritten (hab noch nicht alle durch) die responsive images Bildanpassung nicht mehr.
Es wird auch in großen Fenstern das kleine Bild angezeigt.

Das hab ich bei »Theme / Bildgrößen« eingetragen:

Bildgröße: 760

Sizes-Attribut:
(max-width: 760px) 760px, (min-width:761px) 1140px

Pixeldichte/Skalierungsfaktor:
1x, 1.5x

Das Image-Polyfill wird nach wie vor geladen.


Wenn ich Bildgröße 1140 eingebe, bekomme ich zwar in großen Fenstern 1140px breite Bilder gezeigt, aber es wird in kleinen Fenster kein kleines Bild erzeugt. Somit werden immer die großen Bilddateien übertragen und das soll ja nicht sein.

Weiß jemand Rat?

Poste einen Link zur Seite.

https://www.tv-vaihingen.de/mitgliedschaft.html

Auf der Seite sehe ich kein Bild mit der von dir angegebenen Bildgröße.

Das Bannerbild ist jetzt 760px breit, sollte aber auf dem Desktop 1.5x 760px = 1140px breit sein.

Wie gesagt, so eines sehe ich nicht. Meinst du vielleicht das hier:

HTML-Code:

---

<img src="assets/images/7/TV-Vaihingen_Bildleiste-Mitgliedschaftneu-0b91a7bf.jpg" srcset="assets/images/7/TV-Vaihingen_Bildleiste-Mitgliedschaftneu-0b91a7bf.jpg 780w, assets/images/e/TV-Vaihingen_Bildleiste-Mitgliedschaftneu-f673835a.jpg 1170w" sizes="(max-width: 780px) 780px, (min-width:781px) 1170px" width="780" height="163" alt="" itemprop="image">

---

?

Poste einen Screenshot deiner Bildgrößeneinstellung.

Ach stimmt, das ist das andere Projekt mit dem gleichen Problem
Bildgröße 780px und 1170px sollte es sein

Anhang 23030

https://github.com/contao/contao/iss...ment-567053338

Danke, Fritz!
Wenn ich das richtig verstehe, ist es eine Fehlfunktion und du hast sie jetzt bei Github gepostet.
Stimmt's?

Ob es eine Fehlfunktion ist oder nicht ist noch offen. Auf GitHub kann das nun diskutiert werden.

Als schnellen Workaround würde folgender Code im Template "picture_default" alle width und height-Angaben löschen (deshalb unbedingt auf Nebenwirkungen testen, auf meinen Seiten habe ich jedoch keine festgestellt!) und damit das Problem beheben:

PHP-Code:

---

<?php if ($this->sources): ?>
  <picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <?php foreach ($this->sources as $source): ?>
      <source srcset="<?= $source['srcset'] ?>"<?php if (!empty($source['sizes'])) echo ' sizes="' . $source['sizes'] . '"'; ?><?php if (!empty($source['media'])) echo ' media="' . $source['media'] . '"'; ?>>
    <?php endforeach; ?>
    <!--[if IE 9]></video><![endif]-->
<?php endif; ?>

<img src="<?= $this->img['src'] ?>"<?php if ($this->img['srcset'] !== $this->img['src']) echo ' srcset="' . $this->img['srcset'] . '"'; ?><?php if (!empty($this->img['sizes'])) echo ' sizes="' . $this->img['sizes'] . '"'; ?> alt="<?= $this->alt ?>"<?php if ($this->title) echo ' title="' . $this->title . '"'; ?><?php if ($this->class || !empty($this->img['class'])) echo ' class="' . trim($this->class. ' ' . $this->img['class']) . '"'; ?><?= $this->attributes ?> itemprop="image">

<?php if ($this->sources): ?>
  </picture>
<?php endif; ?>

<?php if ($this->sources || $this->img['src'] !== $this->img['srcset']): ?>
  <script>
    window.respimage && window.respimage({
      elements: [document.images[document.images.length - 1]]
    });
  </script>
<?php endif; ?>

---

Interessanterweise erscheint das neue Verhalten bei mir nur bei Einzelbildern, nicht bei Bildergalerien...

Danke schön,

bei dem oben genannten Projekt hat der Workaround mit dem veränderten picture_default-Template geholfen!

Jetzt probiere ich ihn bei weiteren Projekten aus …

Viele Grüße
Holger

Auch bei mir auf einer Xampp-Installation seit Update auf 4.4.46 dasselbe Problem.
Mit dem Workaround von Physiklehrer #11 klappt es auch bei mir. Mit der auf Github diskutierte Variante mit img {width:auto; height:auto;} wird einzig das kleinste Bild in die richtige Grösse resized (aufgebläht).

Zitat:

---

Zitat von Spooky

https://github.com/contao/contao/iss...ment-567053338

---

Eine Nachfrage:
Angaben im Issue sind gültig für die 4.8 und auch für die 4.9 - Korrekt?
Also mit erforderlichen CSS: img { width: auto; height: auto; }

Zum Verständnis.
Warum werden width/height überhaupt gesetzt?
Hinsichtlich eines korrekten Aspect-Ratio habe ich dies bisher, sofern benötigt, via css gesetzt - Beispiel.

Danke

Zitat:

---

Zitat von Franko

Hinsichtlich eines korrekten Aspect-Ratio habe ich dies bisher, sofern benötigt, via css gesetzt - Beispiel.

---

Das setzt du bei jedem Bild? Kann ich mir nicht vorstellen ;).

Die width/height wird gesetzt, damit der Browser weiß, wie groß das Bild sein wird, ohne zu wissen, wie groß das Bild ist.

Zitat:

---

Zitat von Spooky

Das setzt du bei jedem Bild? Kann ich mir nicht vorstellen ;).

---

Nicht wirklich :-) halt sofern explizit benötigt ...

Zitat:

---

Zitat von Spooky

Die width/height wird gesetzt, damit der Browser weiß, wie groß das Bild sein wird, ohne zu wissen, wie groß das Bild ist.

---

Ok, ich raffs dennoch nicht.
Wenn ich die bisherige Intention richtig verstanden habe - s.: https://blog.kulturbanause.de/2014/0...zes-adaptive/:
Man gibt mehrere Image Dateien/Bildgrößen vor (generiert Contao für uns).
Abhängig von den vorgegebenen Media Queries entscheidet der Browser selbstständig (annähernd) welche Image Datei dann tatsächlich herangezogen werden soll.

Letzteres wird doch über die gesetzte width/height Angabe quasi wieder ausgehebelt -
um dann mit img { width: auto; height: auto; } wieder entgegenzuwirken???

Es geht hier einfach um die Attribute width/height am <img>. Der Browser weiß ja erst, wie groß das Bild ist, wenn er das Bild, das im src Attribut hinterlegt ist, heruntergeladen hat. Dadurch nimmt das <img> initial nicht den Platz ein, den es einnehmen sollte. Wenn du die richtige Bildgröße jedoch, wie vorgesehen, per width/height Attribut semantisch korrekt angibst, dann kann der Browser die richtige Größe für das DOM Element ermitteln, bevor das eigentliche Bild fertig geladen wurde.

Danke.
Hm, ich muss es wohl mal genauer probieren :-)

Bisher hatte ich nie Breitenangaben gesetzt.
Mit img { width: 100%; height: auto;} wurde mir zusammen mit den srcset's dann im Chrome, passend zum aktuellen Viewport / übergeordneter container/div breite,
die passenden und verfügbaren images ausgewählt/gesetzt (DevTools using currentSrc Info).

Contao setzt mir jetzt aber doch immer feste width/height Werte - unabhängig vom tatsächlich Viewport???

Zitat:

---

Zitat von Franko

Bisher hatte ich nie Breitenangaben gesetzt.

---

Du meinst, Contao hat das bisher nie gemacht ;). Oder meinst du in eigenem, statischen HTML?

Zitat:

---

Zitat von Franko

Contao setzt mir jetzt aber doch immer feste width/height Werte - unabhängig vom tatsächlich Viewport???

---

Das hat ja nichts mit dem Viewport zu tun? Hier geht es um reines HTML.

Nein, in den Bildgrößeneinstellungen habe ich nie Breite/Höhe gesetzt,
lediglich "Pixeldichte/Skalierungsfaktur" und Queries in "Sizes-Attribut" ...

Du hast dort gar keine Größe angegeben? Das funktioniert?

Zitat:

---

Zitat von Spooky

Du hast dort gar keine Größe angegeben? Das funktioniert?

---

Naja in der 4.4.x. Die Ausgabe war entsprechend Kulturbanause/Rocksolid Blog dann wie erwartet - bzw.:

Mit img { width: 100%; height: auto;},
verschiedenen Image Dateien/Größen anhand der Contao "Pixeldichte/Skalierungsfaktur" Vorgaben (0.5x, 1x, 1.5x, 2x etc.)
und den Media Queries aus "Sizes-Attribut"
kann ich mit z.B. mit den Chrome DevTools nachvollziehen welche Image Datei der Browser, abhängig von der tatsächlichen Viewport Breite - korrekt - herangezogen hat.

Jetzt funkt mir Contao immer das width/height mit rein -
und mit den CSS Workaround aus dem Issue gehts ja - nur Wozu?
Verhinderung eines Rerendern anhand der width/height Werte schön und gut - aber sollten die nicht dann passend den gesetzten Media Queries erfolgen...

Wie gesagt - steh gerade vom Verständnis ein wenig neben mir ... :-)

Wie kann Contao verschiedene Bildgrößen ausgeben, wenn du gar keine Bildgröße angegeben hast? Verstehe dein Setup nicht ganz.

Zitat:

---

Zitat von Spooky

Wie kann Contao verschiedene Bildgrößen ausgeben, wenn du gar keine Bildgröße angegeben hast? Verstehe dein Setup nicht ganz.

---

Wieso Contao? Das bleibt doch dem Browser überlassen (unless with fixed width/height params)???
Ich werde es mit einer frischen 4.8/4.9 zeitnah ausprobieren.
Bis dato hatte ich mich z.B. strict an folgende Beispiele (rocksolid blog) gehalten:

Zitat:

---

Unterschiedliche Auflösungen für verschiedene Pixeldichten (z. B. „Retina“) können eingerichtet werden, indem man in den Bildgrößen-Einstellungen die gewünschten Pixeldichten einträgt. Wenn Sie für eine Größe von 100x100 die Pixeldichten 0.5x, 1x, 2x vergeben, wird automatisch für jedes Bild, das dieser Größe zugeordnet ist ein 50x50, 100x100 und 200x200 großes Bild erzeugt.

Um zusätzlich verschieden breite Bildschirme zu unterstützen, muss das sizes-Attribut in den Einstellungen vergeben werden. Diese Einstellung teilt dem Browser mit, in welcher Breite das Bild angezeigt wird.

Wenn das Bild immer in voller Breite des Fensters angezeigt wird, tragen Sie 100vw ein. Wenn ein Bild z. B. auf kleineren Bildschirmen in voller Breite angezeigt wird und in größeren immer 500 Pixel breit ist, tragen Sie (max-width: 600px) 100vw, 500px ein. Auch mehrere Media-Queries können verwendet werden z. B. (max-width: 600px) 100vw, (max-width: 900px) 60vw, 500px.

Die Einstellung folgt dem Schema: Media-Query in Klammern (optional), gefolgt von Wert und Einheit. Mehrere Angaben getrennt durch Komma.

Wenn nun bei einer 100x100-Bildgröße unter Sizes 100vw und unter Pixeldichte 0.5x, 1x, 2x eingestellt ist, erzeugt Contao ein 50x50, 100x100 und 200x200 großes Bild und der Browser entscheidet anhand der Sizes-Einstellung und der Daten des Bildschirms welches dieser Bilder geladen wird.

---

Zitat:

---

Zitat von Franko

Wieso Contao? Das bleibt doch dem Browser überlassen (unless with fixed width/height params)???

---

Contao muss aber den entsprechenden HTML Output aber erst mal produzieren. Wenn du weder eine Breite noch eine Höhe angibst, aber dann so etwas wie 0.5x, 2x angibst, was genau gibt Contao dann aus? Contao hat ja dann keine Information darüber, welche Bildgrößen überhaupt generiert werden sollen. Oder nimmt Contao in diesem Fall die Größe des Originalbildes?

Zitat:

---

Zitat von Spooky

Contao muss aber den entsprechenden HTML Output aber erst mal produzieren. Wenn du weder eine Breite noch eine Höhe angibst, aber dann so etwas wie 0.5x, 2x angibst, was genau gibt Contao dann aus? Contao hat ja dann keine Information darüber, welche Bildgrößen überhaupt generiert werden sollen. Oder nimmt Contao in diesem Fall die Größe des Originalbildes?

---

Äh,

Zitat:

---

Wenn nun bei einer 100x100-Bildgröße unter Sizes 100vw und unter Pixeldichte 0.5x, 1x, 2x eingestellt ist, erzeugt Contao ein 50x50, 100x100 und 200x200 großes Bild und der Browser entscheidet anhand der Sizes-Einstellung und der Daten des Bildschirms welches dieser Bilder geladen wird.

---

Also der Browser entscheidet letztlich - hatte ich immer so verstanden.
Wenn ich Images in einem 3 Spalten Grid darstelle, bei kleineren Bildschirmen ein 2 Spalten Grid und auf minimaler Breite eine 1 Spalten Grid -
und dann dies entsprechend in den Media Queries vorgebe entscheidet der Browser welche zur Verfügung stehende Image Datei aus dem srcset der jeweiligen aktuellen Container/Grid Breite am nahesten kommt
und zieht dann diese Datei heran ...

Dann hast du aber bei der Bildgröße 100x100 eingetragen. Ursprünglich hast du ja behauptet, du gibst keine Bildgröße an.

Zitat:

---

Zitat von Spooky

Dann hast du aber bei der Bildgröße 100x100 eingetragen. Ursprünglich hast du ja behauptet, du gibst keine Bildgröße an.

---

Hm, eigentlich nicht.
Ich versuche es lokal mit versch. Bildgrößen Einstellungen nachzuvollziehen (z.B. ala https://jsfiddle.net/jmvq1sc8/) und melde mich dann gegebenenfalls ...
Danke für die Geduld ...

Poste einen Screenshot deiner Bildgrößeneinstellung und poste den resultierenden HTML Code.

Zitat:

---

Zitat von Spooky

Poste einen Screenshot deiner Bildgrößeneinstellung und poste den resultierenden HTML Code.

---

Ok, mach ich dann -
Danke Spooky

Sorry,
alles Quatch - in den Bildgrößen hatte ich auch die Breitenangabe gesetzt - sonst wird ja gar kein srcset ausgegeben.
(kam wohl durcheinander weil ich früher nur srcset mit x Werten gesetzt/ausgeben hatte)

Klappt in der 4.8 zusammen mit eingetragenen Sizes-Attribut (zur Ausgabe: srcset mit w Angaben).
Und dann auch noch mit der webp Konvertierung - Super...

Nochmals Sorry

Hallo Leute,
ich würde dieses Thema gern noch einmal ausgraben, da es mir gerade untergekommen ist.

Folgende Diskussion habe ich auch schon gelesen: https://github.com/contao/contao/issues/937

Das Sizes-Attribut in den Bildgrößen verwende ich nicht, height und width: auto lösen auch mein Problem.

Aber ich habe über die Media-Queries verschiedene Bildgrößen angelegt, welche sich auch im Seitenverhältnis unterscheiden. Klar ist mir auch die height und width Angabe im <img> Tag, die stehen ja auch richtig im Source-Set. Im <img> Tag stehen aber immer die Original-Abmessungen oder die Angaben aus der Bildgröße. Aber nicht die aus den Media-Queries.

Anhang 24704

ohne CSS:

HTML-Code:

---

img{
  height:auto;
  width:auto;
}

---

wird das kleine Bild dann in die Dimensionen des Originals gezerrt... ist das so gedacht?