Headerbild V2.1 - Bildgröße und Title

  • Moin Mario,

    vielleicht besteht die Möglichkeit beim nächsten Update das Widget so zu programmieren, dass sowohl "title" als auch als Breite & Höhe der verwendeten Bilder im Quelltext erscheinen. Ist zwar primär wichtig für SEO-Tools und deren Meckerrate, aber gerade Breite und Höhe heflen ja auch beim grundsätzlichen Aufbau der Seite wenn das Bild noch nicht geladen. Gilt übrigens auch für "Nach Oben Type 2".

    Ansonsten: Super coole Widgets - vielen Dank!

    Tobias

    • Offizieller Beitrag

    zu 1.

    Das Alt- und Title-Attribut werden so übernommen wie es in der Bldverwaltung vergeben wurde. Das Title-Attribut nennt sich in ZP "Beschreibung".


    zu 2.

    Das Bild passt sich ja automatisch der Bildschirmbreite an, deshalb steht da auch im Quelltext style="width: 100%". Die Höhe passt sich automatisch dem Seitenverhältnis des Bildes an. Würde man dem Bild feste Werte zuweisen wäre das in keinster Weise mehr Responsive. Das ist somit der modernste Code den man da verwendet.


    zu 3.

    Deses Widget verwendet äußerst wenig Code. Ich kann mir nicht vorstellen das es hier zu Verzögerungen kommt. Außer die eingebunden Bilder wurden nicht ordentlich komprimiert.

  • Hallo Mario,

    besten Dank für die Erläuterungen!

    zu 1: hat geklappt.

    zu 2: Ja, das macht natürlich Sinn.

    zu 3: Klar, der Code ist gering. Dadruch, dass keine Höhe und Breite angegeben werden, weiß der Browser natürlich zu Beginn nicht, wie er die Seite strukturieren soll. Das Headerbild ist natürlich auch das größte Bild auf der Seite und braucht entsprechend zum Laden, erst dann ist ja die Struktur bekannt. Daher kommen dann die schlechteren Werte beim Cumulative Layout Shift. Aber das ist Jammern auf absolut hohem Niveau. Das Widget an sich ist super :)
    Besten Dank

    Tobias

  • Das hat auch nichts mit Zeta zu tun. Google hatte ja vor einiger Zeit angekündigt, dass deren "Web Vitals" für das Ranking in den Suchmaschinen wichtig sein werden. Es geht da hauptsächlich um die User Experience - da soll verhindert werden dass gerade bei Seiten mit vielen Elementen (Fotos, Werbung etc) das Layout dauernd springt bis es vollständig geladen ist und der Nutzer vielleicht schon zwischendrin was anklicken möchte was dann im Moment des Drückens nicht mehr vorhanden ist.

    Die Web Vitals umfassen "Cumulative Layout Shift", "Largest Conteful Paint" und "First Input Delay". Beim Cumulative Layout Shift wird ein Zeitwert berechnet, ab wann das Layout im Browser stabil ist und sich nicht mehr verschiebt. Ganz gut erklärt hier: https://www.seo-suedwest.de/58…-hinter-der-kennzahl.html

    In deinem Widget gibt es zwei Ausprägungen. Bis zu einer gewissen Bildschirmgröße wird das mobile Bild geladen, darüberhinaus das Standardbild. Beide werden nicht jeweils auf die konkrete Bildschirmgröße zugeschnitten (geht ja auch nicht bei einer statischen Webseite), sondern im abgespeicherten Format geladen und dann mittels Breite 100% ausgegeben. Somit gibt es in der Tat auch keine Möglichkeit, Höhe und Breite festzulegen.

    • Offizieller Beitrag

    Ah jetzt habe ich verstanden.

    • Für den Fall würde ich das Bild als Hintergrundbild einbinden.
    • Hierfür kann man einen Container mit einer festen Höhe einbinden in welchem dann das Hintergrundbild platziert wird.
    • Was nicht in Container passt wird vom Bild abgeschnitten.
    • Hierfür kann man dann auch dynamische Werte wie vw, vh, vmin oder vmax nutzen.


    Das wird zB. in folgenden Widgets so genutzt:



    Du kannst ja mal folgenden Code testen ob das ein besseres Ergebnis liefert.


    CSS:



    Quelltext:

    HTML
    <div class="wzp_test"></div>



    PS: Bevor die Frage später aufkommt. Für ein Hintergrundbild kann man keine Bild-Attribute wie "Alt" oder "Title" vergeben.

  • Danke Mario. Hab mit rumgespielt. Da auf dem Bild jedoch mehrere Personen sind die auch nicht abgeschnitten werden soll, bleibe ich beim Widget Headerbild.

    Besten Dank und frohe Festtage

    Tobias