Bilder mit Größenangaben (CLS)

Guten Tag,

ist es irgendwie möglich (und wenn nicht warum?) die width und vorallem height der Bilder mit auszugeben um die CLS-Fehler leichter in den Griff zu bekommen? Google Pagespeed usw schlagen dies vor.

edit: oder gibt es eine bessere/andere Lösung das CLS-Problem zu beheben?

width und height Attribute werden bereits ausgegeben. In zukünftigen Contao Versionen auch für <source>, da das nun die ersten Browser unterstützen.

Was ist mit "CLS" gemeint?

Cumulative Layout Shift ... https://web.dev/cls/

wird bereits ausgegeben? Bei meinen Installationen sehen die Bilder so in etwa aus:

Code:

---

<picture>
<source srcset="XXX" media="(max-width: 414px)" type="image/webp">
<source srcset="XXX" media="(max-width: 414px)">
<source srcset="XXX" media="(max-width: 526px)" type="image/webp">
<source srcset="XXX" media="(max-width: 526px)">
<source srcset="XXX" media="(max-width: 768px) and (orientation : portrait)" type="image/webp">
<source srcset="XXX" media="(max-width: 768px) and (orientation : portrait)">
<source srcset="XXX" media="(max-width: 768px)  and (orientation : landscape)" type="image/webp">
<source srcset="XXX" media="(max-width: 768px)  and (orientation : landscape)">
<source srcset="XXX" media="(max-width: 812px)" type="image/webp">
....
....
<img src="xxx.jpg" alt="Alttag" loading="lazy" itemprop="image">
</picture>

---

wäre hier die Height im img tag oder im picture tag?

In <img>. Welche Contao Version?

seltsam .... 4.9.12

schaut ebenso bei normalen ce_texten mit Bilder aus.

Wie sieht deine Bildgrößeneinstellung aus?

zB

Breite 288
Höhe 300
Exaktes Format
Zoom leer
pixeldichte leer
size-Attribute leer
Lazy Load ja
Bildformate konvertieren alle....
css leer
orginalbild bei..... nein

meinst du diese Einstellungen?

Mit den von dir genannten Einstellungen bekomme ich folgende HTML Ausgabe:

HTML-Code:

---

<figure class="image_container">
  <picture>
    <source srcset="….webp" type="image/webp">
    <img src="….jpg" alt="" loading="lazy" itemprop="image" width="288" height="300">
  </picture> 
</figure>

---

Die width & height Attribute sind also vorhanden.

Nutzt du angepasste Templates?

Ja aber ich hab gerade extra mit ce_image getestet, da hier noch das Orginal template verwendet wird.

Die relevanten Templates wären image und picture_default, nicht ce_image.

Ah! Kannst du bitte noch einen Media Query anlegen zB

(max-width: 400px)
breite: 264 / Höhe 200

und alles andere leer ... dann ist es weg (bei mir zumindest) Ohne Queries ist es auch da....

Dann ist das Verhalten normal. Dein Media Query gibt dem Bild ein anderes Seitenverhältnis, dadurch gibt Contao automatisch keine width & height Attribute mehr aus, weil das dann nicht mehr zusammen passen würde.

Wie gesagt wird sich das aber in einer zukünftigen Contao Version ändern, sobald man den einzelnen <source> Elementen eine width & height geben kann. Siehe https://github.com/contao/contao/pull/2811