Today I Learned – Today I Learned …

Videos und Bilder beanspruchen auf Webseiten den meisten Traffic.

Deren Dateigröße sollte daher so klein wie möglich gehalten werden …

Lazy Loading

Bei Bilder-lastigen Seiten empfiehlt es sich zudem Abbildungen erst dann zu laden, wenn sie in den Bereich des Viweports gelangen.

Scrollt ein Besucher nicht bis zu diesen Stellen, muss der Browser die Bilder gar nicht laden …

Dieses „Laden bei Bedarf“ erreicht man durch das IMG-Attribut LOADING:

<img src="bilddatei.avif" loading="lazy" />

Um Bildschirme unterschiedlichster Breiten zu bedienen, kann als IMG-Attribut SRCSET genutzt werden, wo diverse Bildgrößenvarianten angegeben werden:

<img src="bild-1280x720.avif" width="1280" height="720" loading="lazy"
srcset="bild-1280x720.avif 1280w,
bild-960x540.avif 960w,
bild-1024x576.avif 1024w,
bild-1600x900.avif 1600w,
bild.avif 1920w"
sizes"(max-width:1600px) 100vw, 1600px" />

Damit es beim Seitenaufbau und Nachladen nicht zu Verscheibungen kommt, sollten die Bilddimensionen (WIDTH, HEIGHT) angegeben und statt des Bildes ein Platzhalter-Dummy eingesetzt werden.

Platzhalter-Dummys

  • Bilddimensionen (Breite, Höhe) des Originalbildes notieren
  • Originalbildkopie auf 1×1 Pixel scalieren
  • dieses Minibild anstelle des (später nachzuladenden) Originalbildes als BACKGROUND-IMAGE einsetzen, aber auf die volle Größe scalieren

    • Das ergibt einen Farbton, der dem Mittelwert des Originalbildes entspricht

    Weniger elegant ist durchgängige Verwendung eines Standard-Dummy-Bildes

    Beispiel:

    [CSS:]
    #b1 {background-image:url(ph-bild.avif); background-size:cover;}
    [HTML:]
    <img id="b1" loading="lazy" src="bild.avif" width="1200" height="700"/>

    der Effekt des Nachladens wird nur „sichtbar“ wenn sehr viele Bilder auf der Seite liegen, also große Bildmengen transportiert werden müssen – und zwar immer dann, wenn die Platzhalter an den Viewport gelangt sind …