Lazy Loading auch ohne Bildgrößen möglich?

[MoSaG]

Hallo zusammen,

wenn ich das richtig verstehe "Lazy Loading kann über das Theme bei der Konfiguration der Bildgrößen aktiviert werden." dann kann man Lazy Loading nur für Bilder aktivieren, wenn man verschiedene Bildgrößen vorgibt, richtig? Was aber, wenn ich keine Bildgrößen vorgeben möchte oder eine Webseite übernommen habe, wo keine Bildgrößen voreingestellt wurden, ich aber trotzdem gerne Lazy Loading aktivieren möchte für ALLE Bilder? Die Lazy Loading Erweiterung soll ja besser nicht mehr benutzt werden ..

Wie immer vorab vielen Dank für Eure Antworten!

[Ainschy]

Hallo MoSaG,

um welche Contao Version handelt es sich?

Loading Lazy sollte nur dort angewandt werden wo das Bild sich unterhalb des Viewports befindet.

An einfachsten ließe sich das über eine Template Anpassung lösen, ist aber abhängig von der Contao Version.

[Spooky]

Ja, lazy loading kann nur mit vorgegebener Bildgröße benutzt werden.

[MoSaG]

Hallo MoSaG,

um welche Contao Version handelt es sich?

Loading Lazy sollte nur dort angewandt werden wo das Bild sich unterhalb des Viewports befindet.

An einfachsten ließe sich das über eine Template Anpassung lösen, ist aber abhängig von der Contao Version.

es handelt sich um 4.13.x also eine Version in der Lazy Loading für Bildgrößen aktiviert werden kann.

Kann ich nicht einfach jedem Bild ein loading="lazy" mitgeben (z.B. im Template), wenn es schon nur (wie Spooky schrieb) nur bei den Bildgrößen aktiviert werden kann?

[Spooky]

Du könntest das picture_default Template entsprechend anpassen, ja. Also

<?php if (!empty($this->img['loading'])): ?> loading="<?= $this->img['loading'] ?>"<?php endif; ?>

zu

 loading="lazy" 

ändern. Allerdings solltest du dann darauf achten, dass durch entsprechendes CSS die Bilder auch ungeladen die richtige Größe einnehmen, damit für above the fold Bilder kein Layout Shift entsteht.

[MoSaG]

Du könntest das picture_default Template entsprechend anpassen, ja. Also

<?php if (!empty($this->img['loading'])): ?> loading="<?= $this->img['loading'] ?>"<?php endif; ?>

zu

 loading="lazy" 

ändern. Allerdings solltest du dann darauf achten, dass durch entsprechendes CSS die Bilder auch ungeladen die richtige Größe einnehmen, damit für above the fold Bilder kein Layout Shift entsteht.

super, danke Dir, werde ich versuchen!