Contao-Camp 2024
Ergebnis 1 bis 12 von 12

Thema: Bilder mit Größenangaben (CLS)

  1. #1
    Contao-Fan
    Registriert seit
    16.01.2012.
    Beiträge
    414

    Standard 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?
    Geändert von Nacht69 (04.03.2021 um 10:07 Uhr)

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    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?
    » sponsor me via GitHub or PayPal or Revolut

  3. #3
    Contao-Fan
    Registriert seit
    16.01.2012.
    Beiträge
    414

    Standard

    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?

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    In <img>. Welche Contao Version?
    » sponsor me via GitHub or PayPal or Revolut

  5. #5
    Contao-Fan
    Registriert seit
    16.01.2012.
    Beiträge
    414

    Standard

    seltsam .... 4.9.12

    schaut ebenso bei normalen ce_texten mit Bilder aus.

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Wie sieht deine Bildgrößeneinstellung aus?
    » sponsor me via GitHub or PayPal or Revolut

  7. #7
    Contao-Fan
    Registriert seit
    16.01.2012.
    Beiträge
    414

    Standard

    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?

  8. #8
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    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?
    » sponsor me via GitHub or PayPal or Revolut

  9. #9
    Contao-Fan
    Registriert seit
    16.01.2012.
    Beiträge
    414

    Standard

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

  10. #10
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Die relevanten Templates wären image und picture_default, nicht ce_image.
    » sponsor me via GitHub or PayPal or Revolut

  11. #11
    Contao-Fan
    Registriert seit
    16.01.2012.
    Beiträge
    414

    Standard

    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....

  12. #12
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    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
    » sponsor me via GitHub or PayPal or Revolut

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •